@mapcomponents/react-maplibre 0.1.11 → 0.1.15

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -0,0 +1,223 @@
+//CSS
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import { css, cx } from '@emotion/css'
+import "./MlLayerSwitcher.css";
+//External
+import { useEffect, useContext, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, Typography, Box } from "@mui/material";
+//Internal
+import { MapContext } from "@mapcomponents/react-core";
+import LayerBox from "./components/LayerBox";
+import Divider from "@mui/material/Divider";
+import useMapState from "../../hooks/useMapState";
+import LoadingOverlay from "../../ui_components/LoadingOverlay";
+/**
+ * @component
+ *
+ *
+ */
+const MlLayerSwitcher = (props) => {
+  const mapContext = useContext(MapContext);
+  const showBaseSources = !!props.baseSourceConfig?.layers?.length;
+  const showDetailLayer = !!props.detailLayerConfig?.layers?.length;
+  const { layers } = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+    filter: {},
+  });
+  const [activeLayers, setActiveLayers] = useState([]);
+  const [activeDetailLayers, setActiveDetailLayers] = useState([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    //Set base state to activate only the first layer
+    if (mapContext.map) {
+      const disableAllButFirst = (config, i) => {
+        const layers = getLayerListFromId(config.layerId);
+        const visible = i === 0 ? "visible" : "none";
+
+        layers.forEach((layer) => {
+          if (layer) {
+            changeLayerState(layer, visible);
+          }
+        });
+      };
+
+      props.baseSourceConfig.layers.forEach((config, i) => disableAllButFirst(config, i));
+      props.detailLayerConfig.layers.forEach((config, i) => disableAllButFirst(config, i));
+    }
+    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
+      // e.g.: remove the layer
+      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
+      // check for the existence of map.style before calling getLayer or getSource
+    };
+  }, [mapContext.map]);
+
+  useEffect(() => {
+    if (mapContext.map?.style?._layers) {
+      let newactiveLayers = [];
+      let newactiveDetailLayers = [];
+      props.baseSourceConfig.layers.forEach((layerConfig) => {
+        const layers = getLayerListFromId(layerConfig.layerId);
+
+        layers.forEach((layer) => {
+          const visibilty = mapContext.map?.getLayoutProperty(layer, "visibility");
+          if (mapContext.map.baseLayers.indexOf(layer) !== -1) {
+            layer = "styleBase";
+          }
+
+          if (newactiveLayers.indexOf(layer) === -1 && visibilty === "visible") {
+            newactiveLayers.push(layer);
+          }
+        });
+      });
+      props.detailLayerConfig.layers.forEach(({ layerId }) => {
+        const visibilty = mapContext.map?.getLayoutProperty(layerId, "visibility");
+        if (newactiveDetailLayers.indexOf(layerId) === -1 && visibilty === "visible") {
+          newactiveDetailLayers.push(layerId);
+        }
+      });
+      setActiveLayers(newactiveLayers);
+
+      setActiveDetailLayers(newactiveDetailLayers);
+    }
+  }, [layers]);
+
+  const getLayerListFromId = (id) => {
+    return id === "styleBase" ? mapContext?.map.baseLayers : [id];
+  };
+
+  const handleDetailLayerBoxClick = (layerId) => {
+    const cfg = props.detailLayerConfig.layers.find((e) => e.layerId === layerId);
+    if (cfg.linkedTo) {
+      handleLayerBoxClick(cfg.linkedTo);
+    }
+    const nextVisiblityClickedLayer =
+      mapContext?.map.getLayer(layerId)?.getLayoutProperty("visibility") === "visible"
+        ? "none"
+        : "visible";
+    changeLayerState(layerId, nextVisiblityClickedLayer);
+  };
+
+  const handleLayerBoxClick = (id) => {
+    let layers = getLayerListFromId(id);
+    const nextVisiblityClickedLayer =
+      mapContext?.map.getLayer(layers[0])?.getLayoutProperty("visibility") === "visible"
+        ? "none"
+        : "visible";
+
+    props.baseSourceConfig.layers.forEach((config, i) => {
+      let layers = getLayerListFromId(config.layerId);
+      let visible = "none";
+      if (config.layerId === id) {
+        visible = nextVisiblityClickedLayer;
+      }
+
+      //To avoid disabling all base layers we activate the first one
+      if (nextVisiblityClickedLayer === "none" && i === 0) {
+        visible = "visible";
+      }
+      layers.forEach((layer) => {
+        if (layer) {
+          changeLayerState(layer, visible);
+        }
+      });
+    });
+  };
+
+  const changeLayerState = (layer, visible = "none") => {
+    mapContext.map?.setLayoutProperty(layer, "visibility", visible);
+  };
+
+  return (
+    <>
+      <Card sx={{ zIndex: 101, position: "absolute", minWidth: "200px" }}>
+        <CardContent>
+          {showBaseSources && (
+            <Box sx={{ minHeight: "150px" }}>
+              <Typography variant="h6">{t(props.baseSourceConfig.label || "Map type")}</Typography>
+              <Divider />
+              <Box sx={{ display: "flex", paddingTop: "1rem" }}>
+                {props.baseSourceConfig.layers.map(({ src, label, layerId }) => {
+                  return (
+                    <LayerBox
+                      mapId={props.mapId}
+                      key={layerId}
+                      activeLayers={activeLayers}
+                      label={t(label)}
+                      layerId={layerId}
+                      thumbnail={src}
+                      handleLayerBoxClick={() => {
+                        handleLayerBoxClick(layerId);
+                      }}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+          {showDetailLayer && (
+            <Box sx={{ minHeight: "150px" }}>
+              <Typography variant="h6">{t("Map details")}</Typography>
+              <Divider />
+              <Box sx={{ display: "flex", paddingTop: "1rem" }}>
+                {props.detailLayerConfig.layers.map(({ src, label, layerId }) => {
+                  return (
+                    <LayerBox
+                      mapId={props.mapId}
+                      activeLayers={activeDetailLayers}
+                      label={t(label)}
+                      layerId={layerId}
+                      key={layerId}
+                      thumbnail={src}
+                      handleLayerBoxClick={() => {
+                        handleDetailLayerBoxClick(layerId);
+                      }}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+        </CardContent>{" "}
+      </Card>
+    </>
+  );
+};
+
+MlLayerSwitcher.propTypes = {
+  baseSourceConfig: PropTypes.shape({
+    label: PropTypes.string,
+    layers: PropTypes.arrayOf(
+      PropTypes.shape({
+        layerId: PropTypes.string.isRequired,
+        src: PropTypes.string,
+        label: PropTypes.string.isRequired,
+      })
+    ),
+  }),
+  detailLayerConfig: PropTypes.shape({
+    label: PropTypes.string,
+    layers: PropTypes.arrayOf(
+      PropTypes.shape({
+        layerId: PropTypes.string.isRequired,
+        src: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        linkedTo: PropTypes.string,
+      })
+    ),
+  }),
+  mapId: PropTypes.string,
+};
+
+export default MlLayerSwitcher;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlLayerSwitcher",
+  "title": "Layer switcher",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "Ebenen wechsler",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

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,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": {