react-leaflet-ellipsis/dist/EllipsisRasterLayer.js

Use Ellipsis Drive layers in leaflet projects.

"use strict";

require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _reactLeaflet = require("react-leaflet");
var _ellipsisJsUtil = require("ellipsis-js-util");
const _excluded = ["pathId", "timestampId", "style", "maxNativeZoom", "mapRef", "onHover", "onClick", "token", "mask"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
const EllipsisRasterLayer = _ref => {
  let {
      pathId,
      timestampId,
      style,
      maxNativeZoom,
      mapRef,
      onHover,
      onClick,
      token,
      mask
    } = _ref,
    options = _objectWithoutProperties(_ref, _excluded);
  const [res, setRes] = (0, _react.useState)();
  const layerRef = (0, _react.useRef)();
  const getColor = latlng => {
    const layer = layerRef.current;
    if (!layer) return;
    console.log(latlng, layer, "1");
    var size = layer.getTileSize();
    var point = layer._map.project(latlng, layer._tileZoom).floor();
    var coords = point.unscaleBy(size).floor();
    var offset = point.subtract(coords.scaleBy(size));
    coords.z = layer._tileZoom;
    var tile = layer._tiles[layer._tileCoordsToKey(coords)];
    console.log("tile", tile);
    if (!tile || !tile.loaded) return null;
    try {
      var canvas = document.createElement("canvas");
      canvas.width = 1;
      canvas.height = 1;
      var context = canvas.getContext("2d");
      context.drawImage(tile.el, -offset.x, -offset.y, size.x, size.y);
      return context.getImageData(0, 0, 1, 1).data;
    } catch (e) {
      console.log(e);
      return null;
    }
  };
  const onlyOnce = (0, _react.useRef)(false);
  (0, _react.useEffect)(() => {
    const timeoutId = setTimeout(() => {
      if (onlyOnce.current || !(mapRef !== null && mapRef !== void 0 && mapRef.current) || !layerRef.current) return;
      onlyOnce.current = true;
      const f = event => {
        const color = getColor(event.latlng);
        onHover(color, event);
        return;
      };
      if (onHover) {
        mapRef === null || mapRef === void 0 || mapRef.current.on("mousemove", function (event) {
          f(event);
        });
      }
      if (onClick) {
        mapRef === null || mapRef === void 0 || mapRef.current.on("click", function (event) {
          f(event);
        });
      }
    }, 1000);
  });
  (0, _react.useEffect)(() => {
    let destructorCalled = false;
    _ellipsisJsUtil.RasterLayerUtil.getSlippyMapUrlWithDefaults({
      pathId,
      timestampId,
      style,
      zoom: maxNativeZoom,
      token,
      mask
    }).then(res => {
      if (!destructorCalled) setRes(res);
    });
    return () => {
      destructorCalled = true;
    };
  }, [pathId, timestampId, style, maxNativeZoom, token, mask]);
  if (!res) return null;
  return /*#__PURE__*/_react.default.createElement(_reactLeaflet.TileLayer, _extends({
    key: res.id,
    url: res.url,
    tileSize: 256,
    reuseTiles: true,
    maxNativeZoom: res.zoom,
    format: "image/png"
  }, options));
};
var _default = exports.default = EllipsisRasterLayer;