mapgl-draw-polygon

Example of simple mapgl polygon drawing

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="container"></div>
<div class="buttons">
  <button id="finish">Finish drawing polygon</button>
  <button id="reset">Reset polygon</button>
</div>

CSS

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

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

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
  center: [55.27052, 25.22522],
  zoom: 11,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

let polygon;
let coordinates = [];

document.querySelector('#finish').addEventListener('click', () => {
  updatePolygon();
  alert(JSON.stringify(coordinates));
});
document.querySelector('#reset').addEventListener('click', () => {
  coordinates = [];
  updatePolygon();
});

const mapContainer = document.querySelector('#container');
mapContainer.addEventListener('click', (ev) => {
  const lngLat = map.unproject([ev.clientX, ev.clientY]);
  coordinates.push(lngLat);
  updatePolygon();
});
mapContainer.addEventListener('mousemove', (ev) => {
  const lngLat = map.unproject([ev.clientX, ev.clientY]);
  updatePolygon(lngLat);
});
mapContainer.addEventListener('mouseout', (ev) => {
  updatePolygon();
});

function updatePolygon(additionalPoint) {
  if (polygon) {
    polygon.destroy();
  }
  polygon = new mapgl.Polygon(map, {
    coordinates: additionalPoint ? [
      [...coordinates, additionalPoint]
    ] : [coordinates],
    interactive: false,
  });
}