Isochrone API

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

Isochrone 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="to">Go here</option>
            <option value="from" 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 === 'to';
    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="to">Go here</option>
                        <option value="from" 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 === 'to';
                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>

Получение ключа

Для доступа к API нужен специальный ключ. Чтобы его получить, заполните форму по адресу dev.2gis.ru/order.

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

Чтобы получить данные о достижимой области, нужно отправить POST-запрос на endpoint /get_hull. В строке запроса укажите ваш ключ API в качестве значения параметра key.

https://catalog.api.2gis.com/get_hull?key=YOUR_KEY

Координаты начальной точки, время на дорогу, тип движения и другие параметры нужно передать в виде JSON в теле запроса.

Например, чтобы получить область карты, до точек которой можно добраться пешком за 10 и 20 минут, можно отправить следующий запрос:

curl --request POST \
 --url 'https://catalog.api.2gis.com/get_hull?key=API_KEY' \
 --header 'Content-Type: application/json' \
 --data '{
    "start": {
        "lat": 55.028268092578884,
        "lon": 82.91853904724123
    },
    "durations": [600, 1200],
    "mode": "walking"
}'

Параметр start содержит координаты начальной точки (широту и долготу), параметр durations содержит массив отрезков времени, за которые нужно добраться от начальной точки (600 и 1200 секунд), параметр mode указывает тип движения (пешком).

Дополнительно можно указать время начала движения, реверсивность движения (чтобы двигаться к указанной точке, а не от) и другие параметры. Полный список можно найти в Справочнике API.

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

Запрос вернёт массив geometries, описывающий области карты, достижимые за заданные промежутки времени. Информацию о каждом поле можно посмотреть в Справочнике API.

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