Построение маршрута | MapGL | 2GIS Documentation

Directions

The Directions plugin can be used to find directions through several points.

To add directions search functionality to the Map you need to include the Directions JS file after MapGL API file using unpkg CDN:

<script src="https://unpkg.com/@2gis/mapgl-directions@^1/dist/directions.js"></script>

Or using NPM:

npm install @2gis/mapgl-directions

First you need to instantiate the Directions.

If you install the directions plugin using NPM, you can import the Directions to your project as shown below:

// import as an ES module
import { Directions } from '@2gis/mapgl-directions';

// or as a CommonJS module
const { Directions } = require('@2gis/mapgl-directions');

const directions = new Directions(map, {
    directionsApiKey: 'Your directions API Key',
});

If you use unpkg CDN, you need to instantiate the Directions via the global object mapgl:

const directions = new mapgl.Directions(map, {
    directionsApiKey: 'Your directions API Key',
});

The first argument of the Directions constructor is an instance of the Map, the second - DirectionsOptions.

The directions plugin needs its own key to work with API. You can get it on partner.api.2gis.ru.

Let's create a simple example of two points route search. First of all, we need to handle clicks to the map to get coordinates of points for directions search. For example, a click handler will work as follows: after the first click we will store the first point in a variable, after the second click we will draw the route:

let firstPoint;
let secondPoint;
// Current selecting point
let selecting = 'a';

map.on('click', (e) => {
    const coords = e.lngLat;

    if (selecting != 'end') {
        // Just to visualize selected points, before the route is done
        markers.push(
            new mapgl.Marker(map, {
                coordinates: coords,
                icon: 'https://docs.2gis.com/img/dotMarker.svg',
            }),
        );
    }

    if (selecting === 'a') {
        firstPoint = coords;
        selecting = 'b';
    } else if (selecting === 'b') {
        secondPoint = coords;
        selecting = 'end';
    }

    // If all points are selected — we can draw the route
    if (firstPoint && secondPoint) {
        directions.carRoute({
            points: [firstPoint, secondPoint],
        });
        markers.forEach((m) => {
            m.destroy();
        });
    }
});

You can pass up to 10 points to directions.carRoute.

Try to click the map to select points for directions search:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API directions example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #reset {
                padding: 4px 10px;
                background: #00a81f;
                border-radius: 4px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border: none;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-directions@^1/dist/directions.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const directions = new mapgl.Directions(map, {
                // This key can be used for demo purpose only!
                // You can get your own key on http://partner.api.2gis.ru/
                directionsApiKey: 'Your directions API access key',
            });
            const markers = [];

            let firstPoint;
            let secondPoint;
            // A current selecting point
            let selecting = 'a';

            const controlsHtml = `<button id="reset">Reset points</button> `;
            new mapgl.Control(map, controlsHtml, {
                position: 'topLeft',
            });
            const resetButton = document.getElementById('reset');

            resetButton.addEventListener('click', function() {
                selecting = 'a';
                firstPoint = undefined;
                secondPoint = undefined;
                directions.clear();
            });

            map.on('click', (e) => {
                const coords = e.lngLat;

                if (selecting != 'end') {
                    // Just to visualize selected points, before the route is done
                    markers.push(
                        new mapgl.Marker(map, {
                            coordinates: coords,
                            icon: 'https://docs.2gis.com/img/dotMarker.svg',
                        }),
                    );
                }

                if (selecting === 'a') {
                    firstPoint = coords;
                    selecting = 'b';
                } else if (selecting === 'b') {
                    secondPoint = coords;
                    selecting = 'end';
                }

                // If all points are selected — we can draw the route
                if (firstPoint && secondPoint) {
                    directions.carRoute({
                        points: [firstPoint, secondPoint],
                    });
                    markers.forEach((m) => {
                        m.destroy();
                    });
                }
            });
        </script>
    </body>
</html>