@mapcomponents/react-maplibre 0.1.11 → 0.1.15

package/src/components/MlScaleReference/MlScaleReference.stories.js

@@ -4,6 +4,7 @@ import MlScaleReference from "./MlScaleReference";
 
 import TopToolbar from "../../ui_components/TopToolbar";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const storyoptions = {
   title: "MapComponents/MlScaleReference",
@@ -16,27 +17,30 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (props) => (
-  <>
-    {props.show === "toolbar" && (
-      <TopToolbar>
-        <MlScaleReference {...props} />
-      </TopToolbar>
-    )}
-    {props.show === "overlay" && (
-      <div
-        style={{
-          position: "absolute",
-          zIndex: 100000,
-          bottom: "20px",
-          right: "20px",
-        }}
-      >
-        <MlScaleReference {...props} />
-      </div>
-    )}
-  </>
-);
+const Template = (props) => {
+  const mediaIsMobile = useMediaQuery("(max-width:900px)");
+  return(
+    <>
+      {props.show === "toolbar" && (
+        <TopToolbar>
+          <MlScaleReference {...props} />
+        </TopToolbar>
+      )}
+      {props.show === "overlay" && (
+        <div
+          style={{
+            position: "absolute",
+            zIndex: 100000,
+            bottom: mediaIsMobile ? "40px" : "20px",
+            right: "20px",
+          }}
+        >
+          <MlScaleReference {...props} />
+        </div>
+      )}
+    </>
+  );
+}
 
 export const Toolbar = Template.bind({});
 Toolbar.args = {

package/src/components/MlShareMapState/MlShareMapState.js

@@ -1,8 +1,9 @@
-import React, { useRef, useEffect, useContext, useState } from "react";
+import React, {useRef, useEffect, useContext, useState} 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";
 
 /**
  * TODO: Add short & useful description
@@ -15,11 +16,21 @@ import { v4 as uuidv4 } from "uuid";
 const MlShareMapState = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   const mapContext = useContext(MapContext);
-
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
   const [map, setMap] = useState(undefined);
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlShareMapState-") + uuidv4());
+  const [isInitialState, setIsInitialState] = useState(true);
+  const mapState = useMapState({
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false
+    },
+    filter: {
+      includeBaseLayers: false
+    }
+  })
 
   const mapStateRef = useRef({});
 
@@ -49,32 +60,59 @@ const MlShareMapState = (props) => {
     mapRef.current = mapContext.getMap(props.mapId);
     setMap(mapRef.current);
 
-    let currentUrlParams = getCurrentUrlParameters();
+    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.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
       mapRef.current.setZoom(mapStateRef.current.zoom);
     }
   }, [mapContext.mapIds, mapContext, props.mapId, props.active]);
 
   useEffect(() => {
     if (!map) return;
+    if(!mapState.layers) return;
+    if(!isInitialState) return;
+
+    const currentUrlParams = getCurrentUrlParameters()
+
+    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
+      }
+    }
+
+  }, [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 },
+              {...mapStateRef.current},
               document.title,
               "?" + urlParams.toString()
             );
@@ -88,7 +126,33 @@ const MlShareMapState = (props) => {
   }, [props.active, map]);
 
   const getCurrentUrlParameters = () => {
-    return Object.fromEntries(new URLSearchParams(window.location.search));
+    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
   };
 
   const refreshMapState = () => {
@@ -99,7 +163,7 @@ const MlShareMapState = (props) => {
 
   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

@@ -2,6 +2,8 @@ import React, { useState} from "react";
 
 import MlShareMapState from "./MlShareMapState";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
+import useMapState from "../../hooks/useMapState";
+import MlLayer from "../MlLayer/MlLayer";
 
 const storyoptions = {
   title: "MapComponents/MlShareMapState",
@@ -12,7 +14,19 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (args) => {
-  const [watchState, setWatchState] = useState(true);
+  const [watchState, setWatchState] = useState(false);
+  const [testLayerVisible, setTestLayerVisible] = useState(true);
+  const mapState = useMapState({
+      watch : {
+        viewport : false,
+        layers : true,
+        sources : false
+      },
+      filter : {
+        includeBaseLayers : false
+      }
+    }
+  )
 
   return (
     <>
@@ -22,7 +36,16 @@ const Template = (args) => {
       >
         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")}}} />
     </>
   );
 };

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js

@@ -9,6 +9,7 @@ import Button from "@mui/material/Button";
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import InfoIcon from "@mui/icons-material/Info";
 import IconButton from "@mui/material/IconButton";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const storyoptions = {
   title: "MapComponents/MlSpatialElevationProfile",
@@ -24,30 +25,35 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => (
+const Template = (args) => {
+
+  const mediaIsMobile = useMediaQuery("(max-width:900px)");
+
+  return(
   <>
     <IconButton
       style={{
         position: "absolute",
         right: "5px",
-        bottom: "125px",
+        bottom: mediaIsMobile ? "145px" : "125px",
         backgroundColor: "rgba(255,255,255,1)",
 
         zIndex: 1000,
       }}
       title="Download sample-data"
       size="large"
-      href="/assets/sample.gpx"
+      href="assets/sample.gpx"
       target="blank"
     >
-      <FileDownloadIcon/>
+      <FileDownloadIcon />
     </IconButton>
     <GeoJsonProvider>
-      <MlGPXViewer/>
-      <MlSpatialElevationProfile/>
+      <MlGPXViewer />
+      <MlSpatialElevationProfile />
     </GeoJsonProvider>
   </>
 );
+}
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};

package/src/components/MlThreeJsLayer/MlThreeJsLayer.js

@@ -45,8 +45,13 @@ const MlThreeJsLayer = (props) => {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
 
+    mapRef.current.setCenter([7.099771581806502, 50.73395746209983]);
+    mapRef.current.setZoom(15);
+    mapRef.current.setPitch(45);
+
     // parameters to ensure the model is georeferenced correctly on the map
-    var modelOrigin = [7.1300753566457304, 50.71596191210998];
+    var modelOrigin = [7.099771581806502, 50.73395746209983];
+    // 50.73395746209983, 7.099771581806502
     var modelAltitude = 0;
     var modelRotate = [Math.PI / 2, 90, 0];
 
@@ -92,8 +97,7 @@ const MlThreeJsLayer = (props) => {
         // use the three.js GLTF loader to add the 3D model to the three.js scene
         var loader = new GLTFLoader();
         loader.load(
-          //"/assets/3D/posttower_simple.gltf",
-          "/assets/3D/godzilla_simple.glb",
+          "assets/3D/godzilla_simple.glb",
           //"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
           function (gltf) {
             this.scene.add(gltf.scene);
@@ -102,14 +106,6 @@ const MlThreeJsLayer = (props) => {
             }
           }.bind(this)
         );
-        loader.load(
-          "/assets/3D/posttower.gltf",
-          //"/assets/3D/posttower_wh.gltf.glb",
-          //"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
-          function (gltf) {
-            this.scene.add(gltf.scene);
-          }.bind(this)
-        );
         this.map = map;
 
         // use the Mapbox GL JS map canvas for three.js
@@ -161,9 +157,6 @@ const MlThreeJsLayer = (props) => {
     if (mapRef.current.getLayer(layerName)) {
       mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
     }
-    mapRef.current.setCenter([7.130255969902919, 50.7143656091998]);
-    mapRef.current.setZoom(15);
-    mapRef.current.setPitch(45);
   }, [mapContext.mapIds, mapContext, props]);
 
   useEffect(() => {
@@ -211,4 +204,4 @@ MlThreeJsLayer.propTypes = {
   onDone: PropTypes.func,
 };
 
-export default MlThreeJsLayer;
+export default MlThreeJsLayer;

package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json

@@ -1,14 +1,14 @@
 {
   "name": "MlVectorTileLayer",
-  "title": "Vektor tiles",
-  "description": "Component: Vector Tiles (add to the Application/map)",
+  "title": "Vector tile layer",
+  "description": "Adds a vector tile layer to the map",
   "i18n": {
     "de": {
       "title": "Vektorenkacheln",
       "description": "Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"
     }
   },
-  "tags": [ "Map layer" ],
+  "tags": ["Map layer"],
   "category": "layer",
   "type": "component",
   "price": 5000

package/src/components/MlWmsLayer/MlWmsLayer.js

@@ -47,7 +47,7 @@ const defaultProps = {
 const MlWmsLayer = (props) => {
   const mapContext = useContext(MapContext);
 
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLayer-") + uuidv4());
+  const componentId = useRef(props.layerId || ("MlWmsLayer-" + uuidv4()));
   const mapRef = useRef(null);
   const initializedRef = useRef(false);
   const layerId = useRef(props.layerId || componentId.current);

package/src/components/MlWmsLoader/MlWmsLoader.js

@@ -41,7 +41,7 @@ const MlWmsLoader = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   const mapContext = useContext(MapContext);
   const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl } = useWms({
-    url: props.url,
+    url: undefined,
     urlParameters: props.urlParameters,
   });
 
@@ -72,6 +72,8 @@ const MlWmsLoader = (props) => {
   }, []);
 
   useEffect(() => {
+    if (!initializedRef.current) return;
+
     setUrl(props.url);
   }, [props.url]);
 
@@ -199,17 +201,19 @@ const MlWmsLoader = (props) => {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    console.log("set url " + props.url);
+    setUrl(props.url);
+  }, [mapContext.mapIds, mapContext, props.mapId, props.url]);
 
   return (
     <>
       {error && <p>{error}</p>}
       <h3 key="title">{capabilities?.Service?.Title}</h3>
+      {console.log(componentId.current)}
       {capabilities?.Capability?.Layer?.Layer.map((layer, idx) => (
         <MlLayer
-          layerId="Order-"
+          layerId={"Order-" + componentId.current + "-" + idx}
           key={componentId.current + "-" + idx}
-          idSuffix={componentId.current + "-" + idx}
           {...(idx > 0
             ? {
                 insertBeforeLayer: "Order-" + componentId.current + "-" + (idx - 1),

package/src/components/MlWmsLoader/MlWmsLoader.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlWmsLoader",
-  "title": "WMS Info",
+  "title": "WMS loader",
   "description": "",
   "i18n": {
     "de": {

package/src/components/MlWmsLoader/MlWmsLoader.stories.js

@@ -18,11 +18,11 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (props) => {
-  const [url, setUrl] = useState("");
+  const [url, setUrl] = useState(props.url);
 
   return (
     <>
-      <Sidebar sx={{ width: "500px", wordBreak: "break-word" }}>
+      <Sidebar sx={{ wordBreak: "break-word" }}>
         <TextField
           label="WMS Url"
           variant="standard"
@@ -40,7 +40,8 @@ ExampleConfig.parameters = {};
 ExampleConfig.args = {
   /**
    * try https://maps.heigit.org/histosm/wms or https://magosm.magellium.com/geoserver/wms
-   *
+   * https://www.wms.nrw.de/wms/kitas
+   * https://www.wms.nrw.de/geobasis/wms_nw_vdop
    */
-  url: "https://www.wms.nrw.de/geobasis/wms_nw_vdop",
+  url: "https://www.wms.nrw.de/wms/kitas",
 };

package/src/decorators/EmptyMapContextDecorator.js

@@ -4,16 +4,21 @@ 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) => (
-    <MapComponentsProvider>
-      <LoadingOverlayProvider>
-        <LoadingOverlay></LoadingOverlay>
+    <ThemeProvider theme={theme}>
+      <MapComponentsProvider>
+        <LoadingOverlayProvider>
+          <LoadingOverlay></LoadingOverlay>
 
-        <Story />
-      </LoadingOverlayProvider>
-    </MapComponentsProvider>
+          <Story />
+        </LoadingOverlayProvider>
+      </MapComponentsProvider>
+    </ThemeProvider>
   ),
 ];
 

