carrouting 2gis example

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="map"></div>

CSS

html,
body,
#map {
    margin: 0;
    width: 100%;
    height: 100%;
}

JavaScript

const query = {
    type: 'jam',
    point_a_name: 'Source',
    point_b_name: 'Target',
    locale: 'en',
    points: [{x: 82.89292907608393, y: 54.97627879743042, type: "pedo"}, {x: 82.98578346481848, y: 55.04401529088645, type: "pedo"}],
};

// CAUTION: This key can be used on jsfiddle.net only! Change to your directions API access key. 
const directionsApiKey = 'rubfpx2151';

// CAUTION: This key can be used on jsfiddle.net only! Change to your MapGL API access key.
const mapglApiKey = 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7';

const map = new mapgl.Map('map', {
    center: [82.89, 55.03],
    zoom: 11,
    key: mapglApiKey,
});

fetch(`https://catalog.api.2gis.ru/carrouting/6.0.0/global?key=${directionsApiKey}`, {
    method: 'post',
    body: JSON.stringify(query),
})
    .then((r) => {
        if (r.status !== 200) {
            throw new Error(`HTTP code is ${r.status}`);
        }
        return r.json();
    })
    .then((r) => drawRoute(r.result && r.result[0]));

function drawRoute(result) {
    if (!result) {
        return;
    }

    const colors = {
        ignore: '#0f6ec1',
        pedestrian: '#626262',
        normal: '#ffc402',
        fast: '#22aa01',
        slow: '#ed2301',
        'slow-jams': '#851705',
    };

    const route = {
        polylines: [],
        points: [],
    };

    if (result.begin_pedestrian_path) {
        const p = new mapgl.Polyline(map, {
            coordinates: parserLineStringWKT(result.begin_pedestrian_path.geometry.selection),
            zIndex: 1,
            zIndex2: 0,
            color: colors.pedestrian,
            color2: '#ffffff',
            width: 5,
            width2: 8,
        });
        route.polylines.push(p);
    }
    if (result.end_pedestrian_path) {
        const p = new mapgl.Polyline(map, {
            coordinates: parserLineStringWKT(result.end_pedestrian_path.geometry.selection),
            zIndex: 1,
            zIndex2: 0,
            color: colors.pedestrian,
            color2:...