react-three-map 0.8.1 → 1.0.0-next.0

package/dist/es/main.mjs

@@ -1,7 +1,7 @@
 import { useMap as useMap$1 } from "./main2.mjs";
 import { Canvas } from "./main3.mjs";
 import { Coordinates } from "./main4.mjs";
-import { coordsToVector3 } from "./main5.mjs";
+import { averageMercatorScale, coordsToVector3 } from "./main5.mjs";
 import { NearCoordinates } from "./main6.mjs";
 import { vector3ToCoords } from "./main7.mjs";
 const useMap = useMap$1;
@@ -9,6 +9,7 @@ export {
   Canvas,
   Coordinates,
   NearCoordinates,
+  averageMercatorScale,
   coordsToVector3,
   useMap,
   vector3ToCoords

package/dist/es/main10.mjs

@@ -1,12 +1,73 @@
-import { useRef, useCallback } from "react";
-const useFunction = (callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
+import { createPortal } from "react-dom";
+import { memo, forwardRef, useContext, useMemo, useRef, useEffect, useImperativeHandle } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { MapContext } from "./main8.mjs";
+import { deepEqual } from "./main38.mjs";
+function getClassList(className) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}
+memo(forwardRef((props, ref) => {
+  const { map, mapLib } = useContext(MapContext);
+  const container = useMemo(() => {
+    return document.createElement("div");
   }, []);
-};
-export {
-  useFunction
-};
+  const thisRef = useRef({ props });
+  thisRef.current.props = props;
+  const popup = useMemo(() => {
+    const options = { ...props };
+    const pp = new mapLib.Popup(options);
+    pp.setLngLat([props.longitude, props.latitude]);
+    pp.once("open", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onOpen) == null ? void 0 : _b.call(_a, e);
+    });
+    return pp;
+  }, []);
+  useEffect(() => {
+    const onClose = (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onClose) == null ? void 0 : _b.call(_a, e);
+    };
+    popup.on("close", onClose);
+    popup.setDOMContent(container).addTo(map.getMap());
+    return () => {
+      popup.off("close", onClose);
+      if (popup.isOpen()) {
+        popup.remove();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    applyReactStyle(popup.getElement(), props.style);
+  }, [props.style]);
+  useImperativeHandle(ref, () => popup, []);
+  if (popup.isOpen()) {
+    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
+      popup.setLngLat([props.longitude, props.latitude]);
+    }
+    if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
+      popup.setOffset(props.offset);
+    }
+    if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
+      popup.options.anchor = props.anchor;
+      popup.setMaxWidth(props.maxWidth);
+    }
+    if (popup.options.className !== props.className) {
+      const prevClassList = getClassList(popup.options.className);
+      const nextClassList = getClassList(props.className);
+      for (const c of prevClassList) {
+        if (!nextClassList.has(c)) {
+          popup.removeClassName(c);
+        }
+      }
+      for (const c of nextClassList) {
+        if (!prevClassList.has(c)) {
+          popup.addClassName(c);
+        }
+      }
+      popup.options.className = props.className;
+    }
+  }
+  return createPortal(props.children, container);
+}));
 //# sourceMappingURL=main10.mjs.map