package/src/decorators/MapContext3DDecorator.js

@@ -3,30 +3,35 @@ 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">
-      <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 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>
   ),
 ];

package/src/decorators/MapContextDashboardDecorator.js

@@ -2,12 +2,17 @@ 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) => (
-    <MapComponentsProvider>
+    <ThemeProvider theme={theme}>
+      <MapComponentsProvider>
         <Story />
-    </MapComponentsProvider>
+      </MapComponentsProvider>
+    </ThemeProvider>
   ),
 ];
 

package/src/decorators/MapContextDecorator.js

@@ -3,12 +3,15 @@ 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">
-      <MapComponentsProvider>
-
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
           <Story />
           <MapLibreMap
             options={{
@@ -18,7 +21,8 @@ const decorators = [
             }}
             mapId="map_1"
           />
-      </MapComponentsProvider>
+        </MapComponentsProvider>
+      </ThemeProvider>
     </div>
   ),
 ];

package/src/decorators/MapContextKlokantechBasicDecorator.js

@@ -3,11 +3,15 @@ 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">
-      <MapComponentsProvider>
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
           <Story />
           <MapLibreMap
             options={{
@@ -15,8 +19,7 @@ const decorators = [
               //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/klokantech-basic.json",
               //style:"https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
               //center: [8.607, 53.1409349],
               //          zoom: 13,
@@ -27,7 +30,8 @@ const decorators = [
               //          ],
             }}
           />
-      </MapComponentsProvider>
+        </MapComponentsProvider>
+      </ThemeProvider>
     </div>
   ),
 ];

package/src/decorators/MultiMapContextDecorator.js

@@ -4,12 +4,13 @@ import { MapComponentsProvider } from "@mapcomponents/react-core";
 
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 const theme = createTheme({});
 
+
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">