Примеры

Строим область на карте, достижимую от точки отправления

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2GIS isochrone API</title>
        <meta name="description" content="Several destination points example">
    </head>
    <body>
        <div id="container"></div>
        <div id="tooltip"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const reqUrl = `https://catalog.api.2gis.com/get_hull?key=rubfpx2151`;
const start = {
    lat: 54.97564330524832,
    lon: 82.88566589362209,
};
const map = new mapgl.Map('container', {
    center: [start.lon, start.lat],
    zoom: 11,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
const controlsHtml = `<div class="controls">
        <select name="mode">
            <option value="walking">пешком</option>
            <option value="driving" selected>на авто</option>
        </select>
        <select name="duration">
            <option value="600">5 минут</option>
            <option value="1200" selected>10 минут</option>
        </select>
    </div>`;
new mapgl.Control(map, controlsHtml, {
    position: 'topLeft',
});
const modeSelectEl = document.querySelector('select[name="mode"]');
const durationSelectEl = document.querySelector('select[name="duration"]');
const startMarker = new mapgl.Marker(map, {
    coordinates: [start.lon, start.lat],
});
let polyline;
function renderGeometries(geometries) {
    if (polyline) {
        polyline.destroy();
    }
    polyline = new mapgl.Polyline(map, {
        coordinates: geometries.map((item) => [item.lon, item.lat]),
        width: 2,
        color: '#00b7ff',
    });
}
window.addEventListener('change', (evt) => {
    if (evt.target.name === 'mode' || evt.target.name === 'duration') {
        updateGeometries();
    }
});
updateGeometries();
function updateGeometries() {
    const mode = modeSelectEl.value;
    const duration = Number(durationSelectEl.value);
    fetch(reqUrl, {
        method: 'POST',
        body: JSON.stringify({
            start,
            durations: [duration],
            mode,
            start_time: new Date().toISOString(),
        }),
    })
        .then((res) => res.json())
        .then((parsed) => renderGeometries(parsed.geometries[0].points))
        .catch((err) => console.error('error', err));
}

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
select {
    border: 0;
    padding: 4px 10px;
    font-size: 13px;
    box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
    border-radius: 4px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS isochrone API</title>
        <meta name="description" content="Several destination points example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            select {
                border: 0;
                padding: 4px 10px;
                font-size: 13px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="tooltip"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const reqUrl = `https://catalog.api.2gis.com/get_hull?key=Your directions API access key`;
            const start = {
                lat: 54.97564330524832,
                lon: 82.88566589362209,
            };

            const map = new mapgl.Map('container', {
                center: [start.lon, start.lat],
                zoom: 11,
                key: 'Your API access key',
            });

            const controlsHtml = `<div class="controls">
                    <select name="mode">
                        <option value="walking">пешком</option>
                        <option value="driving" selected>на авто</option>
                    </select>
                    <select name="duration">
                        <option value="600">5 минут</option>
                        <option value="1200" selected>10 минут</option>
                    </select>
                </div>`;
            new mapgl.Control(map, controlsHtml, {
                position: 'topLeft',
            });

            const modeSelectEl = document.querySelector('select[name="mode"]');
            const durationSelectEl = document.querySelector('select[name="duration"]');

            const startMarker = new mapgl.Marker(map, {
                coordinates: [start.lon, start.lat],
            });

            let polyline;
            function renderGeometries(geometries) {
                if (polyline) {
                    polyline.destroy();
                }
                polyline = new mapgl.Polyline(map, {
                    coordinates: geometries.map((item) => [item.lon, item.lat]),
                    width: 2,
                    color: '#00b7ff',
                });
            }
            window.addEventListener('change', (evt) => {
                if (evt.target.name === 'mode' || evt.target.name === 'duration') {
                    updateGeometries();
                }
            });
            updateGeometries();

            function updateGeometries() {
                const mode = modeSelectEl.value;
                const duration = Number(durationSelectEl.value);

                fetch(reqUrl, {
                    method: 'POST',
                    body: JSON.stringify({
                        start,
                        durations: [duration],
                        mode,
                        start_time: new Date().toISOString(),
                    }),
                })
                    .then((res) => res.json())
                    .then((parsed) => renderGeometries(parsed.geometries[0].points))
                    .catch((err) => console.error('error', err));
            }
        </script>
    </body>
</html>