package/dist/es/main10.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main10.mjs","sources":["../../src/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}
+{"version":3,"file":"main10.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/popup.js"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { MapContext } from \"./map.js\";\nimport { deepEqual } from \"../utils/deep-equal.js\";\n// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js\nfunction getClassList(className) {\n    return new Set(className ? className.trim().split(/\\s+/) : []);\n}\n/* eslint-disable complexity,max-statements */\nexport const Popup = memo(forwardRef((props, ref) => {\n    const { map, mapLib } = useContext(MapContext);\n    const container = useMemo(() => {\n        return document.createElement('div');\n    }, []);\n    const thisRef = useRef({ props });\n    thisRef.current.props = props;\n    const popup = useMemo(() => {\n        const options = { ...props };\n        const pp = new mapLib.Popup(options);\n        pp.setLngLat([props.longitude, props.latitude]);\n        pp.once('open', e => {\n            thisRef.current.props.onOpen?.(e);\n        });\n        return pp;\n    }, []);\n    useEffect(() => {\n        const onClose = e => {\n            thisRef.current.props.onClose?.(e);\n        };\n        popup.on('close', onClose);\n        popup.setDOMContent(container).addTo(map.getMap());\n        return () => {\n            // https://github.com/visgl/react-map-gl/issues/1825\n            // onClose should not be fired if the popup is removed by unmounting\n            // When using React strict mode, the component is mounted twice.\n            // Firing the onClose callback here would be a false signal to remove the component.\n            popup.off('close', onClose);\n            if (popup.isOpen()) {\n                popup.remove();\n            }\n        };\n    }, []);\n    useEffect(() => {\n        applyReactStyle(popup.getElement(), props.style);\n    }, [props.style]);\n    useImperativeHandle(ref, () => popup, []);\n    if (popup.isOpen()) {\n        if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {\n            popup.setLngLat([props.longitude, props.latitude]);\n        }\n        if (props.offset && !deepEqual(popup.options.offset, props.offset)) {\n            popup.setOffset(props.offset);\n        }\n        if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {\n            popup.options.anchor = props.anchor;\n            popup.setMaxWidth(props.maxWidth);\n        }\n        if (popup.options.className !== props.className) {\n            const prevClassList = getClassList(popup.options.className);\n            const nextClassList = getClassList(props.className);\n            for (const c of prevClassList) {\n                if (!nextClassList.has(c)) {\n                    popup.removeClassName(c);\n                }\n            }\n            for (const c of nextClassList) {\n                if (!prevClassList.has(c)) {\n                    popup.addClassName(c);\n                }\n            }\n            popup.options.className = props.className;\n        }\n    }\n    return createPortal(props.children, container);\n}));\n//# sourceMappingURL=popup.js.map"],"names":[],"mappings":";;;;;AAMA,SAAS,aAAa,WAAW;AAC7B,SAAO,IAAI,IAAI,YAAY,UAAU,KAAM,EAAC,MAAM,KAAK,IAAI,CAAA,CAAE;AACjE;AAEqB,KAAK,WAAW,CAAC,OAAO,QAAQ;AACjD,QAAM,EAAE,KAAK,OAAQ,IAAG,WAAW,UAAU;AAC7C,QAAM,YAAY,QAAQ,MAAM;AAC5B,WAAO,SAAS,cAAc,KAAK;AAAA,EACtC,GAAE,CAAE,CAAA;AACL,QAAM,UAAU,OAAO,EAAE,MAAO,CAAA;AAChC,UAAQ,QAAQ,QAAQ;AACxB,QAAM,QAAQ,QAAQ,MAAM;AACxB,UAAM,UAAU,EAAE,GAAG;AACrB,UAAM,KAAK,IAAI,OAAO,MAAM,OAAO;AACnC,OAAG,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,CAAC;AAC9C,OAAG,KAAK,QAAQ,OAAK;;AACjB,0BAAQ,QAAQ,OAAM,WAAtB,4BAA+B;AAAA,IAC3C,CAAS;AACD,WAAO;AAAA,EACV,GAAE,CAAE,CAAA;AACL,YAAU,MAAM;AACZ,UAAM,UAAU,OAAK;;AACjB,0BAAQ,QAAQ,OAAM,YAAtB,4BAAgC;AAAA,IAC5C;AACQ,UAAM,GAAG,SAAS,OAAO;AACzB,UAAM,cAAc,SAAS,EAAE,MAAM,IAAI,OAAM,CAAE;AACjD,WAAO,MAAM;AAKT,YAAM,IAAI,SAAS,OAAO;AAC1B,UAAI,MAAM,UAAU;AAChB,cAAM,OAAM;AAAA,MACf;AAAA,IACb;AAAA,EACK,GAAE,CAAE,CAAA;AACL,YAAU,MAAM;AACZ,oBAAgB,MAAM,WAAY,GAAE,MAAM,KAAK;AAAA,EACvD,GAAO,CAAC,MAAM,KAAK,CAAC;AAChB,sBAAoB,KAAK,MAAM,OAAO,CAAE,CAAA;AACxC,MAAI,MAAM,UAAU;AAChB,QAAI,MAAM,YAAY,QAAQ,MAAM,aAAa,MAAM,UAAW,EAAC,QAAQ,MAAM,UAAU;AACvF,YAAM,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,CAAC;AAAA,IACpD;AACD,QAAI,MAAM,UAAU,CAAC,UAAU,MAAM,QAAQ,QAAQ,MAAM,MAAM,GAAG;AAChE,YAAM,UAAU,MAAM,MAAM;AAAA,IAC/B;AACD,QAAI,MAAM,QAAQ,WAAW,MAAM,UAAU,MAAM,QAAQ,aAAa,MAAM,UAAU;AACpF,YAAM,QAAQ,SAAS,MAAM;AAC7B,YAAM,YAAY,MAAM,QAAQ;AAAA,IACnC;AACD,QAAI,MAAM,QAAQ,cAAc,MAAM,WAAW;AAC7C,YAAM,gBAAgB,aAAa,MAAM,QAAQ,SAAS;AAC1D,YAAM,gBAAgB,aAAa,MAAM,SAAS;AAClD,iBAAW,KAAK,eAAe;AAC3B,YAAI,CAAC,cAAc,IAAI,CAAC,GAAG;AACvB,gBAAM,gBAAgB,CAAC;AAAA,QAC1B;AAAA,MACJ;AACD,iBAAW,KAAK,eAAe;AAC3B,YAAI,CAAC,cAAc,IAAI,CAAC,GAAG;AACvB,gBAAM,aAAa,CAAC;AAAA,QACvB;AAAA,MACJ;AACD,YAAM,QAAQ,YAAY,MAAM;AAAA,IACnC;AAAA,EACJ;AACD,SAAO,aAAa,MAAM,UAAU,SAAS;AACjD,CAAC,CAAC;","x_google_ignoreList":[0]}

package/dist/es/main11.mjs

@@ -1,37 +1,14 @@
-import { Matrix4, Vector3 } from "three";
-const originMx = new Matrix4();
-const projByView = new Matrix4();
-const projByViewInv = new Matrix4();
-const fwd = new Vector3();
-function syncCamera(camera, origin, mapCamMx) {
-  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
-  projByViewInv.copy(projByView).invert();
-  updateCamera(camera, projByViewInv);
-  camera.updateMatrix();
-  camera.updateMatrixWorld(true);
-  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
-  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
-  camera.far = calculateFar(
-    camera.matrix.elements[10],
-    camera.matrix.elements[14],
-    camera.near
-  );
-  camera.userData.projByView = projByView.toArray();
-  camera.userData.projByViewInv = projByViewInv.toArray();
+import { memo, useEffect } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { useControl } from "./main39.mjs";
+function _AttributionControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.AttributionControl(props), {
+    position: props.position
+  });
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
 }
