carrouting mapgl 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]));


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

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

  // Clear previous polylines
  route.polylines.forEach((p) => p.destroy());

  route.polylines = [];

  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: '#ffffff',
      width: 5,
      width2: 8,
    });
    route.polylines.push(p);
 ...