leaflet-labels/lib/bundle.js

Leaflet multiple data source labels

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var L = require('leaflet');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var L__namespace = /*#__PURE__*/_interopNamespace(L);

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
var option = {
  width: 58,
  iconAnchor: [0, 0]
};
function useMarkerLabels(latLng, labelData) {
  var iconAnchor = option.iconAnchor;
  var tempLayer;
  var marker = L__namespace.marker(latLng, {
    icon: L__namespace.divIcon({
      iconSize: [20, 20],
      iconAnchor: iconAnchor,
      className: 'caircleMarker',
      html: '<div class="icon-dot"><div class="pulsating-icon"></div></div>'
    }),
    draggable: false
  });
  var labels = L__namespace.marker(latLng, {
    icon: L__namespace.divIcon({
      iconSize: [20, 20],
      iconAnchor: 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');
    }

    var 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) {
    var colorData = colorBands[index].split('-');
    return label.replace('{}', colorData[0]).replace('{}', colorData[1]);
  }

  function alternate() {
    var lastID = 0;
    tempLayer = setInterval(function () {
      var currentID = lastID + 1 >= labelData.length ? 0 : lastID + 1;
      var htmlElement1 = '[data-model="' + dataModel[lastID % 8] + lastID + '"]';
      var htmlElement2 = '[data-model="' + dataModel[currentID % 8] + currentID + '"]';
      document.querySelectorAll(htmlElement1).forEach(function (_) {
        _.style.zIndex = '0';
      });
      document.querySelectorAll(htmlElement2).forEach(function (_) {
        _.style.zIndex = '10';
      });
      lastID = currentID;
    }, 1500);
  }

  function removeAlternate() {
    clearInterval(tempLayer);
  }

  function unionHtmlEmlement(lableData) {
    var parentDivFront = '<div class="wind-radar-icon">';
    var parentDivBack = '</div>';
    var labelArr = [];
    lableData.forEach(function (item, index) {
      return labelArr.push(labelDrawer(item, index));
    });
    return parentDivFront + circleDrawer() + labelArr.join('') + parentDivBack;
  }

  return {
    marker: marker,
    labels: labels,
    alternate: alternate,
    removeAlternate: removeAlternate
  };
}

exports.useMarkerLabels = useMarkerLabels;