-const updateCamera = (target, projByViewInv2) => {
-  target.position.setScalar(0).applyMatrix4(projByViewInv2);
-  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
-  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
-  target.lookAt(fwd);
-};
-function calculateFar(c, d, near) {
-  const numerator = d * (c - 1);
-  const denominator = c * near + near;
-  const far = numerator / denominator;
-  return far;
-}
-export {
-  syncCamera
-};
+memo(_AttributionControl);
 //# sourceMappingURL=main11.mjs.map

package/dist/es/main11.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main11.mjs","sources":["../../src/core/sync-camera.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple, Object3D, PerspectiveCamera, Vector3 } from \"three\";\n\nconst originMx = new Matrix4();\n\n/** projection * view matrix  */\nconst projByView = new Matrix4();\n/** projection * view matrix inverted */\nconst projByViewInv = new Matrix4();\n\n/** forward */\nconst fwd = new Vector3();\n\n\nexport function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple) {\n\n  projByView\n    .fromArray(mapCamMx)\n    .multiply(originMx.fromArray(origin));\n  projByViewInv\n    .copy(projByView)\n    .invert();\n\n  updateCamera(camera, projByViewInv);\n  camera.updateMatrix();\n  camera.updateMatrixWorld(true);  \n\n  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);\n  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n\n  camera.far = calculateFar(\n    camera.matrix.elements[10], camera.matrix.elements[14], camera.near\n  )\n\n  camera.userData.projByView = projByView.toArray();\n  camera.userData.projByViewInv = projByViewInv.toArray();\n\n}\n\nconst updateCamera = (target: Object3D, projByViewInv: Matrix4) => {\n\n  target.position\n    .setScalar(0)\n    .applyMatrix4(projByViewInv)\n\n  target.up\n    .set(0, -1, 0)\n    .applyMatrix4(projByViewInv)\n    .negate()\n    .add(target.position)\n    .normalize()\n\n  fwd\n    .set(0, 0, 1)\n    .applyMatrix4(projByViewInv)\n\n  target.lookAt(fwd);\n\n}\n\nfunction calculateFar(c: number, d: number, near: number): number {\n  const numerator = d * (c - 1);\n  const denominator = c * near + near;\n  const far = numerator / denominator;\n  return far;\n}"],"names":["projByViewInv"],"mappings":";AAEA,MAAM,WAAW,IAAI;AAGrB,MAAM,aAAa,IAAI;AAEvB,MAAM,gBAAgB,IAAI;AAG1B,MAAM,MAAM,IAAI;AAGA,SAAA,WAAW,QAA2B,QAAsB,UAAwB;AAElG,aACG,UAAU,QAAQ,EAClB,SAAS,SAAS,UAAU,MAAM,CAAC;AAEnC,gBAAA,KAAK,UAAU,EACf,OAAO;AAEV,eAAa,QAAQ,aAAa;AAClC,SAAO,aAAa;AACpB,SAAO,kBAAkB,IAAI;AAE7B,SAAO,iBAAiB,KAAK,OAAO,MAAM,EAAE,YAAY,UAAU;AAClE,SAAO,wBAAwB,KAAK,OAAO,gBAAgB,EAAE;AAE7D,SAAO,MAAM;AAAA,IACX,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO;AAAA,EAAA;AAG1D,SAAA,SAAS,aAAa,WAAW,QAAQ;AACzC,SAAA,SAAS,gBAAgB,cAAc,QAAQ;AAExD;AAEA,MAAM,eAAe,CAAC,QAAkBA,mBAA2B;AAEjE,SAAO,SACJ,UAAU,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,GACJ,IAAI,GAAG,IAAI,CAAC,EACZ,aAAaA,cAAa,EAC1B,SACA,IAAI,OAAO,QAAQ,EACnB;AAEH,MACG,IAAI,GAAG,GAAG,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,OAAO,GAAG;AAEnB;AAEA,SAAS,aAAa,GAAW,GAAW,MAAsB;AAC1D,QAAA,YAAY,KAAK,IAAI;AACrB,QAAA,cAAc,IAAI,OAAO;AAC/B,QAAM,MAAM,YAAY;AACjB,SAAA;AACT;"}
+{"version":3,"file":"main11.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/attribution-control.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { useControl } from \"./use-control.js\";\nfunction _AttributionControl(props) {\n    const ctrl = useControl(({ mapLib }) => new mapLib.AttributionControl(props), {\n        position: props.position\n    });\n    useEffect(() => {\n        applyReactStyle(ctrl._container, props.style);\n    }, [props.style]);\n    return null;\n}\nexport const AttributionControl = memo(_AttributionControl);\n//# sourceMappingURL=attribution-control.js.map"],"names":[],"mappings":";;;AAGA,SAAS,oBAAoB,OAAO;AAChC,QAAM,OAAO,WAAW,CAAC,EAAE,OAAQ,MAAK,IAAI,OAAO,mBAAmB,KAAK,GAAG;AAAA,IAC1E,UAAU,MAAM;AAAA,EACxB,CAAK;AACD,YAAU,MAAM;AACZ,oBAAgB,KAAK,YAAY,MAAM,KAAK;AAAA,EACpD,GAAO,CAAC,MAAM,KAAK,CAAC;AAChB,SAAO;AACX;AACkC,KAAK,mBAAmB;","x_google_ignoreList":[0]}

