@mapcomponents/deck-gl 1.8.9 → 1.8.11

package/dist/catalogue/mc_meta.json

@@ -1 +1,44 @@
-{}
+{
+	"MlScenegraphLayer": {
+		"name": "MlScenegraphLayer",
+		"title": "Scenegraph Layer using DeckGL",
+		"description": "Adds a deck.gl ScenegraphLayer to the map that places instanced copies of a glTF 3D model at geographic data point locations. Position, orientation and scale can be configured per instance, and animated glTF models are fully supported. Demo model: https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/BoxAnimated",
+		"i18n": {
+			"de": {
+				"title": "Scenegraph Layer basierend auf DeckGL",
+				"description": "Fügt der Karte einen deck.gl ScenegraphLayer hinzu, der instanzierte Kopien eines glTF-3D-Modells an geografischen Datenpunkten platziert. Position, Ausrichtung und Skalierung lassen sich pro Instanz konfigurieren; animierte glTF-Modelle werden vollständig unterstützt. Demo-Modell: https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/BoxAnimated"
+			}
+		},
+		"tags": ["Map layer", "deckGL"],
+		"category": "Map layer",
+		"type": "component",
+		"demos": [
+			{
+				"name": "Demo",
+				"url": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/iframe.html?args=&globals=&id=mapcomponents-mlscenegraphlayer--deckgl-example&viewMode=story"
+			}
+		],
+		"thumbnail": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/thumbnails/MlScenegraphLayer.png"
+	},
+	"MlHexagonLayer": {
+		"name": "MlHexagonLayer",
+		"title": "Hexagon Layer using DeckGL",
+		"description": "Adds a deck.gl HexagonLayer to the map that spatially aggregates point-based datasets (including real-time data) and renders them as an interactive 3D hexagonal heatmap.",
+		"i18n": {
+			"de": {
+				"title": "Hexagon Layer basierend auf DeckGL",
+				"description": "Fügt der Karte einen deck.gl HexagonLayer hinzu, der punktbasierte Datensätze (einschließlich Echtzeit-Daten) räumlich aggregiert und als interaktive 3D-Hexagon-Heatmap darstellt."
+			}
+		},
+		"tags": ["Map layer", "deckGL"],
+		"category": "Map layer",
+		"type": "component",
+		"demos": [
+			{
+				"name": "Demo",
+				"url": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/iframe.html?args=&globals=&id=mapcomponents-mlhexagonlayer--custom-color-and-height-profile&viewMode=story"
+			}
+		],
+		"thumbnail": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/thumbnails/MlLaermkarte.png"
+	}
+}

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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`@mapcomponents/react-maplibre`),u=require(`@deck.gl/mapbox`),d=require(`react/jsx-runtime`),f=require(`@deck.gl/aggregation-layers`),p=require(`@deck.gl/geo-layers`),m=require(`@deck.gl/mesh-layers`);var h=`deckgl-layer`,g=c.default.createContext({}),_=({mapId:e,children:t})=>{let n=(0,l.useMap)({mapId:e}),r=(0,c.useRef)(void 0),[i,a]=(0,c.useState)([]),[o,s]=(0,c.useState)([]);(0,c.useEffect)(()=>{if(n.map)return r.current=new u.MapboxOverlay({id:h,interleaved:!0}),n.map.addControl(r.current),()=>{r.current&&n.map?.removeControl(r.current),r.current=void 0}},[n.map]),(0,c.useEffect)(()=>{r.current&&r.current.setProps({layers:[...i],effects:[...o]})},[i,o]);let f={deckGlLayerArray:i,setDeckGlLayerArray:a,deckGlEffectArray:o,setDeckGlEffectArray:s};return(0,d.jsx)(g.Provider,{value:f,children:t})};function v(){let e=(0,c.useContext)(g);function t(t){e.setDeckGlEffectArray(e=>[...e,t])}function n(t){e.setDeckGlEffectArray(e=>e.filter(e=>e!==t))}function r(t){e.setDeckGlLayerArray(e=>[...e,t])}function i(t){e.setDeckGlLayerArray(e=>e.filter(e=>e!==t))}return{addEffect:t,removeEffect:n,addLayer:r,removeLayer:i}}var y={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]]},b=e=>{let t=v(),n=(0,l.useMap)({mapId:e.mapId,waitForLayer:e.beforeId}),r=(0,c.useMemo)(()=>{let{mapId:t,...n}=e;return n.data?new f.HexagonLayer({...y,...n}):null},[e.beforeId,e.data,e.elevationScale,e.extruded,e.coverage,e.autoHighlight,e.material,e.radius,e.transitions]);return(0,c.useEffect)(()=>{if(!(!n.map||!r))return t.addLayer(r),()=>{t.removeLayer(r)}},[n.map,r]),(0,d.jsx)(d.Fragment,{})},x=e=>{let{mapId:t,...n}=e,r=(0,l.useMap)({mapId:t}),i=v(),a=(0,c.useMemo)(()=>n.data?new p.Tile3DLayer({...n}):null,[n.data,n.id,n.pickable,n.onTileLoad,n.onTileUnload,n.loadOptions,n.loaders,n.visible,n.opacity,n.pointSize,n.beforeId]);return(0,c.useEffect)(()=>{if(!(!r.map||!a))return i.addLayer(a),()=>{a&&i.removeLayer(a)}},[r.map,a]),(0,d.jsx)(d.Fragment,{})},S=e=>{let t=(0,l.useMap)({mapId:e.mapId,waitForLayer:e.beforeId}),n=v(),r=(0,c.useMemo)(()=>{let{mapId:t,...n}=e;return new m.ScenegraphLayer({...n})},[e]);return(0,c.useEffect)(()=>{if(!(!t.map||!r))return n.addLayer(r),()=>{r&&n.removeLayer(r)}},[t.map,r]),(0,d.jsx)(d.Fragment,{})};exports.DeckGlContext=g,exports.DeckGlContextProvider=_,exports.Ml3DTileLayer=x,exports.MlHexagonLayer=b,exports.MlSceneGraphLayer=S,exports.useDeckGl=v;

