@mapcomponents/deck-gl 1.8.9 → 1.8.10

package/dist/components/MlHexagonLayer/MlHexagonLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MlHexagonLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlHexagonLayer/MlHexagonLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAwBD,QAAA,MAAM,cAAc,GAAI,OAAO,iBAAiB,4CAgD/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MlHexagonLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlHexagonLayer/MlHexagonLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAwBD,QAAA,MAAM,cAAc,GAAI,OAAO,iBAAiB,4CAyC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),i=require("@mapcomponents/react-maplibre"),p=require("@deck.gl/mapbox"),f=require("@deck.gl/aggregation-layers"),L=require("@deck.gl/geo-layers"),g=require("@deck.gl/mesh-layers"),k="deckgl-layer",y=n.createContext({}),v=({mapId:a,children:c})=>{const r=i.useMap({mapId:a}),e=n.useRef(void 0),[o,t]=n.useState([]),[s,u]=n.useState([]);n.useEffect(()=>{if(r.map)return e.current=new p.MapboxOverlay({id:k,interleaved:!0}),r.map.addControl(e.current),()=>{e.current&&r.map?.removeControl(e.current),e.current=void 0}},[r.map]),n.useEffect(()=>{e.current&&e.current.setProps({layers:[...o],effects:[...s]})},[o,s]);const m={deckGlLayerArray:o,setDeckGlLayerArray:t,deckGlEffectArray:s,setDeckGlEffectArray:u};return l.jsx(y.Provider,{value:m,children:c})};function d(){const a=n.useContext(y);function c(t){a.setDeckGlEffectArray(s=>[...s,t])}function r(t){a.setDeckGlEffectArray(s=>s.filter(u=>u!==t))}function e(t){a.setDeckGlLayerArray(s=>[...s,t])}function o(t){a.setDeckGlLayerArray(s=>s.filter(u=>u!==t))}return{addEffect:c,removeEffect:r,addLayer:e,removeLayer:o}}const x={type:f.HexagonLayer,layerOpacity:.8,elevationRange:[30,75],elevationScale:1,extruded:!0,coverage:.9,autoHighlight:!1,material:{ambient:.6,diffuse:.5,shininess:10},radius:16,transitions:{elevationScale:1500},_filterData:null,colorRange:[[1,152,189,125],[73,227,206,150],[216,254,181,175],[254,237,177,200],[254,173,84,225],[209,55,78,255]]},G=a=>{const c=d();a={...x,...a};const{mapId:r,...e}=a,o=i.useMap({mapId:r,waitForLayer:e.beforeId}),t=n.useMemo(()=>e.data?new f.HexagonLayer({...e}):null,[e.beforeId,e.data,e.elevationScale,e.extruded,e.coverage,e.autoHighlight,e.material,e.radius,e.transitions]);return n.useEffect(()=>{if(!(!o.map||!t))return c.addLayer(t),()=>{c.removeLayer(t)}},[o.map,t]),l.jsx(l.Fragment,{})},D=a=>{const{mapId:c,...r}=a,e=i.useMap({mapId:c}),o=d(),t=n.useMemo(()=>r.data?new L.Tile3DLayer({...r}):null,[r.data,r.id,r.pickable,r.onTileLoad,r.onTileUnload,r.loadOptions,r.loaders,r.visible,r.opacity,r.pointSize,r.beforeId]);return n.useEffect(()=>{if(!(!e.map||!t))return o.addLayer(t),()=>{t&&o.removeLayer(t)}},[e.map,t]),l.jsx(l.Fragment,{})},M=a=>{const c=i.useMap({mapId:a.mapId,waitForLayer:a.beforeId}),r=d(),e=n.useMemo(()=>{const{mapId:o,...t}=a;return new g.ScenegraphLayer({...t})},[a]);return n.useEffect(()=>{if(!(!c.map||!e))return r.addLayer(e),()=>{e&&r.removeLayer(e)}},[c.map,e]),l.jsx(l.Fragment,{})};exports.DeckGlContext=y;exports.DeckGlContextProvider=v;exports.Ml3DTileLayer=D;exports.MlHexagonLayer=G;exports.MlSceneGraphLayer=M;exports.useDeckGl=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),i=require("@mapcomponents/react-maplibre"),L=require("@deck.gl/mapbox"),f=require("@deck.gl/aggregation-layers"),g=require("@deck.gl/geo-layers"),k=require("@deck.gl/mesh-layers"),v="deckgl-layer",y=n.createContext({}),x=({mapId:e,children:o})=>{const r=i.useMap({mapId:e}),t=n.useRef(void 0),[s,a]=n.useState([]),[c,u]=n.useState([]);n.useEffect(()=>{if(r.map)return t.current=new L.MapboxOverlay({id:v,interleaved:!0}),r.map.addControl(t.current),()=>{t.current&&r.map?.removeControl(t.current),t.current=void 0}},[r.map]),n.useEffect(()=>{t.current&&t.current.setProps({layers:[...s],effects:[...c]})},[s,c]);const m={deckGlLayerArray:s,setDeckGlLayerArray:a,deckGlEffectArray:c,setDeckGlEffectArray:u};return l.jsx(y.Provider,{value:m,children:o})};function d(){const e=n.useContext(y);function o(a){e.setDeckGlEffectArray(c=>[...c,a])}function r(a){e.setDeckGlEffectArray(c=>c.filter(u=>u!==a))}function t(a){e.setDeckGlLayerArray(c=>[...c,a])}function s(a){e.setDeckGlLayerArray(c=>c.filter(u=>u!==a))}return{addEffect:o,removeEffect:r,addLayer:t,removeLayer:s}}const p={type:f.HexagonLayer,layerOpacity:.8,elevationRange:[30,75],elevationScale:1,extruded:!0,coverage:.9,autoHighlight:!1,material:{ambient:.6,diffuse:.5,shininess:10},radius:16,transitions:{elevationScale:1500},_filterData:null,colorRange:[[1,152,189,125],[73,227,206,150],[216,254,181,175],[254,237,177,200],[254,173,84,225],[209,55,78,255]]},G=e=>{const o=d(),r=i.useMap({mapId:e.mapId,waitForLayer:e.beforeId}),t=n.useMemo(()=>{const{mapId:s,...a}=e;return a.data?new f.HexagonLayer({...p,...a}):null},[e.beforeId,e.data,e.elevationScale,e.extruded,e.coverage,e.autoHighlight,e.material,e.radius,e.transitions]);return n.useEffect(()=>{if(!(!r.map||!t))return o.addLayer(t),()=>{o.removeLayer(t)}},[r.map,t]),l.jsx(l.Fragment,{})},D=e=>{const{mapId:o,...r}=e,t=i.useMap({mapId:o}),s=d(),a=n.useMemo(()=>r.data?new g.Tile3DLayer({...r}):null,[r.data,r.id,r.pickable,r.onTileLoad,r.onTileUnload,r.loadOptions,r.loaders,r.visible,r.opacity,r.pointSize,r.beforeId]);return n.useEffect(()=>{if(!(!t.map||!a))return s.addLayer(a),()=>{a&&s.removeLayer(a)}},[t.map,a]),l.jsx(l.Fragment,{})},M=e=>{const o=i.useMap({mapId:e.mapId,waitForLayer:e.beforeId}),r=d(),t=n.useMemo(()=>{const{mapId:s,...a}=e;return new k.ScenegraphLayer({...a})},[e]);return n.useEffect(()=>{if(!(!o.map||!t))return r.addLayer(t),()=>{t&&r.removeLayer(t)}},[o.map,t]),l.jsx(l.Fragment,{})};exports.DeckGlContext=y;exports.DeckGlContextProvider=x;exports.Ml3DTileLayer=D;exports.MlHexagonLayer=G;exports.MlSceneGraphLayer=M;exports.useDeckGl=d;

