@mapcomponents/deck-gl 1.8.10 → 1.8.19-3

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/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"),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;
+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,146 +1,174 @@
-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 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 t.current = new x({
-        id: H,
-        interleaved: !0
-      }), r.map.addControl(t.current), () => {
-        t.current && r.map?.removeControl(t.current), t.current = void 0;
-      };
-  }, [r.map]), i(() => {
-    t.current && t.current.setProps({
-      layers: [...c],
-      effects: [...o]
-    });
-  }, [c, o]);
-  const v = {
-    deckGlLayerArray: c,
-    setDeckGlLayerArray: a,
-    deckGlEffectArray: o,
-    setDeckGlEffectArray: l
-  };
-  return /* @__PURE__ */ d(k.Provider, { value: v, 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 e = G(k);
-  function n(a) {
-    e.setDeckGlEffectArray((o) => [...o, a]);
-  }
-  function r(a) {
-    e.setDeckGlEffectArray((o) => o.filter((l) => l !== a));
-  }
-  function t(a) {
-    e.setDeckGlLayerArray((o) => [...o, a]);
-  }
-  function c(a) {
-    e.setDeckGlLayerArray((o) => o.filter((l) => l !== a));
-  }
-  return {
-    addEffect: n,
-    removeEffect: r,
-    addLayer: t,
-    removeLayer: c
-  };
+//#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 h = {
-  type: L,
-  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 = (e) => {
-  const n = m(), r = u({
-    mapId: e.mapId,
-    waitForLayer: e.beforeId
-  }), t = f(() => {
-    const { mapId: c, ...a } = e;
-    return a.data ? new L({
-      ...h,
-      ...a
-    }) : null;
-  }, [
-    e.beforeId,
-    e.data,
-    e.elevationScale,
-    e.extruded,
-    e.coverage,
-    e.autoHighlight,
-    e.material,
-    e.radius,
-    e.transitions
-  ]);
-  return i(() => {
-    if (!(!r.map || !t))
-      return n.addLayer(t), () => {
-        n.removeLayer(t);
-      };
-  }, [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,
-    r.id,
-    r.pickable,
-    r.onTileLoad,
-    r.onTileUnload,
-    r.loadOptions,
-    r.loaders,
-    r.visible,
-    r.opacity,
-    r.pointSize,
-    r.beforeId
-  ]);
-  return i(() => {
-    if (!(!t.map || !a))
-      return c.addLayer(a), () => {
-        a && c.removeLayer(a);
-      };
-  }, [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
-    });
-  }, [e]);
-  return i(() => {
-    if (!(!n.map || !t))
-      return r.addLayer(t), () => {
-        t && r.removeLayer(t);
-      };
-  }, [n.map, t]), /* @__PURE__ */ d(s, {});
-};
-export {
-  k 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,35 @@
 {
   "name": "@mapcomponents/deck-gl",
-  "version": "1.8.10",
-  "description": "",
+  "version": "1.8.19-3",
+  "description": "MapComponents components that integrate deck.gl layers into MapLibre maps.",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
   "license": "MIT",
+  "repository": {
+    "url": "https://github.com/mapcomponents/react-map-components-maplibre"
+  },
   "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.20",
-    "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.10"
+    "@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.19-3"
   },
   "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/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],
+			},
+			rolldownOptions: {
+				// 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.10",
-	"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.20",
-		"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"
-}