package/dist/index.mjs

@@ -1,147 +1,174 @@
-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 { 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([]);
-  i(() => {
-    if (r.map)
-      return e.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]), i(() => {
-    e.current && e.current.setProps({
-      layers: [...o],
-      effects: [...c]
-    });
-  }, [o, c]);
-  const k = {
-    deckGlLayerArray: o,
-    setDeckGlLayerArray: t,
-    deckGlEffectArray: c,
-    setDeckGlEffectArray: l
-  };
-  return /* @__PURE__ */ s(L.Provider, { value: k, children: n });
+import e, { useContext as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { useMap as o } from "@mapcomponents/react-maplibre";
+import { MapboxOverlay as s } from "@deck.gl/mapbox";
+import { Fragment as c, jsx as l } from "react/jsx-runtime";
+import { HexagonLayer as u } from "@deck.gl/aggregation-layers";
+import { Tile3DLayer as d } from "@deck.gl/geo-layers";
+import { ScenegraphLayer as f } from "@deck.gl/mesh-layers";
+//#region src/contexts/DeckGlContext.tsx
+var p = "deckgl-layer", m = e.createContext({}), h = ({ mapId: e, children: t }) => {
+	let r = o({ mapId: e }), c = i(void 0), [u, d] = a([]), [f, h] = a([]);
+	n(() => {
+		if (r.map) return c.current = new s({
+			id: p,
+			interleaved: !0
+		}), r.map.addControl(c.current), () => {
+			c.current && r.map?.removeControl(c.current), c.current = void 0;
+		};
+	}, [r.map]), n(() => {
+		c.current && c.current.setProps({
+			layers: [...u],
+			effects: [...f]
+		});
+	}, [u, f]);
+	let g = {
+		deckGlLayerArray: u,
+		setDeckGlLayerArray: d,
+		deckGlEffectArray: f,
+		setDeckGlEffectArray: h
+	};
+	return /* @__PURE__ */ l(m.Provider, {
+		value: g,
+		children: t
+	});
 };
-function m() {
-  const a = G(L);
-  function n(t) {
-    a.setDeckGlEffectArray((c) => [...c, t]);
-  }
-  function r(t) {
-    a.setDeckGlEffectArray((c) => c.filter((l) => l !== t));
-  }
-  function e(t) {
-    a.setDeckGlLayerArray((c) => [...c, t]);
-  }
-  function o(t) {
-    a.setDeckGlLayerArray((c) => c.filter((l) => l !== t));
-  }
-  return {
-    addEffect: n,
-    removeEffect: r,
-    addLayer: e,
-    removeLayer: o
-  };
+//#endregion
+//#region src/hooks/useDeckGl.tsx
+function g() {
+	let e = t(m);
+	function n(t) {
+		e.setDeckGlEffectArray((e) => [...e, t]);
+	}
+	function r(t) {
+		e.setDeckGlEffectArray((e) => e.filter((e) => e !== t));
+	}
+	function i(t) {
+		e.setDeckGlLayerArray((e) => [...e, t]);
+	}
+	function a(t) {
+		e.setDeckGlLayerArray((e) => e.filter((e) => e !== t));
+	}
+	return {
+		addEffect: n,
+		removeEffect: r,
+		addLayer: i,
+		removeLayer: a
+	};
 }
-const I = {
-  type: p,
-  layerOpacity: 0.8,
-  elevationRange: [30, 75],
-  elevationScale: 1,
-  extruded: !0,
-  coverage: 0.9,
-  autoHighlight: !1,
-  material: { ambient: 0.6, diffuse: 0.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]
-  ]
-}, R = (a) => {
-  const n = m();
-  a = {
-    ...I,
-    ...a
-  };
-  const { mapId: r, ...e } = a, o = d({
-    mapId: r,
-    waitForLayer: e.beforeId
-  }), t = f(() => e.data ? new p({
-    ...e
-  }) : null, [
-    e.beforeId,
-    e.data,
-    e.elevationScale,
-    e.extruded,
-    e.coverage,
-    e.autoHighlight,
-    e.material,
-    e.radius,
-    e.transitions
-  ]);
-  return i(() => {
-    if (!(!o.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
-  }) : null, [
-    r.data,
-    r.id,
-    r.pickable,
-    r.onTileLoad,
-    r.onTileUnload,
-    r.loadOptions,
-    r.loaders,
-    r.visible,
-    r.opacity,
-    r.pointSize,
-    r.beforeId
-  ]);
-  return i(() => {
-    if (!(!e.map || !t))
-      return o.addLayer(t), () => {
-        t && o.removeLayer(t);
-      };
-  }, [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
-    });
-  }, [a]);
-  return i(() => {
-    if (!(!n.map || !e))
-      return r.addLayer(e), () => {
-        e && r.removeLayer(e);
-      };
-  }, [n.map, e]), /* @__PURE__ */ s(u, {});
-};
-export {
-  L as DeckGlContext,
-  w as DeckGlContextProvider,
-  T as Ml3DTileLayer,
-  R as MlHexagonLayer,
-  F as MlSceneGraphLayer,
-  m as useDeckGl
+//#endregion
+//#region src/components/MlHexagonLayer/MlHexagonLayer.tsx
+var _ = {
+	type: u,
+	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
+		]
+	]
+}, v = (e) => {
+	let t = g(), i = o({
+		mapId: e.mapId,
+		waitForLayer: e.beforeId
+	}), a = r(() => {
+		let { mapId: t, ...n } = e;
+		return n.data ? new u({
+			..._,
+			...n
+		}) : null;
+	}, [
+		e.beforeId,
+		e.data,
+		e.elevationScale,
+		e.extruded,
+		e.coverage,
+		e.autoHighlight,
+		e.material,
+		e.radius,
+		e.transitions
+	]);
+	return n(() => {
+		if (!(!i.map || !a)) return t.addLayer(a), () => {
+			t.removeLayer(a);
+		};
+	}, [i.map, a]), /* @__PURE__ */ l(c, {});
+}, y = (e) => {
+	let { mapId: t, ...i } = e, a = o({ mapId: t }), s = g(), u = r(() => i.data ? new d({ ...i }) : null, [
+		i.data,
+		i.id,
+		i.pickable,
+		i.onTileLoad,
+		i.onTileUnload,
+		i.loadOptions,
+		i.loaders,
+		i.visible,
+		i.opacity,
+		i.pointSize,
+		i.beforeId
+	]);
+	return n(() => {
+		if (!(!a.map || !u)) return s.addLayer(u), () => {
+			u && s.removeLayer(u);
+		};
+	}, [a.map, u]), /* @__PURE__ */ l(c, {});
+}, b = (e) => {
+	let t = o({
+		mapId: e.mapId,
+		waitForLayer: e.beforeId
+	}), i = g(), a = r(() => {
+		let { mapId: t, ...n } = e;
+		return new f({ ...n });
+	}, [e]);
+	return n(() => {
+		if (!(!t.map || !a)) return i.addLayer(a), () => {
+			a && i.removeLayer(a);
+		};
+	}, [t.map, a]), /* @__PURE__ */ l(c, {});
 };
