mapgl map arcs

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<div id="container"></div>

CSS

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

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.31878, 25.23584],
  zoom: 11,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
window.addEventListener('resize', () => map.invalidateSize());

const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
  <circle fill="#ff0000" cx="5" cy="5" r="5"/>
  <circle fill="#0000ff" cx="5" cy="5" r="2"/>
</svg>`;

const cameras = [{
  lngLat: [55.31878, 25.23584],
  rotation: 0,
  fov: 30,
  radius: 5,
}, {
  lngLat: [55.42177682557837, 25.212546053111396],
  rotation: 50,
  fov: 60,
  radius: 3,
}, {
  lngLat:[55.3325129099704, 25.168430634781885],
  rotation: 260,
  fov: 45,
  radius: 5,
}, {
  lngLat:[55.169777925158726, 25.22745469305727],
  rotation: 220,
  fov: 120,
  radius: 6,
}];

function createArc(lngLatCenter, rotation, fov, radiusInKilometers) {
  const lineString = turf.lineArc(lngLatCenter, radiusInKilometers, rotation - fov / 2, rotation + fov / 2);
  const ring = lineString.geometry.coordinates;
  ring.unshift(lngLatCenter);
  ring.push(lngLatCenter);
  return [ring];
}

cameras.forEach((camera) => {
  const polygon = new mapgl.Polygon(map, {
    coordinates: createArc(camera.lngLat, camera.rotation, camera.fov, camera.radius),
    color: '#0000ff66',
    strokeColor: '#0000ff66',
    strokeWidth: 1,
  });
  const marker = new mapgl.Marker(map, {
    coordinates: camera.lngLat,
    icon: 'data:image/svg+xml;base64,' + btoa(icon),
    anchor: [8, 8],
    size: [16, 16],
  });

  function onclick() {
    alert('Camera:\n' + JSON.stringify(camera, null, 2));
  }
  polygon.on('click', onclick);
  marker.on('click', onclick);
})