markers arc

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-shape@3"></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',
  disablePitchByUserInteraction: true,
});

function createIcon(angle) {
  angle = angle / 180 * Math.PI;
  const r = 50;
  const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(r)
    .startAngle(-angle / 2)
    .endAngle(angle / 2);

  const html = /* HTML */ `
		<svg xmlns="http://www.w3.org/2000/svg" width="${r * 2}" height="${r * 2}" viewBox="0 0 ${r * 2} ${r * 2}">
			<path d="${arc()}" fill="#0000ff77" transform="translate(${r} ${r})"></path>
		</svg>
	`;

  return 'data:image/svg+xml;base64,' + btoa(html);
}

const markers = [
  new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    icon: createIcon(60),
    rotation: 45,
    userData: {
      rotation: 45
    },
  }),

  new mapgl.Marker(map, {
    coordinates: [55.42177682557837, 25.212546053111396],
    icon: createIcon(50),
    rotation: 90,
    userData: {
      rotation: 90
    },
  }),

  new mapgl.Marker(map, {
    coordinates: [55.3325129099704, 25.168430634781885],
    icon: createIcon(360),
    rotation: 150,
    userData: {
      rotation: 150
    },
  }),

  new mapgl.Marker(map, {
    coordinates: [55.169777925158726, 25.22745469305727],
    icon: createIcon(120),
    rotation: 250,
    userData: {
      rotation: 250
    },
  }),
];

map.on('rotation', () => {
  const mapRotation = map.getRotation();
  markers.forEach((marker) => marker.setRotation(marker.userData.rotation + mapRotation));
});