Mapbox GL directions plugin hiding search origin destination box

Question

I am using Mapbox GL directions plugin inside my app where I set the origin on map load and set driving destination upon user click on any location on the map. I am now trying to remove the top left search origin / destination box yet after extensive research can't figure out how to do so, can someone please help by telling me how to do so? Thanks.

Code I am using in my app below:

var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/streets-v8', 
   center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude],
   zoom: 15
 });


 var directions = new mapboxgl.Directions({
   unit: 'metric',
   profile: 'driving'        
 });

 map.addControl(directions);



 directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]);


 map.on('click', function(e) {

   var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] });
   if (!features.length) {
     return;
   }
   var feature = features[0];

   directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]);

 });

Answer 1

I'll assume you are using Mapbox GL Javascript, and looking at this example it appears map.addControl(new mapboxgl.Directions()); is what is adding the controller. Within your code you gave you also have this map.addControl(directions);. Try removing it and see what happens.

Hope this helps!

Answer 2

I couldn’t figure this out either since there is no documentation, but finally I read through the mapbox-gl-directions.js file and I think I found out how to do it.

In your example, you should embed the controls like this in order to remove the origin / destination box:

var directions = new mapboxgl.Directions({ 
  unit: 'metric',
  profile:'driving', 
  container:'directions', // Specify an element thats not the map container.
  // UI controls
  controls: {
    inputs: false,
    instructions: true
  }
});

map.addControl(directions);