mapbox / mapbox-gl-directions

Directions plugin for mapbox-gl-js using Mapbox Directions API.
https://mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/
ISC License
237 stars 123 forks source link

Add driving instructions to seperate DOM element #174

Open vinaykumarhegde opened 6 years ago

vinaykumarhegde commented 6 years ago

Is it possible to show driving instructions to a separate DOM element outside the MAP? I know geocoder supports this link.

LarryBarker commented 6 years ago

UPDATE I was able to get this done using the example for placing geocoder elements outside the map container.

<div id='map' style='width:100%; height: 300px;'></div>
<div id='directions' style='width:100%; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'AccessToken';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var directions = new MapboxDirections({
    accessToken: mapboxgl.accessToken
});

map.addControl(directions, 'top-right');

document.getElementById('directions').appendChild(directions.onAdd(map));
</script>

I too, would like to be able to do something like this.

Looking at the API Docs, I found https://www.mapbox.com/mapbox-gl-js/api/#icontrol

Which leads me to believe I could create my own control and specify the container. It would be cool if the MapboxDirections object accepted a 'container' parameter.