package/dist/es/main12.mjs

@@ -1,15 +1,14 @@
-import { useMemo } from "react";
-import { coordsToMatrix } from "./main19.mjs";
-function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }) {
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  }), [latitude, longitude, altitude, fromLngLat]);
-  return m4;
+import { memo, useEffect } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { useControl } from "./main39.mjs";
+function _FullscreenControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.FullscreenControl({
+    container: props.containerId && document.getElementById(props.containerId)
+  }), { position: props.position });
+  useEffect(() => {
+    applyReactStyle(ctrl._controlContainer, props.style);
+  }, [props.style]);
+  return null;
 }
-export {
-  useCoordsToMatrix
-};
+memo(_FullscreenControl);
 //# sourceMappingURL=main12.mjs.map

package/dist/es/main12.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main12.mjs","sources":["../../src/core/use-coords-to-matrix.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoordsToMatrix({latitude, longitude, altitude, fromLngLat}: Props) {\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  }), [latitude, longitude, altitude, fromLngLat]);\n\n  return m4;\n}"],"names":[],"mappings":";;AAMO,SAAS,kBAAkB,EAAC,UAAU,WAAW,UAAU,cAAoB;AAC9E,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}
+{"version":3,"file":"main12.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/fullscreen-control.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { useControl } from \"./use-control.js\";\nfunction _FullscreenControl(props) {\n    const ctrl = useControl(({ mapLib }) => new mapLib.FullscreenControl({\n        container: props.containerId && document.getElementById(props.containerId)\n    }), { position: props.position });\n    useEffect(() => {\n        applyReactStyle(ctrl._controlContainer, props.style);\n    }, [props.style]);\n    return null;\n}\nexport const FullscreenControl = memo(_FullscreenControl);\n//# sourceMappingURL=fullscreen-control.js.map"],"names":[],"mappings":";;;AAGA,SAAS,mBAAmB,OAAO;AAC/B,QAAM,OAAO,WAAW,CAAC,EAAE,OAAM,MAAO,IAAI,OAAO,kBAAkB;AAAA,IACjE,WAAW,MAAM,eAAe,SAAS,eAAe,MAAM,WAAW;AAAA,EAC5E,CAAA,GAAG,EAAE,UAAU,MAAM,SAAU,CAAA;AAChC,YAAU,MAAM;AACZ,oBAAgB,KAAK,mBAAmB,MAAM,KAAK;AAAA,EAC3D,GAAO,CAAC,MAAM,KAAK,CAAC;AAChB,SAAO;AACX;AACiC,KAAK,kBAAkB;","x_google_ignoreList":[0]}

package/dist/es/main13.mjs

@@ -1,26 +1,44 @@
-import { useThree, _roots } from "@react-three/fiber";
-import { useState } from "react";
-import { Matrix4 } from "three";
-function useR3M() {
-  const r3m = useThree((s) => s.r3m);
-  return r3m;
+import { memo, forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { useControl } from "./main39.mjs";
+function _GeolocateControl(props, ref) {
+  const thisRef = useRef({ props });
+  const ctrl = useControl(({ mapLib }) => {
+    const gc = new mapLib.GeolocateControl(props);
+    const setupUI = gc._setupUI.bind(gc);
+    gc._setupUI = (args) => {
+      if (!gc._container.hasChildNodes()) {
+        setupUI(args);
+      }
+    };
+    gc.on("geolocate", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onGeolocate) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("error", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onError) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("outofmaxbounds", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onOutOfMaxBounds) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("trackuserlocationstart", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onTrackUserLocationStart) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("trackuserlocationend", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onTrackUserLocationEnd) == null ? void 0 : _b.call(_a, e);
+    });
+    return gc;
+  }, { position: props.position });
+  thisRef.current.props = props;
+  useImperativeHandle(ref, () => ctrl, []);
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
 }
-function useInitR3M(props) {
-  const canvas = useThree((s) => s.gl.domElement);
-  useState(() => {
-    const store = _roots.get(canvas).store;
-    initR3M({ ...props, store });
-  });
-}
-function initR3M({ store, ...props }) {
-  const viewProjMx = new Matrix4().identity().toArray();
-  const r3m = { ...props, viewProjMx };
-  store.setState({ r3m });
-  return r3m;
-}
-export {
-  initR3M,
-  useInitR3M,
-  useR3M
-};
+memo(forwardRef(_GeolocateControl));
 //# sourceMappingURL=main13.mjs.map