+//#endregion
+export { m as DeckGlContext, h as DeckGlContextProvider, y as Ml3DTileLayer, v as MlHexagonLayer, b as MlSceneGraphLayer, g as useDeckGl };

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@mapcomponents/deck-gl",
-  "version": "1.8.9",
-  "description": "",
+  "version": "1.8.11",
+  "description": "MapComponents components that integrate deck.gl layers into MapLibre maps.",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.2",
-    "@mui/system": "^7.3.2",
-    "@mui/material": "^7.3.2",
-    "@storybook/react": "^9.1.4",
-    "uuid": "^11.1.0"
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "peerDependencies": {
-    "@deck.gl/aggregation-layers": "^9.2.6",
-    "@deck.gl/core": "^9.2.6",
-    "@deck.gl/geo-layers": "^9.2.6",
-    "@deck.gl/mapbox": "^9.2.6",
-    "@deck.gl/mesh-layers": "^9.2.6",
-    "maplibre-gl": "^5.16.0",
-    "@mapcomponents/react-maplibre": "1.8.9"
+    "@deck.gl/aggregation-layers": "^9.3.2",
+    "@deck.gl/core": "^9.3.2",
+    "@deck.gl/geo-layers": "^9.3.2",
+    "@deck.gl/mapbox": "^9.3.2",
+    "@deck.gl/mesh-layers": "^9.3.2",
+    "maplibre-gl": "^5.24.0",
+    "@mapcomponents/react-maplibre": "1.8.11"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build-catalogue-meta": "node ../../scripts/build-catalogue-meta.js"
   }
 }

