Search code examples
mapboxmapbox-gl-jsmapbox-gl

Unable to hide profile ui (Traffic, Driving, Walking, Cycling)


I do not find options to hide / remove profile ui(Traffic, Driving, Walking, Cycling) from the mapbox direction. Is there any options available?

screenshot of profile ui section area. This is the section, I need to hide,Click here to view the profile ui section pic of mapbox directions

The code that i have implemented,

enableMapboxDirection() {
    mapboxgl.accessToken = 'pk.eyJ1Ijoid2FsYWEtbWFwIiwiYSI6ImNqN2VuYmluZjBwZ2UzMnBqM20wNnJieWkifQ.2pKH-XbfOZuXzX9pEqGBjw';
    var directions = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      controls: {
        instructions: false,   
      },
      unit: 'metric', 
      profile: 'driving',  
    });
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9'
    });
    map.on('load', function() {          
      directions.on('route', function(e) {
        console.log(e); // Logs the current route shown in the interface.
        console.log('Your Destination ',directions.getDestination());
        console.log('Your Origin ',directions.getOrigin());
      });
    });
    map.addControl(directions, 'top-left');

  }

Solution

  • You can hide the profile UI with the controls.profileSwitcher parameter. This option is added by the mapbox team few days ago.