MapGL and Direction obstacles

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="container"></div>
<div class="buttons">
  <button id="add-round">1. Add round obstacle</button>
  <button id="add-line">2. Add line obstacle</button>
  <button id="add-area">3. Add area obstacle</button>
  <button id="reset">Reset</button>
</div>

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.buttons {
  position: absolute;
  top: 5px;
  left: 5px;
}

JavaScript

// CAUTION: The keys can be used on jsfiddle.net only! Change to your access keys. 
const directionsApiKey = 'rubfpx2151';
const mapglApiKey = 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7';

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

const points = [{
  x: 55.38982952809094,
  y: 25.094646271318183,
  type: "pedo"
}, {
  x: 55.399926406897144,
  y: 25.338225308052472,
  type: "pedo"
}];

let obstacles = [];
let obstacleMapObjects = [];

fetchAndDrawRoute(points, obstacles);

document.querySelector('#add-round').onclick = async () => {
  const coordinates = [55.36487330656564, 25.119989823594025];
  const radiusInMeters = 3000;
  obstacles.push({
    type: 'point',
    points: [{
      x: coordinates[0],
      y: coordinates[1]
    }],
    extent: radiusInMeters,
    severity: 'hard'
  });
  await fetchAndDrawRoute(points, obstacles);
  obstacleMapObjects.push(new mapgl.Circle(map, {
    coordinates,
    radius: radiusInMeters,
  }));
};

document.querySelector('#add-line').onclick = async () => {
  const coordinates = [
    [55.330388050837804, 25.28088455540494],
    [55.43552031537433, 25.22608999281948]
  ];
  obstacles.push({
    type: 'polyline',
    points: coordinates.map((point) => ({
      x: point[0],
      y: point[1]
    })),
    extent: 10,
    severity: 'hard'
  });
  await fetchAndDrawRoute(points, obstacles);
  obstacleMapObjects.push(new mapgl.Polyline(map, {
    coordinates,
  }));
};

document.querySelector('#add-area').onclick = async () => {
  const coordinates = [
    [55.41432385219307, 25.20269764147224],
    [55.41226391568186, 25.16417208767625],
    [55.48848156498761, 25.125634360878024],
    [55.54547314232755, 25.172872470801977]
  ];
  obstacles.push({
    type: 'polygon',
    points: coordinates.map((point) => ({
      x: point[0],
      y: point[1]
    })),
    severity: 'hard'
  });
  await fetchAndDrawRoute(points, obstacles);
 ...