@mapcomponents/react-maplibre 0.1.12 → 0.1.16

package/src/components/MlLayerSwipe/MlLayerSwipe.js

@@ -22,7 +22,7 @@ const MlLayerSwipe = (props) => {
     if (!props.map1Id || !props.map2Id) {
       return false;
     }
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -53,8 +53,7 @@ const MlLayerSwipe = (props) => {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;
 
-        var clipA =
-          "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
+        var clipA = "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
 
         mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
       }
@@ -71,8 +70,8 @@ const MlLayerSwipe = (props) => {
 
     initializedRef.current = true;
     syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id),
-      mapContext.getMap(props.map2Id)
+      mapContext.getMap(props.map1Id).map,
+      mapContext.getMap(props.map2Id).map
     );
     onMove({ clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2 });
   }, [mapContext.mapIds, mapContext, props, onMove, mapExists]);

package/src/components/MlLayerSwitcher/MlLayerSwitcher.css

@@ -0,0 +1,17 @@
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-image {
+    border-color:  rgb(181, 215, 238);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-text {
+    color:  rgb(181, 215, 238) !important;
+  
+}
+
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-image {
+    border-color:  rgb(196, 240, 0);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-text {
+    color:  rgb(252, 0, 0) !important;
+  
+}

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

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

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