package/dist/es/main13.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main13.mjs","sources":["../../src/core/use-r3m.ts"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { Matrix4, Matrix4Tuple } from \"three\";\nimport { UseBoundStore } from 'zustand';\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\nexport interface R3M<T extends MapInstance = MapInstance> {\n  /** Map provider */\n  map: T,\n  /** view projection matrix coming from the map provider */\n  viewProjMx: Matrix4Tuple,\n  fromLngLat: FromLngLat,\n}\n\nexport function useR3M<T extends MapInstance> () {\n  const r3m = useThree(s=>(s as any).r3m) as R3M<T>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}\n\n/** init `useR3M` hook */\nexport function useInitR3M<T extends MapInstance>(props: {\n  map: T; fromLngLat: FromLngLat;\n}) {\n  const canvas = useThree(s => s.gl.domElement);\n  // to run only once\n  useState(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    initR3M({...props, store})\n  })\n}\n\nexport function initR3M<T extends MapInstance>({store, ...props}: {\n  map: T;\n  fromLngLat: FromLngLat;\n  store: UseBoundStore<RootState>;\n}) {\n  const viewProjMx = new Matrix4().identity().toArray();\n  const r3m : R3M<T> = { ...props, viewProjMx };\n  store.setState({r3m} as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}"],"names":[],"mappings":";;;AAcO,SAAS,SAAiC;AAC/C,QAAM,MAAM,SAAS,CAAI,MAAA,EAAU,GAAG;AAC/B,SAAA;AACT;AAGO,SAAS,WAAkC,OAE/C;AACD,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAE5C,WAAS,MAAI;AACX,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,YAAQ,EAAC,GAAG,OAAO,MAAM,CAAA;AAAA,EAAA,CAC1B;AACH;AAEO,SAAS,QAA+B,EAAC,OAAO,GAAG,SAIvD;AACD,QAAM,aAAa,IAAI,QAAA,EAAU,WAAW,QAAQ;AACpD,QAAM,MAAe,EAAE,GAAG,OAAO,WAAW;AACtC,QAAA,SAAS,EAAC,IAAA,CAAW;AACpB,SAAA;AACT;"}
+{"version":3,"file":"main13.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/geolocate-control.js"],"sourcesContent":["import { useImperativeHandle, useRef, useEffect, forwardRef, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { useControl } from \"./use-control.js\";\nfunction _GeolocateControl(props, ref) {\n    const thisRef = useRef({ props });\n    const ctrl = useControl(({ mapLib }) => {\n        const gc = new mapLib.GeolocateControl(props);\n        // Hack: fix GeolocateControl reuse\n        // When using React strict mode, the component is mounted twice.\n        // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.\n        const setupUI = gc._setupUI.bind(gc);\n        gc._setupUI = args => {\n            if (!gc._container.hasChildNodes()) {\n                setupUI(args);\n            }\n        };\n        gc.on('geolocate', e => {\n            thisRef.current.props.onGeolocate?.(e);\n        });\n        gc.on('error', e => {\n            thisRef.current.props.onError?.(e);\n        });\n        gc.on('outofmaxbounds', e => {\n            thisRef.current.props.onOutOfMaxBounds?.(e);\n        });\n        gc.on('trackuserlocationstart', e => {\n            thisRef.current.props.onTrackUserLocationStart?.(e);\n        });\n        gc.on('trackuserlocationend', e => {\n            thisRef.current.props.onTrackUserLocationEnd?.(e);\n        });\n        return gc;\n    }, { position: props.position });\n    thisRef.current.props = props;\n    useImperativeHandle(ref, () => ctrl, []);\n    useEffect(() => {\n        applyReactStyle(ctrl._container, props.style);\n    }, [props.style]);\n    return null;\n}\nexport const GeolocateControl = memo(forwardRef(_GeolocateControl));\n//# sourceMappingURL=geolocate-control.js.map"],"names":[],"mappings":";;;AAGA,SAAS,kBAAkB,OAAO,KAAK;AACnC,QAAM,UAAU,OAAO,EAAE,MAAO,CAAA;AAChC,QAAM,OAAO,WAAW,CAAC,EAAE,OAAM,MAAO;AACpC,UAAM,KAAK,IAAI,OAAO,iBAAiB,KAAK;AAI5C,UAAM,UAAU,GAAG,SAAS,KAAK,EAAE;AACnC,OAAG,WAAW,UAAQ;AAClB,UAAI,CAAC,GAAG,WAAW,iBAAiB;AAChC,gBAAQ,IAAI;AAAA,MACf;AAAA,IACb;AACQ,OAAG,GAAG,aAAa,OAAK;;AACpB,0BAAQ,QAAQ,OAAM,gBAAtB,4BAAoC;AAAA,IAChD,CAAS;AACD,OAAG,GAAG,SAAS,OAAK;;AAChB,0BAAQ,QAAQ,OAAM,YAAtB,4BAAgC;AAAA,IAC5C,CAAS;AACD,OAAG,GAAG,kBAAkB,OAAK;;AACzB,0BAAQ,QAAQ,OAAM,qBAAtB,4BAAyC;AAAA,IACrD,CAAS;AACD,OAAG,GAAG,0BAA0B,OAAK;;AACjC,0BAAQ,QAAQ,OAAM,6BAAtB,4BAAiD;AAAA,IAC7D,CAAS;AACD,OAAG,GAAG,wBAAwB,OAAK;;AAC/B,0BAAQ,QAAQ,OAAM,2BAAtB,4BAA+C;AAAA,IAC3D,CAAS;AACD,WAAO;AAAA,EACV,GAAE,EAAE,UAAU,MAAM,SAAU,CAAA;AAC/B,UAAQ,QAAQ,QAAQ;AACxB,sBAAoB,KAAK,MAAM,MAAM,CAAE,CAAA;AACvC,YAAU,MAAM;AACZ,oBAAgB,KAAK,YAAY,MAAM,KAAK;AAAA,EACpD,GAAO,CAAC,MAAM,KAAK,CAAC;AAChB,SAAO;AACX;AACgC,KAAK,WAAW,iBAAiB,CAAC;","x_google_ignoreList":[0]}

