draw-route-line | Goong Documents

Draw route on map using Goong Directions API
Draw route on map using Goong Directions API with following tools:
polyline
Draw route on map using Goong Directions API

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw route on map using Goong Directions API</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/@mapbox/polyline/src/polyline.js"></script>
<script src="https://unpkg.com/@goongmaps/goong-sdk/umd/goong-sdk.min.js"></script>

<div id="map"></div>
<script>
    goongjs.accessToken = 'wnicbAmnNkoMHNYUKWnlFHezV189FjmMwkNJ7hKW';
    var map = new goongjs.Map({
        container: 'map',
        style: 'https://tiles.goong.io/assets/goong_map_web.json',
        center: [105.80278, 20.99245],
        zoom: 11.5
    });

    map.on('load', function () {
        var layers = map.getStyle().layers;
        // Find the index of the first symbol layer in the map style
        var firstSymbolId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol') {
                firstSymbolId = layers[i].id;
                break;
            }
        }
        // Initialize goongClient with an API KEY
        var goongClient = goongSdk({
            accessToken: '{Your_API_Key}'
        });
        // Get Directions
        goongClient.directions
            .getDirections({
                origin: '20.981971,105.864323',
                destination: '21.031011,105.783206',
                vehicle: 'car'
            })
            .send()
            .then(function (response) {
                var directions = response.body;
                var route = directions.routes[0];

                var geometry_string = route.overview_polyline.points;
                var geoJSON = polyline.toGeoJSON(geometry_string);
                map.addSource('route', {
                    'type': 'geojson',
                    'data': geoJSON
                });
                // Add route layer below symbol layers
                map.addLayer(
                    {
                        'id': 'route',
                        'type': 'line',
                        'source': 'route',
                        'layout': {
                            'line-join': 'round',
                            'line-cap': 'round'
                        },
                        'paint': {
                            'line-color': '#1e88e5',
                            'line-width': 8
                        }
                    },
                    firstSymbolId
                );
            });
    });
</script>
</body>
</html>