mapgl geojson labels update

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></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',
  autoHideOSMCopyright: true,
});
window.addEventListener('resize', () => map.invalidateSize());

map.on('click', (ev) => console.log(ev.lngLat));

map.on('styleload', () => {
  map.addLayer({
    id: 'my-polygon',
    type: 'polygon',
    filter: ['all',
      ['match', ['sourceAttr', 'type'],
        ['my-source'], true, false
      ],
      ['match', ['get', 'geotype'],
        ['polygon'], true, false
      ]
    ],
    style: {
      color: '#ff000055',
    },
  });

  map.addLayer({
    id: 'my-point',
    type: 'point',
    filter: ['all',
      ['match', ['sourceAttr', 'type'],
        ['my-source'], true, false
      ],
      ['match', ['get', 'geotype'],
        ['point'], true, false
      ]
    ],
    style: {
      iconImage: 'ent_i',
      iconWidth: 20,
      textFont: 'Noto_Sans',
      textFontSize: 20,
      textField: ['get', 'text'],
      textColor: '#0000ff',
      allowOverlap: true,
    },
  });
});

const startLat = 25.27837875347788;
const endLat = 25.186451538414246;

const source = new mapgl.GeoJsonSource(map, {
  attributes: {
    type: 'my-source',
  },
  data: createGeoJson(startLat),
});


let currentIteration = 0;
const iterations = 1;

function updatePosition() {
  currentIteration = (currentIteration + 1) % iterations;

  const t = currentIteration / iterations;
  const lat = startLat + (endLat - startLat) * t;

  source.setData(createGeoJson(lat));
}

setInterval(updatePosition, 2000);

function createGeoJson(latitude) {

  const c = [55.184884124349765, latitude];
  const ring = [
    [c[0] - 0.05, c[1]],
    [c[0], c[1] - 0.05],
    [c[0] + 0.05, c[1]],
    [c[0], c[1] + 0.05],
    [c[0] - 0.05, c[1]],
  ];

  return {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
     ...