Skip to content

Direction between two points

Example routing between two points using plugin MapVina GL Directions.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Direction between two points</title>
        <meta property="og:description" content="Example routing between two points using plugin MapVina GL Directions." />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://unpkg.com/[email protected]/dist/mapvina-gl.js"></script>
        <link href="https://unpkg.com/[email protected]/dist/mapvina-gl.css" rel="stylesheet" />
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>

        <div id="map"></div>

        <script>
            const originLatLng = [106.62, 10.76];
            const destinationLatLng = [106.7, 10.8];

            var map = new mapvinagl.Map({
                container: 'map',
                style: 'https://maps.mapvina.com/styles/v2/streets.json?key=public_key',
                center: { "lat": 10.762622, "lng": 106.660172 },
                zoom: 11
            });

            map.on('load', () => {
                // add marker for origin
                const originMarker = new mapvinagl.Marker({ color: '#3bb2d0' });
                originMarker.setLngLat(originLatLng);
                originMarker.addTo(map);

                // add marker for destination
                const destinationMarker = new mapvinagl.Marker({ color: '#8a8bc9' });
                destinationMarker.setLngLat(destinationLatLng);
                destinationMarker.addTo(map);

                // Fetch route from MapVina Routing API
                const coordinates = [originLatLng, destinationLatLng];
                const coordsString = coordinates.map(c => c.join(',')).join(';');
                const url = `https://maps.mapvina.com/route/v1/car/${coordsString}?overview=full&geometries=geojson&key=public_key`;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.routes && data.routes.length > 0) {
                            const route = data.routes[0].geometry;
                            map.addSource('route', {
                                'type': 'geojson',
                                'data': {
                                    'type': 'Feature',
                                    'properties': {},
                                    'geometry': route
                                }
                            });

                            // Add a line casing
                            map.addLayer({
                                'id': 'route-casing',
                                'type': 'line',
                                'source': 'route',
                                'layout': {
                                    'line-join': 'round',
                                    'line-cap': 'round'
                                },
                                'paint': {
                                    'line-color': '#2d5f99',
                                    'line-width': 8
                                }
                            });

                            // Add the actual route line
                            map.addLayer({
                                'id': 'route-line',
                                'type': 'line',
                                'source': 'route',
                                'layout': {
                                    'line-join': 'round',
                                    'line-cap': 'round'
                                },
                                'paint': {
                                    'line-color': '#4882c5',
                                    'line-width': 4
                                }
                            });

                            // Fit map to route bounds
                            const bounds = coordinates.reduce(function(bounds, coord) {
                                return bounds.extend(coord);
                            }, new mapvinagl.LngLatBounds(coordinates[0], coordinates[0]));

                            map.fitBounds(bounds, {
                                padding: 50
                            });
                        }
                    });
            });
        </script>

    </body>

</html>