package/dist/index.mjs

@@ -1,57 +1,57 @@
-import { jsx as s, Fragment as u } from "react/jsx-runtime";
-import v, { useRef as g, useState as y, useEffect as i, useContext as G, useMemo as f } from "react";
-import { useMap as d } from "@mapcomponents/react-maplibre";
+import { jsx as d, Fragment as s } from "react/jsx-runtime";
+import p, { useRef as g, useState as y, useEffect as i, useContext as G, useMemo as f } from "react";
+import { useMap as u } from "@mapcomponents/react-maplibre";
 import { MapboxOverlay as x } from "@deck.gl/mapbox";
-import { HexagonLayer as p } from "@deck.gl/aggregation-layers";
-import { Tile3DLayer as D } from "@deck.gl/geo-layers";
-import { ScenegraphLayer as H } from "@deck.gl/mesh-layers";
-const h = "deckgl-layer", L = v.createContext({}), w = ({ mapId: a, children: n }) => {
-  const r = d({ mapId: a }), e = g(void 0), [o, t] = y([]), [c, l] = y([]);
+import { HexagonLayer as L } from "@deck.gl/aggregation-layers";
+import { Tile3DLayer as I } from "@deck.gl/geo-layers";
+import { ScenegraphLayer as D } from "@deck.gl/mesh-layers";
+const H = "deckgl-layer", k = p.createContext({}), w = ({ mapId: e, children: n }) => {
+  const r = u({ mapId: e }), t = g(void 0), [c, a] = y([]), [o, l] = y([]);
   i(() => {
     if (r.map)
-      return e.current = new x({
-        id: h,
+      return t.current = new x({
+        id: H,
         interleaved: !0
-      }), r.map.addControl(e.current), () => {
-        e.current && r.map?.removeControl(e.current), e.current = void 0;
+      }), r.map.addControl(t.current), () => {
+        t.current && r.map?.removeControl(t.current), t.current = void 0;
       };
   }, [r.map]), i(() => {
-    e.current && e.current.setProps({
-      layers: [...o],
-      effects: [...c]
+    t.current && t.current.setProps({
+      layers: [...c],
+      effects: [...o]
     });
-  }, [o, c]);
-  const k = {
-    deckGlLayerArray: o,
-    setDeckGlLayerArray: t,
-    deckGlEffectArray: c,
+  }, [c, o]);
+  const v = {
+    deckGlLayerArray: c,
+    setDeckGlLayerArray: a,
+    deckGlEffectArray: o,
     setDeckGlEffectArray: l
   };
-  return /* @__PURE__ */ s(L.Provider, { value: k, children: n });
+  return /* @__PURE__ */ d(k.Provider, { value: v, children: n });
 };
 function m() {
-  const a = G(L);
-  function n(t) {
-    a.setDeckGlEffectArray((c) => [...c, t]);
+  const e = G(k);
+  function n(a) {
+    e.setDeckGlEffectArray((o) => [...o, a]);
   }
-  function r(t) {
-    a.setDeckGlEffectArray((c) => c.filter((l) => l !== t));
+  function r(a) {
+    e.setDeckGlEffectArray((o) => o.filter((l) => l !== a));
   }
-  function e(t) {
-    a.setDeckGlLayerArray((c) => [...c, t]);
+  function t(a) {
+    e.setDeckGlLayerArray((o) => [...o, a]);
   }
-  function o(t) {
-    a.setDeckGlLayerArray((c) => c.filter((l) => l !== t));
+  function c(a) {
+    e.setDeckGlLayerArray((o) => o.filter((l) => l !== a));
   }
   return {
     addEffect: n,
     removeEffect: r,
-    addLayer: e,
-    removeLayer: o
+    addLayer: t,
+    removeLayer: c
   };
 }
-const I = {
-  type: p,
+const h = {
+  type: L,
   layerOpacity: 0.8,
   elevationRange: [30, 75],
   elevationScale: 1,
@@ -70,18 +70,17 @@ const I = {
     [254, 173, 84, 225],
     [209, 55, 78, 255]
   ]
-}, R = (a) => {
-  const n = m();
-  a = {
-    ...I,
-    ...a
-  };
-  const { mapId: r, ...e } = a, o = d({
-    mapId: r,
+}, R = (e) => {
+  const n = m(), r = u({
+    mapId: e.mapId,
     waitForLayer: e.beforeId
-  }), t = f(() => e.data ? new p({
-    ...e
-  }) : null, [
+  }), t = f(() => {
+    const { mapId: c, ...a } = e;
+    return a.data ? new L({
+      ...h,
+      ...a
+    }) : null;
+  }, [
     e.beforeId,
     e.data,
     e.elevationScale,
@@ -93,13 +92,13 @@ const I = {
     e.transitions
   ]);
   return i(() => {
-    if (!(!o.map || !t))
+    if (!(!r.map || !t))
       return n.addLayer(t), () => {
         n.removeLayer(t);
       };
-  }, [o.map, t]), /* @__PURE__ */ s(u, {});
-}, T = (a) => {
-  const { mapId: n, ...r } = a, e = d({ mapId: n }), o = m(), t = f(() => r.data ? new D({
+  }, [r.map, t]), /* @__PURE__ */ d(s, {});
+}, T = (e) => {
+  const { mapId: n, ...r } = e, t = u({ mapId: n }), c = m(), a = f(() => r.data ? new I({
     ...r
   }) : null, [
     r.data,
@@ -115,30 +114,30 @@ const I = {
     r.beforeId
   ]);
   return i(() => {
-    if (!(!e.map || !t))
-      return o.addLayer(t), () => {
-        t && o.removeLayer(t);
+    if (!(!t.map || !a))
+      return c.addLayer(a), () => {
+        a && c.removeLayer(a);
       };
-  }, [e.map, t]), /* @__PURE__ */ s(u, {});
-}, F = (a) => {
-  const n = d({
-    mapId: a.mapId,
-    waitForLayer: a.beforeId
-  }), r = m(), e = f(() => {
-    const { mapId: o, ...t } = a;
-    return new H({
-      ...t
+  }, [t.map, a]), /* @__PURE__ */ d(s, {});
+}, F = (e) => {
+  const n = u({
+    mapId: e.mapId,
+    waitForLayer: e.beforeId
+  }), r = m(), t = f(() => {
+    const { mapId: c, ...a } = e;
+    return new D({
+      ...a
     });
-  }, [a]);
+  }, [e]);
   return i(() => {
-    if (!(!n.map || !e))
-      return r.addLayer(e), () => {
-        e && r.removeLayer(e);
+    if (!(!n.map || !t))
+      return r.addLayer(t), () => {
+        t && r.removeLayer(t);
       };
-  }, [n.map, e]), /* @__PURE__ */ s(u, {});
+  }, [n.map, t]), /* @__PURE__ */ d(s, {});
 };
 export {
-  L as DeckGlContext,
+  k as DeckGlContext,
   w as DeckGlContextProvider,
   T as Ml3DTileLayer,
   R as MlHexagonLayer,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/deck-gl",
-	"version": "1.8.9",
+	"version": "1.8.10",
 	"description": "",
 	"main": "src/index.ts",
 	"module": "dist/index.mjs",
@@ -14,7 +14,7 @@
 		"@mui/icons-material": "^7.3.2",
 		"@mui/system": "^7.3.2",
 		"@mui/material": "^7.3.2",
-		"@storybook/react": "^9.1.4",
+		"@storybook/react": "^9.1.20",
 		"uuid": "^11.1.0"
 	},
 	"peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/deck-gl",
-  "version": "1.8.9",
+  "version": "1.8.10",
   "description": "",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -11,7 +11,7 @@
     "@mui/icons-material": "^7.3.2",
     "@mui/system": "^7.3.2",
     "@mui/material": "^7.3.2",
-    "@storybook/react": "^9.1.4",
+    "@storybook/react": "^9.1.20",
     "uuid": "^11.1.0"
   },
   "peerDependencies": {
@@ -21,7 +21,7 @@
     "@deck.gl/mapbox": "^9.2.6",
     "@deck.gl/mesh-layers": "^9.2.6",
     "maplibre-gl": "^5.16.0",
-    "@mapcomponents/react-maplibre": "1.8.9"
+    "@mapcomponents/react-maplibre": "1.8.10"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16"

package/src/components/MlHexagonLayer/MlHexagonLayer.tsx

@@ -40,38 +40,31 @@ const defaultProps = {
 const MlHexagonLayer = (props: MlHexagonMapProps) => {
 	const deckGlHook = useDeckGl();
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-expect-error
-	props = {
-		...defaultProps,
-		...props,
-	};
-
-	const { mapId, ...HexagonLayerProps } = props;
-
 	const mapHook = useMap({
-		mapId: mapId,
-		waitForLayer: HexagonLayerProps.beforeId,
+		mapId: props.mapId,
+		waitForLayer: props.beforeId,
 	});
 
 	// create deck.gl HexagonLayer once when its props change
 	const hexagonLayer = useMemo(() => {
+		const { mapId: _mapId, ...HexagonLayerProps } = props;
 		if (!HexagonLayerProps.data) return null;
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		return new HexagonLayer({
+			...defaultProps,
 			...HexagonLayerProps,
 		} as unknown as HexagonLayerProps);
 	}, [
-		HexagonLayerProps.beforeId,
-		HexagonLayerProps.data,
-		HexagonLayerProps.elevationScale,
-		HexagonLayerProps.extruded,
-		HexagonLayerProps.coverage,
-		HexagonLayerProps.autoHighlight,
-		HexagonLayerProps.material,
-		HexagonLayerProps.radius,
-		HexagonLayerProps.transitions,
+		props.beforeId,
+		props.data,
+		props.elevationScale,
+		props.extruded,
+		props.coverage,
+		props.autoHighlight,
+		props.material,
+		props.radius,
+		props.transitions,
 	]);
 
 	// add/remove the memoized layer