evergis-leaflet

by Trufi

HTML

<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<div id="map"></div>
<div class="layers"></div>

CSS

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

.layers {
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
}

.layer {
  width: 250px;
  margin: 5px;
}

JavaScript

let map;
const addedLayersToStyle = {};

DG.then(() => {
  map = DG.map('map', {
    center: [26.1686477267334, 47.4936977377508],
    zoom: 6,
  });

  updateData();
  setInterval(() => updateData(), 10000);
});

let geojson;

async function updateData() {
  const rawData = await fetchData();
  const data = evergisDataToGeoJSON(rawData);

  data.features.forEach((feature) => {
    const name = feature.properties.layer;
    if (!addedLayersToStyle[name]) {
      const color = randomColor();
      addedLayersToStyle[name] = {
        name,
        color
      };
    }
  });

  if (geojson) {
    geojson.remove();
  }
  geojson = L.geoJSON(data, {
    style: (feature) => {
      return {
        color: addedLayersToStyle[feature.properties.layer].color,
        fillOpacity: 0.5,
        weight: 1,
      };
    },
  });
  geojson.addTo(map);

  renderLayersMenu(Object.values(addedLayersToStyle));

  console.log(`Data is updated`);
}

function randomColor() {
  return `#${hex()}${hex()}${hex()}`;
}

function hex() {
  return ('00' + Math.floor(Math.random() * 255).toString(16)).slice(-2);
}

function renderLayersMenu(layers) {
  const html = /* HTML */ `<div>${layers.map(renderLayer).join('')}</div>`;
  document.querySelector('.layers').innerHTML = html;
}

function renderLayer(layer) {
  return /* HTML */ `<div class="layer" data-name="${layer.name}" style="color: ${layer.color}">
        ${layer.name}
    </div>`;
}

function evergisDataToGeoJSON(data) {
  const geojson = {
    type: 'FeatureCollection',
    features: [],
  };

  data.items.forEach((item) => {
    const geometry = evergisGeometryToGeoJSON(item.geometry);
    if (!geometry) {
      return;
    }

    item.attributes.color = [255, 0, 0, 0];

    const feature = {
      type: 'Feature',
      properties: item.attributes,
      geometry,
    };
    geojson.features.push(feature);
  });

  return geojson;
}

function evergisGeometryToGeoJSON(geometry) {
  switch (geometry.type) {
    case 'polygon':
   ...