Isochrone API

Isochrone API позволяет получить область на карте, которая достижима пешком, на велосипеде или на автомобиле за указанное время, если выйти (выехать) из указанной центральной точки, и также область на карте, из точек которой можной дойти (доехать) до выбранной центральной точки за указанное время.

Может использоваться, например, для отображения точек, куда может дойти пешком, доехать на велосипеде или на машине курьер за 20 минут.

Как это работает

Запросы осуществляются методом POST, все необходимые параметры передаются в формате JSON. Ответы формируются в формате JSON.

В запросе передаются координаты точки отправления/прибытия, время в пути, способ передвижения.

В ответ приходят координаты области. Все параметры запроса и ответа приведены в Описании API.

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

<!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: 25.221081893982912,
    lon: 55.410227360793634,
};
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="reverse">
            <option value="true">Go here</option>
            <option value="false" selected>Go from here</option>
        </select>
        <select name="mode">
            <option value="walking">on foot</option>
            <option value="driving" selected>by car</option>
        </select>
        <select name="duration">
            <option value="600">10 min</option>
            <option value="1200" selected>20 min</option>
        </select>
    </div>`;
new mapgl.Control(map, controlsHtml, {
    position: 'topLeft',
});
const reverseSelectEl = document.querySelector('select[name="reverse"]');
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 === 'reverse' || evt.target.name === 'mode' || evt.target.name === 'duration') {
        updateGeometries();
    }
});
updateGeometries();
function updateGeometries() {
    const reverse = reverseSelectEl.value;
    const mode = modeSelectEl.value;
    const duration = Number(durationSelectEl.value);
    fetch(reqUrl, {
        method: 'POST',
        body: JSON.stringify({
            start,
            durations: [duration],
            mode,
            reverse,
            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: 25.221081893982912,
                lon: 55.410227360793634,
            };

            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="reverse">
                        <option value="true">Go here</option>
                        <option value="false" selected>Go from here</option>
                    </select>
                    <select name="mode">
                        <option value="walking">on foot</option>
                        <option value="driving" selected>by car</option>
                    </select>
                    <select name="duration">
                        <option value="600">10 min</option>
                        <option value="1200" selected>20 min</option>
                    </select>
                </div>`;
            new mapgl.Control(map, controlsHtml, {
                position: 'topLeft',
            });

            const reverseSelectEl = document.querySelector('select[name="reverse"]');
            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 === 'reverse' || evt.target.name === 'mode' || evt.target.name === 'duration') {
                    updateGeometries();
                }
            });
            updateGeometries();

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

                fetch(reqUrl, {
                    method: 'POST',
                    body: JSON.stringify({
                        start,
                        durations: [duration],
                        mode,
                        reverse,
                        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>

Пример запроса

Данные можно получить с помощью POST-запроса на URL https://catalog.api.2gis.com/get_hull?key=YOUR_KEY и payload'а с Content-Type application/json.

В запросе используются следующие параметры:

key=YOUR_KEY — ваш ключ API.

{
    "start": {
        "lat": 55.028268092578884,
        "lon": 82.91853904724123
    },
    "durations": [600, 1200],
    "start_time": "2021-03-29T14:07:00Z",
    "mode": "walking",
    "reverse": false
}

Пример ответа

{
    "generation_time": 0.117,
    "geometries": [
        {
            "attract_points": [],
            "duration": 600,
            "points": [],
            "start_point": {},
            "wkt": "LINESTRING(...)"
        },
        {
            "attract_point": [],
            "duration": 1200,
            "points": [],
            "start_point": {},
            "wkt": "LINESTRING(...)"
        }
    ],
    "mode": "walking",
    "status": "OK"
}

Начало работы

Получите ключ доступа к API. Для этого заполните анкету.
Посмотрите все параметры форматов запроса и ответа