package/dist/es/main14.mjs

@@ -1,5 +1,14 @@
-const earthRadius = 6378137;
-export {
-  earthRadius
-};
+import { memo, useEffect } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { useControl } from "./main39.mjs";
+function _NavigationControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
+    position: props.position
+  });
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
+}
+memo(_NavigationControl);
 //# sourceMappingURL=main14.mjs.map

package/dist/es/main14.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main14.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6378137;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}
+{"version":3,"file":"main14.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/navigation-control.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { useControl } from \"./use-control.js\";\nfunction _NavigationControl(props) {\n    const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {\n        position: props.position\n    });\n    useEffect(() => {\n        applyReactStyle(ctrl._container, props.style);\n    }, [props.style]);\n    return null;\n}\nexport const NavigationControl = memo(_NavigationControl);\n//# sourceMappingURL=navigation-control.js.map"],"names":[],"mappings":";;;AAGA,SAAS,mBAAmB,OAAO;AAC/B,QAAM,OAAO,WAAW,CAAC,EAAE,OAAQ,MAAK,IAAI,OAAO,kBAAkB,KAAK,GAAG;AAAA,IACzE,UAAU,MAAM;AAAA,EACxB,CAAK;AACD,YAAU,MAAM;AACZ,oBAAgB,KAAK,YAAY,MAAM,KAAK;AAAA,EACpD,GAAO,CAAC,MAAM,KAAK,CAAC;AAChB,SAAO;AACX;AACiC,KAAK,kBAAkB;","x_google_ignoreList":[0]}

package/dist/es/main15.mjs

@@ -1,33 +1,24 @@
-import { useThree, _roots } from "@react-three/fiber";
-import { useMemo } from "react";
-function useCoords() {
-  const coords = useThree((s) => s.coords);
-  return coords;
+import { memo, useRef, useEffect } from "react";
+import { applyReactStyle } from "./main37.mjs";
+import { useControl } from "./main39.mjs";
+function _ScaleControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
+    position: props.position
+  });
+  const propsRef = useRef(props);
+  const prevProps = propsRef.current;
+  propsRef.current = props;
+  const { style } = props;
+  if (props.maxWidth !== void 0 && props.maxWidth !== prevProps.maxWidth) {
+    ctrl.options.maxWidth = props.maxWidth;
+  }
+  if (props.unit !== void 0 && props.unit !== prevProps.unit) {
+    ctrl.setUnit(props.unit);
+  }
+  useEffect(() => {
+    applyReactStyle(ctrl._container, style);
+  }, [style]);
+  return null;
 }
-function useSetCoords({ longitude, latitude, altitude }) {
-  const canvas = useThree((s) => s.gl.domElement);
-  useMemo(() => {
-    const store = _roots.get(canvas).store;
-    const coords = { longitude, latitude, altitude };
-    setCoords(store, coords);
-  }, [longitude, latitude, altitude]);
-}
-function useSetRootCoords(store, {
-  longitude,
-  latitude,
-  altitude
-}) {
-  useMemo(() => {
-    setCoords(store, { longitude, latitude, altitude });
-  }, [longitude, latitude, altitude]);
-}
-function setCoords(store, coords) {
-  store.setState({ coords });
-}
-export {
-  setCoords,
-  useCoords,
-  useSetCoords,
-  useSetRootCoords
-};
+memo(_ScaleControl);
 //# sourceMappingURL=main15.mjs.map

