@mapcomponents/react-maplibre 0.1.9 → 0.1.13

package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js

@@ -0,0 +1,106 @@
+import React, { useState, useContext, useRef, useEffect } from "react";
+import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
+import MlLayerSwitcher from "./MlLayerSwitcher";
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer'
+import mapContextDecorator from "../../decorators/MapContextDecorator";
+import sample_geojson_1 from "./assets/sample_1.json";
+import sample_geojson_2 from "./assets/sample_2.json";
+import { Props } from "@storybook/addon-docs/blocks";
+
+const storyoptions = {
+  title: "MapComponents/MlLayerSwitcher",
+  component: MlLayerSwitcher,
+  argTypes: {
+    url: {},
+    layer: {},
+  },
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+const layerId = "nw_uraufnahme_rw";
+const Template = (args) => {
+  const [geojson, setGeojson] = useState(sample_geojson_1);
+  return (
+    <>
+      <MlWmsLayer
+        url={args.url}
+        urlParameters={{ layers: args.layer }}
+        sourceOptions={args.sourceOptions}
+        layerId="historic"
+        visible={args.layerVisible}
+      />
+      <MlWmsLayer
+        url={args.url2}
+        urlParameters={{ layers: args.layer2 }}
+        sourceOptions={args.sourceOptions}
+        layerId={args.layer2}
+        visible={args.layer2Visible}
+      />
+      <MlGeoJsonLayer
+        type="line"
+        layout={{ visibility: args.geojsonLayerVisible ? "visible" : "none" }}
+        geojson={geojson}
+        layerId="geojson1"
+      />
+      <MlGeoJsonLayer
+        type="line"
+        layout={{ visibility: args.geojson2LayerVisible ? "visible" : "none" }}
+        geojson={sample_geojson_2}
+        layerId="geojson2"
+      />
+      <MlLayerSwitcher
+        baseSourceConfig={{
+          active: args.baseSourcesActive,
+          layers: args.layers,
+        }}
+        detailLayerConfig={args.detailLayerConfig}
+      />
+      ;
+    </>
+  );
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {
+  url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
+  layer: "nw_uraufnahme_rw",
+  layerVisible: true,
+  url2: "https://www.wms.nrw.de/geobasis/wms_nw_dop",
+  layer2: "WMS_NW_DOP",
+  layer2Visible: false,
+  geojsonLayerVisible: true,
+  geojson2LayerVisible: true,
+  sourceOptions: {
+    minzoom: 13,
+    maxzoom: 20,
+  },
+  baseSourcesActive: true,
+  layers: [
+    {
+      label: "Historic",
+      layerId: "historic",
+      src: "assets/historic.png",
+    },
+    {
+      label: "Straßenkarte",
+      layerId: "styleBase",
+      src: "assets/osm.png",
+    },
+    {
+      label: "DOP",
+      layerId: "WMS_NW_DOP",
+      src: "assets/dop.png",
+    },
+  ],
+  detailLayerConfig: {
+    layers: [
+      {
+        label: "GeoJson 1",
+        layerId: "geojson1",
+        src: "assets/historic.png",
+        active: true,
+      },
+    ],
+  },
+};

package/src/components/MlLayerSwitcher/assets/sample_1.json

@@ -0,0 +1,26 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.1074676513671875, 50.74340774029213],
+      [7.0992279052734375, 50.756441089372665],
+      [7.079315185546874, 50.764693667025014],
+      [7.045669555664062, 50.77945780529241],
+      [7.030563354492187, 50.79161300845443],
+      [7.0291900634765625, 50.80940599750376],
+      [7.0236968994140625, 50.820685846099174],
+      [7.0085906982421875, 50.825891011253546],
+      [6.9879913330078125, 50.826758482363275],
+      [6.97906494140625, 50.835432306955276],
+      [6.9824981689453125, 50.84583876895451],
+      [6.9962310791015625, 50.85147463352982],
+      [7.012023925781249, 50.85710981721644],
+      [7.021636962890625, 50.86664473085768],
+      [7.0367431640625, 50.872278081520406],
+      [7.0477294921875, 50.877044231111014],
+      [7.052536010742187, 50.88397594225127]
+    ]
+  }
+}

