Skip to content

Direction between two points

Example routing between two points using plugin TrackAsia 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 TrackAsia GL Directions." />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
        <link href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" rel="stylesheet" />
        <script src="https://unpkg.com/trackasia-gl-directions/dist/trackasia-gl-directions.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/trackasia-gl-directions/dist/trackasia-gl-directions.css" />
        <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];
            const customStyles = [
                {
                    'id': 'directions-route-line-alt',
                    'type': 'line',
                    'source': 'directions',
                    'layout': {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    'paint': {
                        'line-color': '#bbb',
                        'line-width': 2
                    },
                    'filter': [
                        'all',
                        ['in', '$type', 'LineString'],
                        ['in', 'route', 'alternate']
                    ]
                },
                {
                    'id': 'directions-route-line-casing',
                    'type': 'line',
                    'source': 'directions',
                    'layout': {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    'paint': {
                        'line-color': '#2d5f99',
                        'line-width': 4
                    },
                    'filter': [
                        'all',
                        ['in', '$type', 'LineString'],
                        ['in', 'route', 'selected']
                    ]
                },
                {
                    'id': 'directions-route-line',
                    'type': 'line',
                    'source': 'directions',
                    'layout': {
                        'line-cap': 'butt',
                        'line-join': 'round'
                    },
                    'paint': {
                        'line-color': {
                            'property': 'congestion',
                            'type': 'categorical',
                            'default': '#4882c5',
                            'stops': [
                                ['unknown', '#4882c5'],
                                ['low', '#4882c5'],
                                ['moderate', '#f09a46'],
                                ['heavy', '#e34341'],
                                ['severe', '#8b2342']
                            ]
                        },
                        'line-width': 3
                    },
                    'filter': [
                        'all',
                        ['in', '$type', 'LineString'],
                        ['in', 'route', 'selected']
                    ]
                },
                {
                    'id': 'directions-origin-point',
                    'type': 'circle',
                    'source': 'directions',
                    'paint': {
                        'circle-radius': 10,
                        'circle-color': '#3bb2d0'
                    },
                    'filter': [
                        'all',
                        ['in', '$type', 'Point'],
                        ['in', 'marker-symbol', 'A']
                    ]
                },
                {
                    'id': 'directions-destination-point',
                    'type': 'circle',
                    'source': 'directions',
                    'paint': {
                        'circle-radius': 10,
                        'circle-color': '#8a8bc9'
                    },
                    'filter': [
                        'all',
                        ['in', '$type', 'Point'],
                        ['in', 'marker-symbol', 'B']
                    ]
                }
            ];

            var map = new trackasiagl.Map({
                container: 'map',
                style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
                center: { "lat": 10.762622, "lng": 106.660172 },
                zoom: 3
            });

            const directions = new TrackAsiaDirections({
                api: 'https://maps.track-asia.com/route/v1/',
                apiKey: 'public_key',
                unit: 'metric',
                profile: 'car',
                controls: {
                    inputs: false,
                    instructions: false
                },
                interactive: true,
                instructions: true,
                styles: customStyles
            });

            map.addControl(directions, 'top-left');
            map.on('load', () => {
                directions.setOrigin(originLatLng);
                directions.setDestination(destinationLatLng);
            });
        </script>

    </body>

</html>