mapbox-gl-directions icon indicating copy to clipboard operation
mapbox-gl-directions copied to clipboard

Add driving instructions to seperate DOM element

Open vinaykumarhegde opened this issue 7 years ago • 1 comments
trafficstars

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

vinaykumarhegde avatar Apr 27 '18 22:04 vinaykumarhegde

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.

LarryBarker avatar Jul 25 '18 19:07 LarryBarker