package/src/components/MlHexagonLayer/MlHexagonLayer.meta.json

@@ -0,0 +1,21 @@
+{
+	"name": "MlHexagonLayer",
+	"title": "Hexagon Layer using DeckGL",
+	"description": "Adds a deck.gl HexagonLayer to the map that spatially aggregates point-based datasets — including real-time data — and renders them as an interactive 3D hexagonal heatmap.",
+	"i18n": {
+		"de": {
+			"title": "Hexagon Layer basierend auf DeckGL",
+			"description": "Fügt der Karte einen deck.gl HexagonLayer hinzu, der punktbasierte Datensätze – einschließlich Echtzeit-Daten – räumlich aggregiert und als interaktive 3D-Hexagon-Heatmap darstellt."
+		}
+	},
+	"tags": ["Map layer", "deckGL"],
+	"category": "Map layer",
+	"type": "component",
+	"demos": [
+		{
+			"name": "Demo",
+			"url": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/iframe.html?args=&globals=&id=mapcomponents-mlhexagonlayer--custom-color-and-height-profile&viewMode=story"
+		}
+	],
+	"thumbnail": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/thumbnails/MlHexagonLayer.png"
+}

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

package/src/components/MlSceneGraphLayer/MlScenegraphLayer.meta.json

@@ -0,0 +1,21 @@
+{
+	"name": "MlScenegraphLayer",
+	"title": "Scenegraph Layer using DeckGL",
+	"description": "Adds a deck.gl ScenegraphLayer to the map that places instanced copies of a glTF 3D model at geographic data point locations. Position, orientation and scale can be configured per instance, and animated glTF models are fully supported. Demo model: https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/BoxAnimated",
+	"i18n": {
+		"de": {
+			"title": "Scenegraph Layer basierend auf DeckGL",
+			"description": "Fügt der Karte einen deck.gl ScenegraphLayer hinzu, der instanzierte Kopien eines glTF-3D-Modells an geografischen Datenpunkten platziert. Position, Ausrichtung und Skalierung lassen sich pro Instanz konfigurieren; animierte glTF-Modelle werden vollständig unterstützt. Demo-Modell: https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/BoxAnimated"
+		}
+	},
+	"tags": ["Map layer", "deckGL"],
+	"category": "Map layer",
+	"type": "component",
+	"demos": [
+		{
+			"name": "Demo",
+			"url": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/iframe.html?args=&globals=&id=mapcomponents-mlscenegraphlayer--deckgl-example&viewMode=story"
+		}
+	],
+	"thumbnail": "https://mapcomponents.github.io/react-map-components-maplibre/deck-gl/thumbnails/MlScenegraphLayer.png"
+}