package/dist/es/main15.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main15.mjs","sources":["../../src/core/use-coords.tsx"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useMemo } from \"react\";\nimport { UseBoundStore } from 'zustand';\nimport { Coords } from \"../api/coords\";\n\nexport function useCoords() {\n  const coords = useThree(s=>(s as any).coords) as Coords; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return coords;\n}\n\nexport function useSetCoords({longitude, latitude, altitude}: Coords) {\n  \n  const canvas = useThree(s => s.gl.domElement);\n  useMemo(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    const coords : Coords = { longitude, latitude, altitude };\n    setCoords(store, coords);\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function useSetRootCoords(store:UseBoundStore<RootState>, {\n  longitude, latitude, altitude\n}: Coords) {\n  useMemo(()=>{\n    setCoords(store, {longitude, latitude, altitude});\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function setCoords(store:UseBoundStore<RootState>, coords: Coords) {\n  store.setState({coords} as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n}"],"names":[],"mappings":";;AAKO,SAAS,YAAY;AAC1B,QAAM,SAAS,SAAS,CAAI,MAAA,EAAU,MAAM;AACrC,SAAA;AACT;AAEO,SAAS,aAAa,EAAC,WAAW,UAAU,YAAmB;AAEpE,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAC5C,UAAQ,MAAI;AACV,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,UAAM,SAAkB,EAAE,WAAW,UAAU,SAAS;AACxD,cAAU,OAAO,MAAM;AAAA,EACtB,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEO,SAAS,iBAAiB,OAAgC;AAAA,EAC/D;AAAA,EAAW;AAAA,EAAU;AACvB,GAAW;AACT,UAAQ,MAAI;AACV,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAAA,EAC/C,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEgB,SAAA,UAAU,OAAgC,QAAgB;AAClE,QAAA,SAAS,EAAC,OAAA,CAAc;AAChC;"}
+{"version":3,"file":"main15.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/scale-control.js"],"sourcesContent":["import { useEffect, useRef, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { useControl } from \"./use-control.js\";\nfunction _ScaleControl(props) {\n    const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {\n        position: props.position\n    });\n    const propsRef = useRef(props);\n    const prevProps = propsRef.current;\n    propsRef.current = props;\n    const { style } = props;\n    if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {\n        ctrl.options.maxWidth = props.maxWidth;\n    }\n    if (props.unit !== undefined && props.unit !== prevProps.unit) {\n        ctrl.setUnit(props.unit);\n    }\n    useEffect(() => {\n        applyReactStyle(ctrl._container, style);\n    }, [style]);\n    return null;\n}\nexport const ScaleControl = memo(_ScaleControl);\n//# sourceMappingURL=scale-control.js.map"],"names":[],"mappings":";;;AAGA,SAAS,cAAc,OAAO;AAC1B,QAAM,OAAO,WAAW,CAAC,EAAE,OAAQ,MAAK,IAAI,OAAO,aAAa,KAAK,GAAG;AAAA,IACpE,UAAU,MAAM;AAAA,EACxB,CAAK;AACD,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,YAAY,SAAS;AAC3B,WAAS,UAAU;AACnB,QAAM,EAAE,MAAO,IAAG;AAClB,MAAI,MAAM,aAAa,UAAa,MAAM,aAAa,UAAU,UAAU;AACvE,SAAK,QAAQ,WAAW,MAAM;AAAA,EACjC;AACD,MAAI,MAAM,SAAS,UAAa,MAAM,SAAS,UAAU,MAAM;AAC3D,SAAK,QAAQ,MAAM,IAAI;AAAA,EAC1B;AACD,YAAU,MAAM;AACZ,oBAAgB,KAAK,YAAY,KAAK;AAAA,EAC9C,GAAO,CAAC,KAAK,CAAC;AACV,SAAO;AACX;AAC4B,KAAK,aAAa;","x_google_ignoreList":[0]}

package/dist/es/main16.mjs

