1

I have the MapBox directions API working correctly. Showing point A to Point B. The directions/instructions overlay the map currently. I'm wanting to display them as they are, but in another div under the map. Is there a way to do this?

enter image description here

  <div class="flex-child-grow bg-white h-viewport-2/3 h-viewport-full-mm" id="map"></div>



   <script>

const  map = new mapboxgl.Map({ 
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v12',
  center: [-3.13256, 54.59947], // starting position [lng, lat]
zoom: 9 // starting zoom
});

const  directions = new MapboxDirections({
  accessToken: mapboxgl.accessToken,
  //unit: 'metric',
  profile: 'mapbox/walking',
  interactive: false,
  controls: {
    inputs: false,
    instructions: true,
    profileSwitcher: true,
      attributionControl: false
  }
});

map.addControl(directions);
map.on('load', () => {

  directions.setOrigin([startLat, startLng]);
  let bounds = new mapboxgl.LngLatBounds();
  bounds.extend([startLat, startLng]);
  bounds.extend([destLat, destLng]);
  directions.setDestination([destLat, destLng]);
  map.fitBounds(bounds, {padding: 900, duration: 3000});

});
</script>
Vogal
  • 104
  • 6

1 Answers1

0

Is this what you are looking for?

<body>    
    <div id="map"></div>
    <div id = 'directions'></div>
  <script>
     const plugin = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        profile: "mapbox/walking"
      }); 
    
      //add direction plug in to an existing div 
        document.getElementById('directions').appendChild(plugin.onAdd(map))
  </script>
</body>
xfl1234
  • 26
  • 3