package/src/decorators/style.css

@@ -1,19 +1,24 @@
+html,
+body,
+#storybook-root,
+#root {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+}
+
 #root {
 	background-color: #000;
 	position: absolute;
-	min-height: 400px;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
 }
-.docs-story {
-	min-height: 400px;
-	display: flex;
-	align-items: stretch;
-}
-.docs-story > div:first-child {
-	width: 100%;
+
+#storybook-root > div,
+#root > div {
+	height: 100%;
 }
 
 .App {
@@ -23,6 +28,15 @@
 	bottom: 0;
 	left: 0;
 }
+
+.fullscreen_map {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
 .fullscreen_map .mapContainer {
 	position: absolute;
 	top: 0;

package/tsconfig.lib.json

@@ -31,5 +31,10 @@
 		"**/*.cy.js",
 		"**/*.cy.tsx",
 		"**/*.cy.jsx"
+	],
+	"references": [
+		{
+			"path": "../react-maplibre/tsconfig.lib.json"
+		}
 	]
 }

package/tsconfig.storybook.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"composite": false,
+		"noEmit": true
+	},
+	"include": [".storybook/**/*"]
+}

package/vite.config.ts

@@ -1,71 +1,73 @@
 /// <reference types='vitest' />
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 
-export default defineConfig(() => ({
-	root: __dirname,
-	cacheDir: '../../node_modules/.vite/packages/deck-gl',
-	resolve: {
-		dedupe: [
-			'react',
-			'react-dom',
-			'@mui/material',
-			'@mui/system',
-			'@emotion/react',
-			'@emotion/styled',
-		],
-	},
-	plugins: [
-		react(),
-		nxViteTsPaths(),
-		nxCopyAssetsPlugin(['*.md']),
-		dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') }),
-	],
-	// Uncomment this if you are using workers.
-	// worker: {
-	//  plugins: [ nxViteTsPaths() ],
-	// },
-	// Configuration for building your library.
-	// See: https://vitejs.dev/guide/build.html#library-mode
-	build: {
-		outDir: 'dist',
-		emptyOutDir: true,
-		reportCompressedSize: true,
-		commonjsOptions: {
-			transformMixedEsModules: true,
-		},
-		lib: {
-			// Could also be a dictionary or array of multiple entry points.
-			entry: 'src/index.ts',
-			name: '@mapcomponents/deck-gl',
-			fileName: 'index',
-			// Change this to the formats you want to support.
-			// Don't forget to update your package.json as well.
-			formats: ['es' as const, 'cjs' as const],
-		},
-		rollupOptions: {
-			// External packages that should not be bundled into your library.
-			external: [
+export default defineConfig(async () => {
+	const react = (await import('@vitejs/plugin-react')).default;
+	return {
+		root: __dirname,
+		cacheDir: '../../node_modules/.vite/packages/deck-gl',
+		resolve: {
+			dedupe: [
 				'react',
 				'react-dom',
-				'react/jsx-runtime',
-				'@mapcomponents/react-maplibre',
-				'maplibre-gl',
-				'@deck.gl/aggregation-layers',
-				'@deck.gl/core',
-				'@deck.gl/geo-layers',
-				'@deck.gl/mapbox',
-				'@deck.gl/mesh-layers',
 				'@mui/material',
 				'@mui/system',
-				'@mui/icons-material',
 				'@emotion/react',
 				'@emotion/styled',
 			],
 		},
-	},
-}));
+		plugins: [
+			react(),
+			nxViteTsPaths(),
+			nxCopyAssetsPlugin(['*.md']),
+			dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') }),
+		],
+		// Uncomment this if you are using workers.
+		// worker: {
+		//  plugins: [ nxViteTsPaths() ],
+		// },
+		// Configuration for building your library.
+		// See: https://vitejs.dev/guide/build.html#library-mode
+		build: {
+			outDir: 'dist',
+			emptyOutDir: true,
+			reportCompressedSize: true,
+			commonjsOptions: {
+				transformMixedEsModules: true,
+			},
+			lib: {
+				// Could also be a dictionary or array of multiple entry points.
+				entry: 'src/index.ts',
+				name: '@mapcomponents/deck-gl',
+				fileName: 'index',
+				// Change this to the formats you want to support.
+				// Don't forget to update your package.json as well.
+				formats: ['es' as const, 'cjs' as const],
+			},
+			rollupOptions: {
+				// External packages that should not be bundled into your library.
+				external: [
+					'react',
+					'react-dom',
+					'react/jsx-runtime',
+					'@mapcomponents/react-maplibre',
+					'maplibre-gl',
+					'@deck.gl/aggregation-layers',
+					'@deck.gl/core',
+					'@deck.gl/geo-layers',
+					'@deck.gl/mapbox',
+					'@deck.gl/mesh-layers',
+					'@mui/material',
+					'@mui/system',
+					'@mui/icons-material',
+					'@emotion/react',
+					'@emotion/styled',
+				],
+			},
+		},
+	};
+});

package/dist/package.json

@@ -1,32 +0,0 @@
-{
-	"name": "@mapcomponents/deck-gl",
-	"version": "1.8.9",
-	"description": "",
-	"main": "src/index.ts",
-	"module": "dist/index.mjs",
-	"license": "MIT",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^7.3.2",
-		"@mui/system": "^7.3.2",
-		"@mui/material": "^7.3.2",
-		"@storybook/react": "^9.1.4",
-		"uuid": "^11.1.0"
-	},
-	"peerDependencies": {
-		"@deck.gl/aggregation-layers": "^9.2.6",
-		"@deck.gl/core": "^9.2.6",
-		"@deck.gl/geo-layers": "^9.2.6",
-		"@deck.gl/mapbox": "^9.2.6",
-		"@deck.gl/mesh-layers": "^9.2.6",
-		"@mapcomponents/react-maplibre": "workspace:*",
-		"maplibre-gl": "^5.16.0"
-	},
-	"devDependencies": {
-		"@types/geojson": "^7946.0.16"
-	}
-}

package/src/components/MlHexagonLayer/MlHexagonLayer.meta_.json

@@ -1,14 +0,0 @@
-{
-	"name": "MlHexagonMap",
-	"title": "Hexagon Map using DeckGl Layer",
-	"description": "A component demonstrating the use of the useDeckGL Hook to add a DeckGl Hexagon Layer to the MapLibre Map instance",
-	"i18n": {
-		"de": {
-			"title": "Hexagon Map basierend auf DeckGl Layer",
-			"description": "Eine Komponenten, die das Hinzufügen von DeckGL Hexagon Layern zur MapLibre Instanz mittels des useDeckGl Hooks demonstriert"
-		}
-	},
-	"tags": ["Map layer", "deckGL"],
-	"category": "Map layer",
-	"type": "component"
-}