@@ -1,26 +1,91 @@
-import { syncCamera } from "./main11.mjs";
-import { useFunction } from "./main10.mjs";
-function useRender({
-  map,
-  origin,
-  useThree,
-  frameloop,
-  r3m
-}) {
-  const render = useFunction((_gl, projViewMx) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx);
-    const state = useThree.getState();
-    const camera = state.camera;
-    const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (!frameloop || frameloop === "always")
-      map.triggerRepaint();
-  });
-  return render;
+import { useContext, useRef, useState, useMemo, useEffect } from "react";
+import { MapContext } from "./main8.mjs";
+import assert from "./main40.mjs";
+import { deepEqual } from "./main38.mjs";
+function updateLayer(map, id, props, prevProps) {
+  assert(props.id === prevProps.id, "layer id changed");
+  assert(props.type === prevProps.type, "layer type changed");
+  if (props.type === "custom" || prevProps.type === "custom") {
+    return;
+  }
+  const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;
+  if (beforeId !== prevProps.beforeId) {
+    map.moveLayer(id, beforeId);
+  }
+  if (layout !== prevProps.layout) {
+    const prevLayout = prevProps.layout || {};
+    for (const key in layout) {
+      if (!deepEqual(layout[key], prevLayout[key])) {
+        map.setLayoutProperty(id, key, layout[key]);
+      }
+    }
+    for (const key in prevLayout) {
+      if (!layout.hasOwnProperty(key)) {
+        map.setLayoutProperty(id, key, void 0);
+      }
+    }
+  }
+  if (paint !== prevProps.paint) {
+    const prevPaint = prevProps.paint || {};
+    for (const key in paint) {
+      if (!deepEqual(paint[key], prevPaint[key])) {
+        map.setPaintProperty(id, key, paint[key]);
+      }
+    }
+    for (const key in prevPaint) {
+      if (!paint.hasOwnProperty(key)) {
+        map.setPaintProperty(id, key, void 0);
+      }
+    }
+  }
+  if (!deepEqual(filter, prevProps.filter)) {
+    map.setFilter(id, filter);
+  }
+  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
+    map.setLayerZoomRange(id, minzoom, maxzoom);
+  }
+}
+function createLayer(map, id, props) {
+  if (map.style && map.style._loaded && (!("source" in props) || map.getSource(props.source))) {
+    const options = { ...props, id };
+    delete options.beforeId;
+    map.addLayer(options, props.beforeId);
+  }
+}
+let layerCounter = 0;
+function Layer(props) {
+  const map = useContext(MapContext).map.getMap();
+  const propsRef = useRef(props);
+  const [, setStyleLoaded] = useState(0);
+  const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
+  useEffect(() => {
+    if (map) {
+      const forceUpdate = () => setStyleLoaded((version) => version + 1);
+      map.on("styledata", forceUpdate);
+      forceUpdate();
+      return () => {
+        map.off("styledata", forceUpdate);
+        if (map.style && map.style._loaded && map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+      };
+    }
+    return void 0;
+  }, [map]);
+  const layer = map && map.style && map.getLayer(id);
+  if (layer) {
+    try {
+      updateLayer(map, id, props, propsRef.current);
+    } catch (error) {
+      console.warn(error);
+    }
+  } else {
+    createLayer(map, id, props);
+  }
+  propsRef.current = props;
+  return null;
 }
 export {
-  useRender
+  Layer
 };
 //# sourceMappingURL=main16.mjs.map

package/dist/es/main16.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main16.mjs","sources":["../../src/core/canvas-in-layer/use-render.ts"],"sourcesContent":["import { RootState } from \"@react-three/fiber\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { UseBoundStore } from \"zustand\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useFunction } from \"../use-function\";\nimport { R3M } from \"../use-r3m\";\n\nexport function useRender({\n  map, origin, useThree, frameloop, r3m,\n} :{\n  map: MapInstance,\n  origin: Matrix4Tuple,\n  useThree: UseBoundStore<RootState>,\n  frameloop?: 'always' | 'demand',\n  r3m: R3M\n}) {\n  const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[]) => {\n    r3m.viewProjMx.splice(0, 16, ...projViewMx)\n    const state = useThree.getState();\n    const camera = state.camera as PerspectiveCamera;\n    const {gl, advance} = state;\n    syncCamera(camera as PerspectiveCamera, origin, projViewMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (!frameloop || frameloop === 'always') map.triggerRepaint();\n  })\n  return render;\n}"],"names":[],"mappings":";;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAW;AACpC,GAMG;AACD,QAAM,SAAS,YAAY,CAAC,KAA6B,eAAyB;AAChF,QAAI,WAAW,OAAO,GAAG,IAAI,GAAG,UAAU;AACpC,UAAA,QAAQ,SAAS;AACvB,UAAM,SAAS,MAAM;AACf,UAAA,EAAC,IAAI,QAAW,IAAA;AACX,eAAA,QAA6B,QAAQ,UAA0B;AAC1E,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAC5B,QAAA,CAAC,aAAa,cAAc;AAAU,UAAI,eAAe;AAAA,EAAA,CAC9D;AACM,SAAA;AACT;"}
+{"version":3,"file":"main16.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/layer.js"],"sourcesContent":["import { useContext, useEffect, useMemo, useState, useRef } from 'react';\nimport { MapContext } from \"./map.js\";\nimport assert from \"../utils/assert.js\";\nimport { deepEqual } from \"../utils/deep-equal.js\";\n/* eslint-disable complexity, max-statements */\nfunction updateLayer(map, id, props, prevProps) {\n    assert(props.id === prevProps.id, 'layer id changed');\n    assert(props.type === prevProps.type, 'layer type changed');\n    if (props.type === 'custom' || prevProps.type === 'custom') {\n        return;\n    }\n    // @ts-ignore filter does not exist in some Layer types\n    const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;\n    if (beforeId !== prevProps.beforeId) {\n        map.moveLayer(id, beforeId);\n    }\n    if (layout !== prevProps.layout) {\n        const prevLayout = prevProps.layout || {};\n        for (const key in layout) {\n            if (!deepEqual(layout[key], prevLayout[key])) {\n                map.setLayoutProperty(id, key, layout[key]);\n            }\n        }\n        for (const key in prevLayout) {\n            if (!layout.hasOwnProperty(key)) {\n                map.setLayoutProperty(id, key, undefined);\n            }\n        }\n    }\n    if (paint !== prevProps.paint) {\n        const prevPaint = prevProps.paint || {};\n        for (const key in paint) {\n            if (!deepEqual(paint[key], prevPaint[key])) {\n                map.setPaintProperty(id, key, paint[key]);\n            }\n        }\n        for (const key in prevPaint) {\n            if (!paint.hasOwnProperty(key)) {\n                map.setPaintProperty(id, key, undefined);\n            }\n        }\n    }\n    // @ts-ignore filter does not exist in some Layer types\n    if (!deepEqual(filter, prevProps.filter)) {\n        map.setFilter(id, filter);\n    }\n    if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {\n        map.setLayerZoomRange(id, minzoom, maxzoom);\n    }\n}\nfunction createLayer(map, id, props) {\n    // @ts-ignore\n    if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {\n        const options = { ...props, id };\n        delete options.beforeId;\n        // @ts-ignore\n        map.addLayer(options, props.beforeId);\n    }\n}\n/* eslint-enable complexity, max-statements */\nlet layerCounter = 0;\nexport function Layer(props) {\n    const map = useContext(MapContext).map.getMap();\n    const propsRef = useRef(props);\n    const [, setStyleLoaded] = useState(0);\n    const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n    useEffect(() => {\n        if (map) {\n            const forceUpdate = () => setStyleLoaded(version => version + 1);\n            map.on('styledata', forceUpdate);\n            forceUpdate();\n            return () => {\n                map.off('styledata', forceUpdate);\n                // @ts-ignore\n                if (map.style && map.style._loaded && map.getLayer(id)) {\n                    map.removeLayer(id);\n                }\n            };\n        }\n        return undefined;\n    }, [map]);\n    // @ts-ignore\n    const layer = map && map.style && map.getLayer(id);\n    if (layer) {\n        try {\n            updateLayer(map, id, props, propsRef.current);\n        }\n        catch (error) {\n            console.warn(error); // eslint-disable-line\n        }\n    }\n    else {\n        createLayer(map, id, props);\n    }\n    // Store last rendered props\n    propsRef.current = props;\n    return null;\n}\n//# sourceMappingURL=layer.js.map"],"names":[],"mappings":"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","x_google_ignoreList":[0]}