@mapcomponents/react-maplibre 0.1.12 → 0.1.16

package/src/components/MlNavigationTools/MlNavigationTools.js

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { MapContext } from "@mapcomponents/react-core";
-import { useEffect, useRef, useContext, useState } from "react";
+import {MapContext} from "@mapcomponents/react-core";
+import {useEffect, useRef, useContext, useState} from "react";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import ControlPointIcon from "@mui/icons-material/ControlPoint";
@@ -9,10 +9,11 @@ import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 //import ZoomOutIcon from "@mui/icons-material/ZoomOut";
 //import ZoomInIcon from "@mui/icons-material/ZoomIn";
 import GpsFixedIcon from "@mui/icons-material/GpsFixed";
-import { v4 as uuidv4 } from "uuid";
+import {v4 as uuidv4} from "uuid";
 
 import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const MlNavigationTools = (props) => {
   const mapContext = useContext(MapContext);
@@ -22,21 +23,22 @@ const MlNavigationTools = (props) => {
 
   const [pitch, setPitch] = useState(0);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+  const mediaIsMobile = useMediaQuery("(max-width:900px)");
   const buttonStyle = {
-    minWidth: "30px",
-    minHeight: "30px",
-    width: "30px",
-    height: "30px",
-    color: "#bbb",
+    minWidth: "20px",
+    minHeight: "20px",
+    width: mediaIsMobile ? "50px" : "30px",
+    height: mediaIsMobile ? "50px" : "30px",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
     //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
     margin: 0.15,
+    fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
-      color: "#ececec",
     },
+    color: "#ececec"
   };
 
   useEffect(() => {
@@ -77,7 +79,7 @@ const MlNavigationTools = (props) => {
     if (!mapRef.current) return;
 
     if (mapRef.current.transform._zoom + 0.5 <= mapRef.current.transform._maxZoom) {
-      mapRef.current.easeTo({ zoom: mapRef.current.transform._zoom + 0.5 });
+      mapRef.current.easeTo({zoom: mapRef.current.transform._zoom + 0.5});
     }
   };
 
@@ -85,7 +87,7 @@ const MlNavigationTools = (props) => {
     if (!mapRef.current) return;
 
     if (mapRef.current.transform._zoom - 0.5 >= mapRef.current.transform._minZoom) {
-      mapRef.current.easeTo({ zoom: mapRef.current.transform._zoom - 0.5 });
+      mapRef.current.easeTo({zoom: mapRef.current.transform._zoom - 0.5});
     }
   };
 
@@ -96,7 +98,7 @@ const MlNavigationTools = (props) => {
     if (mapRef.current.getPitch() !== 0) {
       targetPitch = 0;
     }
-    mapRef.current.easeTo({ pitch: targetPitch });
+    mapRef.current.easeTo({pitch: targetPitch});
   };
 
   const moveToCurrentLocation = () => {
@@ -117,8 +119,8 @@ const MlNavigationTools = (props) => {
       style={{
         zIndex: 501,
         position: "absolute",
-        right: "20px",
-        bottom: "20px",
+        right: mediaIsMobile ? "15px" : "5px",
+        bottom: mediaIsMobile ? "40px" : "20px",
         display: "flex",
         flexDirection: "column",
       }}
@@ -127,34 +129,35 @@ const MlNavigationTools = (props) => {
         style={{
           width: "31px",
           position: "relative",
-          height: "50px",
-          marginLeft: "-5px",
+          height: mediaIsMobile ? "55px" : "45px",
+          marginLeft: mediaIsMobile ? "3px" : "-5px",
+          transform: mediaIsMobile ? "scale(1.6)" : "scale(1)"
         }}
         backgroundStyle={{
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button sx={{ ...buttonStyle, fontSize: ".9em", fontWeight: 600 }} onClick={adjustPitch}>
+      <Button sx={{...buttonStyle, fontWeight: 600}} onClick={adjustPitch}>
         {pitch ? "2D" : "3D"}
       </Button>
       <Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}>
-        <GpsFixedIcon sx={{ width: ".9em" }} />
+        <GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
       </Button>
-      <MlFollowGps />
+      <MlFollowGps style={{...(({color, ...rest}) => rest)(buttonStyle)}} />
       <ButtonGroup
         orientation="vertical"
         sx={{
-          width: "30px",
+          width: "50px",
           border: "none",
-          Button: { minWidth: "30px !important", border: "none", padding: 0 },
-          "Button:hover": { border: "none" },
+          Button: {minWidth: "20px !important", border: "none", padding: 0},
+          "Button:hover": {border: "none"},
         }}
       >
-        <Button sx={buttonStyle} onClick={zoomIn}>
-          <ControlPointIcon />
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}>
+          <ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
-        <Button sx={buttonStyle} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon />
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}>
+          <RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
       </ButtonGroup>
     </div>

package/src/components/MlScaleReference/MlScaleReference.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlScaleReference",
-  "title": "Referencescale",
+  "title": "Reference scale",
   "description": "",
   "i18n": {
     "de": {

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/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>
   ),
 ];