leaflet-labels/lib/bundle.esm-bundler.js

Leaflet multiple data source labels

'use strict';

import * as L from 'leaflet';

var circleStr = '<div class="wr-circle" ><div>北</div><div>西</div><div>东</div><div>南</div></div>';
var dataModel = ['ecmwf', 'page', 'currently', 'not', 'open', 'please', 'settings'];
function labelFunc() {
  return '<div data-model="{}" data-modeldesc="{}" class="wr-rotated" style="transform: rotate({}deg); z-index: {}">' + '<div data-content="{}" style="' + 'background: linear-gradient(to right, {}, {}, rgb(244, 244, 244));' + 'width: {}px;' + 'border-left-color: rgb(244, 244, 244);' + '"></div>' + '</div>';
}
var colorBands = ['rgb(5, 201, 213)-rgb(8, 221, 234)', 'rgb(2, 215, 106)-rgb(4, 228, 112)', 'rgb(4, 108, 210)-rgb(5, 117, 226)', 'rgb(190, 208, 3)-rgb(204, 224, 4)', 'rgb(213, 146, 3)-rgb(229, 157, 4)', 'rgb(151, 4, 214)-rgb(162, 4, 230)', 'rgb(4, 211, 161)-rgb(4, 229, 174)', 'rgb(135, 209, 2)-rgb(147, 228, 3)'];
// Convert data to leaflet Maker
const option= {
  width: 58,
  iconAnchor: [0, 0],
};
export function useMarkerLabels(latLng, labelData) {
  const iconAnchor = option.iconAnchor;
  let tempLayer;
  const marker = L.marker(latLng, {
    icon: L.divIcon({
      iconSize: [20, 20],
      iconAnchor,
      className: 'caircleMarker',
      html: '<div class="icon-dot"><div class="pulsating-icon"></div></div>',
    }),
    draggable: false,
  });
  const labels = L.marker(latLng, {
    icon: L.divIcon({
      iconSize: [20, 20],
      iconAnchor,
      className: 'poiMarker',
      html: unionHtmlEmlement(labelData),
    }),
    draggable: false,
  });
  function circleDrawer() {
    return circleStr;
  }
  function labelDrawer(labelData, enumIndex) {
    if (labelData.dir < 0 || labelData.dir > 360) {
      throw new Error('Direction value out of limit');
    }
    const labelStr = labelFunc()
      .replace('{}', dataModel[enumIndex % 8] + enumIndex)
      .replace('{}', labelData.typeNmae)
      .replace('{}', labelData.dir + '')
      .replace('{}', !!enumIndex ? '0' : '10')
      .replace('{}', labelData.value);
    return contentDrawer(labelStr, enumIndex % 8).replace('{}', option.width + '');
  }
  function contentDrawer(label, index) {
    const colorData = colorBands[index].split('-');
    return label.replace('{}', colorData[0]).replace('{}', colorData[1]);
  }
  function alternate() {
    let lastID = 0;
    tempLayer = setInterval(() => {
      const currentID = lastID + 1 >= labelData.length ? 0 : lastID + 1;
      const htmlElement1 = '[data-model="' + dataModel[lastID % 8] + lastID + '"]';
      const htmlElement2 = '[data-model="' + dataModel[currentID % 8] + currentID + '"]';
      document.querySelectorAll(htmlElement1).forEach(_ => {
        _.style.zIndex = '0';
      });
      document.querySelectorAll(htmlElement2).forEach(_ => {
        _.style.zIndex = '10';
      });
      lastID = currentID;
    }, 1500);
  }
  function removeAlternate() {
    clearInterval(tempLayer);
  }
  function unionHtmlEmlement(lableData) {
    const parentDivFront = '<div class="wind-radar-icon">';
    const parentDivBack = '</div>';
    const labelArr = [];
    lableData.forEach((item, index) => labelArr.push(labelDrawer(item, index)));
    return parentDivFront + circleDrawer() + labelArr.join('') + parentDivBack;
  }
  return { marker, labels, alternate, removeAlternate};
}