@mapcomponents/react-maplibre 0.1.20 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.20",
+  "version": "0.1.24",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

package/scripts/build-catalogue-markdown-docs.js

@@ -7,19 +7,21 @@ let options = {};
 function getComponentNameFromPath(path) {
   let tmp = path.split("/");
   tmp = tmp[tmp.length - 1];
-  return tmp.replace(".doc.de.md", "");
+  tmp = tmp.split(".doc");
+  return tmp[0];
 }
 
 const converter = new showdown.Converter();
 
-glob("src/components/**/*.doc.de.md", options, function (er, files) {
+glob("src/components/**/*.doc.*.md", options, function (er, files) {
   console.log(files);
 
   for (var i = 0, len = files.length; i < len; i++) {
+    let language = files[i].slice(-5, -3);
     let rawdata = fs.readFileSync(files[i]);
     let html = converter.makeHtml(rawdata + "");
     fs.writeFileSync(
-      "public/catalogue/" + getComponentNameFromPath(files[i]) + ".de.html",
+      "public/catalogue/" + getComponentNameFromPath(files[i]) + "." + language + ".html",
       html
     );
   }

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js

@@ -97,7 +97,7 @@ const MapLibreGlWrapper = function (props) {
     /**
      * Maps layerIds to layerState in JSON string form for quick deep comparisons
      */
-    layerStateStrings: {},
+    layerStateString: "",
     /**
      * Previous Version of layerStateString
      */
@@ -110,29 +110,29 @@ const MapLibreGlWrapper = function (props) {
      */
     buildLayerObject: (layer) => {
       //if (self.baseLayers.indexOf(layer.id) === -1) {
-      let paint = {};
-      let values = layer.paint?._values;
-      Object.keys(values || {}).forEach((propName) => {
-        paint[propName] =
-          typeof values[propName].value !== "undefined"
-            ? values[propName].value.value
-            : values[propName];
-      });
-      let layout = {};
-      values = layer.layout?._values;
-      Object.keys(values || {}).forEach((propName) => {
-        layout[propName] =
-          typeof values[propName].value !== "undefined"
-            ? values[propName].value.value
-            : values[propName];
-      });
+      //let paint = {};
+      //let values = layer.paint?._values;
+      //Object.keys(values || {}).map((propName) => {
+      //  paint[propName] =
+      //    typeof values[propName].value !== "undefined"
+      //      ? values[propName].value.value
+      //      : values[propName];
+      //});
+      //let layout = {};
+      //values = layer.layout?._values;
+      //Object.keys(values || {}).map((propName) => {
+      //  layout[propName] =
+      //    typeof values[propName].value !== "undefined"
+      //      ? values[propName].value.value
+      //      : values[propName];
+      //});
       return {
         id: layer.id,
         type: layer.type,
         visible: layer.visibility === "none" ? false : true,
         baseLayer: self.baseLayers.indexOf(layer.id) !== -1,
-        paint,
-        layout,
+        //paint,
+        //layout,
         //filter: layers[layerId].filter,
         //layout: layers[layerId].layout,
         //maxzoom: layers[layerId].maxzoom,
@@ -161,7 +161,10 @@ const MapLibreGlWrapper = function (props) {
      */
     refreshLayerState: () => {
       self.wrapper.layerState = self.wrapper.buildLayerObjects();
-      self.wrapper.layerStateStrings = self.wrapper.layerState.map((el) => JSON.stringify(el));
+      if (JSON.stringify(self.wrapper.layerState) !== self.wrapper.layerStateString) {
+        self.wrapper.fire("layerchange");
+        self.wrapper.layerStateString = JSON.stringify(self.wrapper.layerState);
+      }
     },
     /**
      * Object containing information on the current viewport state
@@ -505,9 +508,11 @@ const MapLibreGlWrapper = function (props) {
       self.wrapper.viewportState = self.wrapper.getViewport();
       self.wrapper.fire("viewportchange");
     });
+    self.map.on("idle", () => {
+      self.wrapper.refreshLayerState();
+    });
     self.map.on("data", () => {
       self.wrapper.refreshLayerState();
-      self.wrapper.fire("layerchange");
     });
     if (typeof props.onReady === "function") {
       props.onReady(self.map, self);

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.test.js

@@ -297,7 +297,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(3);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
   });
 
   it("should remove an event using off from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
@@ -310,7 +310,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(3);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
 
     wrapper.find(".toggle_children_are_visible").simulate("click");
 
@@ -327,7 +327,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
 
     wrapper.find(".toggle_children_are_visible").simulate("click");
 

package/src/components/MlCreatePdfButton/MlCreatePdfButton.doc.de.md

@@ -1,3 +1,3 @@
-# Component Beschreibung
+# Beschreibung
 
-Beschreibungstext
+Export auf Knopfdruck ein PDF des aktuellen Kartenausschnitts.

package/src/components/MlCreatePdfButton/MlCreatePdfButton.doc.en.md

@@ -0,0 +1,3 @@
+# Description
+
+Export the current map extent as a PDF document with the click of a single button.

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,7 +93,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -139,15 +139,15 @@ const MlGeoJsonLayer = (props) => {
     );
 
     if (typeof props.onHover !== "undefined") {
-      mapHook.map.on("mousemove", mapHook.componentId, props.onHover, mapHook.componentId);
+      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
     }
 
     if (typeof props.onClick !== "undefined") {
-      mapHook.map.on("click", mapHook.componentId, props.onClick, mapHook.componentId);
+      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
     }
 
     if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on("mouseleave", mapHook.componentId, props.onLeave, mapHook.componentId);
+      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
     }
 
     if (

package/src/components/MlNavigationCompass/MlNavigationCompass.test.js

@@ -48,7 +48,7 @@ describe("<MlNavigationCompass>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(3));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4));
   });
 
   it("should deregister 1 event listener to the maplibre instance", async () => {
@@ -59,7 +59,7 @@ describe("<MlNavigationCompass>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(3);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 

package/src/components/MlShareMapState/MlShareMapState.js

@@ -1,10 +1,19 @@
-import React, {useRef, useEffect, useContext, useState} from "react";
+import React, { useRef, useEffect, useContext, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import {MapContext} from "@mapcomponents/react-core";
-import {v4 as uuidv4} from "uuid";
+import { MapContext } from "@mapcomponents/react-core";
+import { v4 as uuidv4 } from "uuid";
 import useMapState from "../../hooks/useMapState";
 
+const getCurrentUrlParameters = () => {
+  let currentParams = Object.fromEntries(new URLSearchParams(window.location.search));
+  currentParams.layers = JSON.parse(currentParams?.layers ? currentParams.layers : "[]");
+
+  return currentParams;
+};
+
+const initialUrlParams = getCurrentUrlParameters();
+
 /**
  * TODO: Add short & useful description
  *
@@ -19,24 +28,73 @@ const MlShareMapState = (props) => {
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
   const [map, setMap] = useState(undefined);
+  const layersFromUrlParamsRef = useRef({});
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlShareMapState-") + uuidv4());
-  const [isInitialState, setIsInitialState] = useState(true);
   const mapState = useMapState({
     watch: {
       viewport: false,
       layers: true,
-      sources: false
+      sources: false,
     },
     filter: {
-      includeBaseLayers: false
-    }
-  })
+      includeBaseLayers: false,
+    },
+  });
+
+  const allStatesRestoredRef = useRef(false);
+  const layerStatesRestored = useRef(undefined);
+  const restoredStatesRef = useRef({
+    viewport: {
+      center: false,
+      bearing: false,
+      pitch: false,
+      zoom: false,
+    },
+    layers: {
+      ...layersFromUrlParamsRef,
+    },
+  });
 
+  // initial URL-Params
   const mapStateRef = useRef({});
 
+  const refreshUrlParameters = useCallback(() => {
+    if (!props.active) return;
+
+    let mapLayers = [];
+    for (let x in mapState.layers) {
+      mapLayers.push({
+        id: mapState.layers[x].id,
+        type: mapState.layers[x].type,
+        visible: mapState.layers[x].visible,
+      });
+    }
+    refreshMapState();
+    let urlParams = new URLSearchParams({
+      ...getCurrentUrlParameters(),
+      ...mapStateRef.current,
+      layers: JSON.stringify(mapLayers),
+    });
+    JSON.parse(Object.fromEntries(urlParams).layers).forEach((el) => {
+      layersFromUrlParamsRef.current[el.id] = false;
+    });
+
+    let currentParams = new URLSearchParams(window.location.search);
+    checkRestorationStates(mapState.layers);
+    if (urlParams.toString() !== currentParams.toString()) {
+      window.history.pushState(
+        { ...mapStateRef.current },
+        document.title,
+        "?" + urlParams.toString()
+      );
+    }
+  }, [mapState.layers, props.active]);
+
   useEffect(() => {
     let _componentId = componentId.current;
 
+    mapStateRef.current = getCurrentUrlParameters();
+
     return () => {
       // This is the cleanup function, it is called when this react component is removed from react-dom
       // try to remove anything this component has added to the MapLibre-gl instance
@@ -52,6 +110,24 @@ const MlShareMapState = (props) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    refreshUrlParameters();
+  }, [refreshUrlParameters]);
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    let _refreshUrlParameters = refreshUrlParameters;
+
+    mapRef.current.on("moveend", _refreshUrlParameters, componentId.current);
+
+    return () => {
+      mapRef.current?.off("moveend", _refreshUrlParameters);
+    };
+  }, [refreshUrlParameters, map]);
+
   useEffect(() => {
     if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
     // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
@@ -59,111 +135,85 @@ const MlShareMapState = (props) => {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
     setMap(mapRef.current);
-
-    const currentUrlParams = getCurrentUrlParameters();
-    if (currentUrlParams.lat && currentUrlParams.lng) {
-      mapStateRef.current.lat = currentUrlParams.lat;
-      mapStateRef.current.lng = currentUrlParams.lng;
-      mapStateRef.current.zoom = currentUrlParams.zoom;
-      mapRef.current.setZoom(mapStateRef.current.zoom);
+    if (mapStateRef.current.lat && mapStateRef.current.lng) {
+      restoreViewportState();
     }
   }, [mapContext.mapIds, mapContext, props.mapId, props.active]);
 
   useEffect(() => {
-    if (!map) return;
-    if(!mapState.layers) return;
-    if(!isInitialState) return;
+    if (!mapState?.layers?.length) return;
 
-    const currentUrlParams = getCurrentUrlParameters()
+    if (typeof layerStatesRestored.current === "undefined") {
+      layerStatesRestored.current = {};
+      initialUrlParams?.layers.forEach((layer) => {
+        layerStatesRestored.current[layer.id] = false;
+      });
+    }
 
-    if(currentUrlParams.layers) {
-      for (let x in currentUrlParams.layers) {
-        mapRef.current.getLayer(currentUrlParams.layers[x].id).visibility = currentUrlParams.layers[x].visible ? "visible" : "none"
-        mapRef.current.getLayer(currentUrlParams.layers[x].id).type = currentUrlParams.layers[x].type
+    for (let key in layerStatesRestored.current) {
+      let _allDone = true;
+      if (layerStatesRestored.current[key] === false) {
+        _allDone = false;
+      }
+      if (_allDone) {
+        return;
       }
     }
 
-  }, [mapState.layers, props.mapId, props.active])
+    if (initialUrlParams.layers) {
+      initialUrlParams.layers.forEach((layer) => {
+        if (mapRef.current?.getLayer(layer.id) && layerStatesRestored.current[layer.id] === false) {
+          layerStatesRestored.current[layer.id] = true;
+          mapRef.current
+            ?.getLayer(layer.id)
+            ?.setLayoutProperty("visibility", layer.visible ? "visible" : "none");
+        }
+      });
+    }
+  }, [mapState.layers, props.mapId, props.active]);
 
   useEffect(() => {
     if (!map) return;
     if (!mapState.layers) return;
 
-    if (props.active) {
-      setIsInitialState(false)
-      map.on(
-        "moveend",
-        () => {
-          let mapLayers = []
-          for (let x in mapState.layers) {
-            mapLayers.push(new URLSearchParams({
-              id: mapState.layers[x].id,
-              type: mapState.layers[x].type,
-              visible: mapState.layers[x].visible
-            }))
-          }
-          refreshMapState();
-          let urlParams = new URLSearchParams({
-            ...getCurrentUrlParameters(),
-            ...mapStateRef.current,
-            layers : mapLayers
-          });
-
-          let currentParams = new URLSearchParams(window.location.search);
-          if (urlParams.toString() !== currentParams.toString()) {
-            window.history.pushState(
-              {...mapStateRef.current},
-              document.title,
-              "?" + urlParams.toString()
-            );
-          }
-        },
-        componentId.current
-      );
-    } else {
+    if (!props.active) {
       map.cleanup(componentId.current);
     }
-  }, [props.active, map]);
-
-  const getCurrentUrlParameters = () => {
-    let parameterObject = Object.fromEntries(new URLSearchParams(window.location.search))
-
-    if(window.location.search.indexOf("layers")!==-1) {
-      let layerParamString = window.location.search.substring(window.location.search.indexOf("layers"))
-      layerParamString = layerParamString.substring(0, (layerParamString.indexOf("&")!==-1) ? layerParamString.indexOf("&") : layerParamString.length)
-      parameterObject = Object.fromEntries(new URLSearchParams(window.location.search.replace(layerParamString, "")))
-      let layerParams = layerParamString.substring(7)
-      layerParams = layerParams.replaceAll("%3D", "=")
-      layerParams = layerParams.replaceAll("%26", "&")
-      layerParams = layerParams.replaceAll("%2C", ",")
-
-      if (layerParams.indexOf(",")) {
-        layerParams = layerParams.split(",")
-      } else {
-        layerParams = [layerParams]
-      }
-
-      for (let x in layerParams) {
-        let layerState = layerParams[x].split("&")
-        layerParams[x] = {}
-        for (let y in layerState) {
-          layerParams[x][layerState[y].split("=")[0]] = layerState[y].split("=")[1]
-        }
-      }
-      parameterObject["layers"] = layerParams
-    }
-    return parameterObject
-  };
+  }, [props.active, map, mapState.layers]);
 
   const refreshMapState = () => {
     mapStateRef.current.lat = mapRef.current.getCenter().lat;
     mapStateRef.current.lng = mapRef.current.getCenter().lng;
     mapStateRef.current.zoom = mapRef.current.getZoom();
+    mapStateRef.current.bearing = mapRef.current.getBearing();
+    mapStateRef.current.pitch = mapRef.current.getPitch();
+  };
+
+  const checkRestorationStates = (stateArray) => {
+    let tempArray = {};
+    stateArray.forEach((el, i, arr) => {
+      if (!arr[el.key]) tempArray[el.key] = true;
+    });
+  };
+
+  const restoreViewportState = () => {
+    if (!restoredStatesRef.current.viewport.center) {
+      restoredStatesRef.current.viewport.center = true;
+      mapRef.current.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
+      mapRef.current.setZoom(mapStateRef.current.zoom);
+      mapRef.current.setBearing(mapStateRef.current.bearing);
+      mapRef.current.setPitch(mapStateRef.current.pitch);
+    }
+
+    allStatesRestoredRef.current = true;
   };
 
   window.onpopstate = (event) => {
     if (event.state && event.state.lng && event.state.lat && event.state.zoom) {
-      mapRef.current.easeTo({zoom: event.state.zoom, center: [event.state.lng, event.state.lat]});
+      mapRef.current.easeTo({
+        zoom: event.state.zoom,
+        center: [event.state.lng, event.state.lat],
+      });
     }
   };
 

package/src/components/MlShareMapState/MlShareMapState.stories.js

@@ -1,8 +1,22 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 
 import MlShareMapState from "./MlShareMapState";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import MlLayer from "../MlLayer/MlLayer";
+import useMapState from "../../hooks/useMapState";
+import useMap from "../../hooks/useMap";
+import Sidebar from "../../ui_components/Sidebar";
+import ListItem from "@mui/material/ListItem";
+import IconButton from "@mui/material/IconButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import ListItemText from "@mui/material/ListItemText";
+import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
+import sample_geojson_2 from "../MlGeoJsonLayer/assets/sample_2.json";
+import List from "@mui/material/List";
+import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import { ToggleButton } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 
 const storyoptions = {
   title: "MapComponents/MlShareMapState",
@@ -12,37 +26,73 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => {
-  const [watchState, setWatchState] = useState(false);
-  const [testLayerVisible, setTestLayerVisible] = useState(true);
+const Template = () => {
+  const geoJsonArray = [sample_geojson_1, sample_geojson_2];
+  const [watchState, setWatchState] = useState(true);
+  const mapHook = useMap({ mapId: "map_1" });
+  const mapState = useMapState({
+    mapId: "map_1",
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+    filter: {
+      includeBaseLayers: false,
+    },
+  });
 
   return (
     <>
-      <button
-        style={{ zIndex: "1000", position: "absolute" }}
-        onClick={() => setWatchState(!watchState)}
-      >
-        watch map state {watchState ? 1 : 0}
-      </button>
-      <button
-        style={{ zIndex: "1000", position: "absolute" }}
-        onClick={() => setTestLayerVisible(!testLayerVisible)}
-      >
-        visibility {testLayerVisible ? 1 : 0}
-      </button>
       <MlShareMapState active={watchState} />
-      <MlLayer
-        layerId={"MlLayer-testLayer"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
-      <MlLayer
-        layerId={"MlLayer-testLayer2"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
-      <MlLayer
-        layerId={"MlLayer-testLayer3"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
+      {geoJsonArray.map((el, i) => (
+        <MlGeoJsonLayer layerId={"GeoJson_" + i} type="line" geojson={el} key={"GeoJson_" + i} />
+      ))}
+      <Sidebar sx={{ wordBreak: "break-word" }}>
+        <ToggleButton
+          size="small"
+          selected={watchState}
+          value={watchState}
+          onChange={() => {
+            setWatchState(!watchState);
+          }}
+        >
+          {watchState ? <CheckCircleOutlineIcon /> : <ErrorOutlineIcon />}
+
+          {watchState ? "active" : "inactive"}
+        </ToggleButton>
+        <List dense key="layers">
+          {mapState.layers?.map((el) => (
+            <ListItem
+              key={el.id}
+              secondaryAction={
+                <IconButton
+                  edge="end"
+                  aria-label="toggle visibility"
+                  onClick={() => {
+                    let currentVisibility = mapHook.map
+                      ?.getLayer?.(el.id)
+                      ?.getLayoutProperty("visibility");
+                    mapHook.map
+                      ?.getLayer?.(el.id)
+                      ?.setLayoutProperty(
+                        "visibility",
+                        currentVisibility === "none" ? "visible" : "none"
+                      );
+                    setTimeout(() => {
+                      mapHook.map._render();
+                    }, 100);
+                  }}
+                >
+                  {el.visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+                </IconButton>
+              }
+            >
+              <ListItemText primary={el.id} secondary={""} />
+            </ListItem>
+          ))}
+        </List>
+      </Sidebar>
     </>
   );
 };