@mapcomponents/react-maplibre 0.1.26 → 0.1.30

package/src/hooks/useMap.js

@@ -11,9 +11,12 @@ function useMap(props) {
     mapId: props.mapId,
     watch: {
       viewport: false,
-      layers: true,
+      layers: props.waitForLayer ? true : false,
       sources: false,
     },
+    filter: {
+      includeBaseLayers: true,
+    },
   });
 
   const initializedRef = useRef(false);
@@ -21,7 +24,7 @@ function useMap(props) {
 
   const componentId = useRef(uuidv4());
 
-  const [mapIsReady, setMapIsReady] = useState(undefined);
+  const [mapIsReady, setMapIsReady] = useState(false);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -39,7 +42,8 @@ function useMap(props) {
   useEffect(() => {
     if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
 
-    //check if insertBeforeLayer exists
+    // check if waitForLayer (string, layer id of the layer this hook is supposed to wait for)
+    // exists as layer in the MapLibre instance
     if (props.waitForLayer) {
       let layerFound = false;
 
@@ -57,7 +61,7 @@ function useMap(props) {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
     setMapIsReady(true);
-  }, [mapContext.mapIds, mapState.layers, mapContext, props.mapId]);
+  }, [mapContext.mapIds, mapState.layers, mapContext, props.waitForLayer, props.mapId]);
 
   return {
     map: mapRef.current,

package/src/hooks/useMapState.js

@@ -61,6 +61,7 @@ function useMapState(props) {
     let _componentId = componentId.current;
 
     return () => {
+      // cleanup all event listeners
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = undefined;
@@ -79,6 +80,7 @@ function useMapState(props) {
     if (props?.watch?.viewport) {
       setViewport(mapRef.current.wrapper.viewportState);
 
+      // register viewportchange event handler
       mapRef.current.wrapper.on(
         "viewportchange",
         () => {
@@ -90,6 +92,7 @@ function useMapState(props) {
       );
     }
 
+    // register layerchange event handler
     if (props?.watch?.layers) {
       refreshLayerState();
 
@@ -103,7 +106,7 @@ function useMapState(props) {
         componentId.current
       );
     }
-  }, [mapContext.mapIds, mapContext, props.mapId, refreshLayerState]);
+  }, [mapContext.mapIds, mapContext, props.mapId, refreshLayerState, props]);
 
   return {
     layers,

package/src/decorators/EmptyMapContextDecorator.js

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { MapComponentsProvider } from "@mapcomponents/react-core";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-const theme = createTheme({});
-
-const decorators = [
-  (Story) => (
-    <ThemeProvider theme={theme}>
-      <MapComponentsProvider>
-        <LoadingOverlayProvider>
-          <LoadingOverlay></LoadingOverlay>
-
-          <Story />
-        </LoadingOverlayProvider>
-      </MapComponentsProvider>
-    </ThemeProvider>
-  ),
-];
-
-export default decorators;

package/src/decorators/MapContext3DDecorator.js

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { MapComponentsProvider } from "@mapcomponents/react-core";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-const theme = createTheme({});
-
-const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
-        <MapComponentsProvider>
-          <Story />
-          <MapLibreMap
-            options={{
-              //style: "mapbox://styles/mapbox/light-v10",
-              //center: [-87.62712, 41.89033],
-              zoom: 14.5,
-              //pitch: 45,
-              //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-              style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-              //center: [8.607, 53.1409349],
-              //          zoom: 13,
-              center: [7.0851268, 50.73884],
-              //          maxBounds: [
-              //            [1.40625, 43.452919],
-              //            [17.797852, 55.973798],
-              //          ],
-            }}
-          />
-        </MapComponentsProvider>
-      </ThemeProvider>
-    </div>
-  ),
-];
-
-export default decorators;

package/src/decorators/MapContextDashboardDecorator.js

@@ -1,19 +0,0 @@
-import React from "react";
-
-import { MapComponentsProvider } from "@mapcomponents/react-core";
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-const theme = createTheme({});
-
-const decorators = [
-  (Story) => (
-    <ThemeProvider theme={theme}>
-      <MapComponentsProvider>
-        <Story />
-      </MapComponentsProvider>
-    </ThemeProvider>
-  ),
-];
-
-export default decorators;

package/src/decorators/MapContextKlokantechBasicDecorator.js

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { MapComponentsProvider } from "@mapcomponents/react-core";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-const theme = createTheme({});
-
-const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
-        <MapComponentsProvider>
-          <Story />
-          <MapLibreMap
-            options={{
-              //style: "mapbox://styles/mapbox/light-v10",
-              //center: [-87.62712, 41.89033],
-              zoom: 14.5,
-              //pitch: 45,
-              style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
-              //style:"https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-              //center: [8.607, 53.1409349],
-              //          zoom: 13,
-              center: [7.0851268, 50.73884],
-              //          maxBounds: [
-              //            [1.40625, 43.452919],
-              //            [17.797852, 55.973798],
-              //          ],
-            }}
-          />
-        </MapComponentsProvider>
-      </ThemeProvider>
-    </div>
-  ),
-];
-
-export default decorators;