package/src/components/MlLayerSwitcher/assets/sample_2.json

@@ -0,0 +1,22 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.0635223388671875, 50.71385204707258],
+      [7.06146240234375, 50.709721458354075],
+      [7.063865661621094, 50.70298129536074],
+      [7.064552307128906, 50.69906720767511],
+      [7.059059143066406, 50.69428287906098],
+      [7.05596923828125, 50.68797551838366],
+      [7.0580291748046875, 50.680797145321655],
+      [7.062835693359375, 50.67514068397085],
+      [7.060432434082031, 50.6686131506577],
+      [7.051849365234375, 50.659255436656736],
+      [7.044639587402344, 50.6512019574539],
+      [7.0484161376953125, 50.64271166020676],
+      [7.0566558837890625, 50.63748609931014]
+    ]
+  }
+}

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -0,0 +1,98 @@
+import { React, useEffect, useState } from "react";
+import { css, cx } from "@emotion/css";
+import { Box } from "@mui/system";
+import ImageLoader from "../../../ui_components/ImageLoader";
+import { propsToClassKey } from "@mui/styles";
+import useMapState from "../../../hooks/useMapState";
+
+/**
+ * @component
+ *
+ */
+const LayerBox = (props) => {
+  const [activeClassName, setActiveClassName] = useState("");
+  const [className, setClassName] = useState("mllayerswitcher-layer-box ");
+  const { layers } = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+    filter: {
+      matchLayerIds: props.layerId,
+    },
+  });
+  const hoverBorderColor = "#1C62D7"; //Navy Blue
+  const activeBorderColor = "";
+  const width = "40px";
+
+  const defaultClass = css`
+    & img:hover {
+    }
+  `;
+  const activeClass =
+    defaultClass +
+    `& img {
+        border-color:  rgb(196, 240, 0);
+        border-radius: 8px;
+      }
+    
+      `;
+  const hoverClass = css``;
+
+  useEffect(() => {
+    const isActive = props.activeLayers?.indexOf(props.layerId) !== -1;
+
+    if (isActive) {
+      setClassName(activeClass);
+    } else {
+      setClassName(defaultClass);
+    }
+  }, [props.activeLayers]);
+
+  return (
+    <>
+      <Box
+        key={props.layerId}
+        className={defaultClass}
+        sx={{
+          width,
+          height: "53px",
+          justifyContent: "center",
+          py: 0.25,
+          px: "1rem",
+          cursor: "pointer",
+        }}
+        onClick={() => {
+          props?.handleLayerBoxClick?.(props.layerId);
+        }}
+      >
+        <ImageLoader
+          style={{
+            border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
+            borderRadius: "8px",
+            height: "40px",
+            width: "40px",
+          }}
+          src={props.thumbnail}
+        />
+
+        <div
+          className="mllayerswitcher-layer-text"
+          style={{
+            textAlign: "center",
+            color: "rgb(112, 117, 122)",
+            fontFamily: "Roboto, Arial",
+            width,
+            fontSize: "0.60rem",
+          }}
+        >
+          {props.label}
+        </div>
+      </Box>
+    </>
+  );
+};
+
+export default LayerBox;

package/src/components/MlMarker/MlMarker.js

@@ -115,7 +115,7 @@ const MlMarker = (props) => {
             "&:hover": {
               opacity: 1,
             },
-            zIndex: 1000,
+            zIndex: -1,
           }}
         >
           <iframe

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,17 +23,19 @@ 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",
+    minWidth: "20px",
+    minHeight: "20px",
+    width: mediaIsMobile ? "50px" : "30px",
+    height: mediaIsMobile ? "50px" : "30px",
     color: "#bbb",
     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",
@@ -77,7 +80,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 +88,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 +99,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 +120,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 +130,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={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 />
+          <ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
         <Button sx={buttonStyle} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon />
+          <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/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",
 };