@mapcomponents/react-maplibre 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js

@@ -1,3 +1,4 @@
+// @ts-ignore: TS export Problem to be fixed upstream
 import maplibregl from "maplibre-gl/dist/maplibre-gl";
 
 /**
@@ -91,7 +92,7 @@ const MapLibreGlWrapper = function (props) {
     /**
      * Array containing an object for each layer in the MapLibre instance providing information on visibility, loading state, order, paint & layout properties
      */
-    layerState: {},
+    layerState: [],
     /**
      * Maps layerIds to layerState in JSON string form for quick deep comparisons
      */
@@ -499,17 +500,17 @@ const MapLibreGlWrapper = function (props) {
     self.wrapper.refreshViewport();
     self.wrapper.fire("viewportchange");
 
-      self.map.on("move", () => {
-        self.wrapper.viewportState = self.wrapper.getViewport();
-        self.wrapper.fire("viewportchange");
-      });
-      self.map.on("data", () => {
-        self.wrapper.refreshLayerState();
-        self.wrapper.fire("layerchange");
-      });
-      if (typeof props.onReady === "function") {
-        props.onReady(self.map, self);
-      }
+    self.map.on("move", () => {
+      self.wrapper.viewportState = self.wrapper.getViewport();
+      self.wrapper.fire("viewportchange");
+    });
+    self.map.on("data", () => {
+      self.wrapper.refreshLayerState();
+      self.wrapper.fire("layerchange");
+    });
+    if (typeof props.onReady === "function") {
+      props.onReady(self.map, self);
+    }
   };
   initializeMapLibre();
 };

package/src/components/MlFollowGps/MlFollowGps.js

@@ -5,7 +5,7 @@ import {MapContext} from "@mapcomponents/react-core";
 import {v4 as uuidv4} from "uuid";
 import Button from "@mui/material/Button";
 import RoomIcon from "@mui/icons-material/Room";
-import {point} from "@turf/turf"
+import {point, circle} from "@turf/turf"
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
 
@@ -31,7 +31,7 @@ const MlFollowGps = (props) => {
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + uuidv4());
-  const [accuracyRadius, setAccuracyRadius] = useState(30);
+  const [accuracyGeoJson, setAccuracyGeoJson] = useState();
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -67,8 +67,9 @@ const MlFollowGps = (props) => {
   const getLocationSuccess = (pos) => {
     if (!mapRef.current) return;
     mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);
-    setAccuracyRadius(pos.coords.accuracy);
-    setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));
+    const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude])
+    setGeoJson(geoJsonPoint);
+    setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy/1000))
   };
 
   const getLocationError = (err) => {
@@ -80,29 +81,19 @@ const MlFollowGps = (props) => {
     <>
       {isFollowed && geoJson && (
         <MlGeoJsonLayer
-          geojson={geoJson}
-          type={"circle"}
+          geojson={accuracyGeoJson}
+          type={"fill"}
           paint={{
-            "circle-radius": {
-              stops: [
-                [0, 0],
-                [
-                  20,
-                  accuracyRadius /
-                    0.075 /
-                    Math.cos((geoJson.geometry.coordinates[1] * Math.PI) / 180),
-                ],
-              ],
-              base: 2,
-            },
-            "circle-color": "#ee7700",
-            "circle-opacity": 0.5,
+            "fill-color": "#ee7700",
+            "fill-opacity": 0.5,
           }}
+          insertBeforeLayer={"MlFollowGpsMarker"}
         />
       )}
 
       {isFollowed && geoJson && (
         <MlImageMarkerLayer
+          layerId={"MlFollowGpsMarker"}
           options={{
             type: "symbol",
             source: {
@@ -119,7 +110,7 @@ const MlFollowGps = (props) => {
       )}
 
       <Button
-        sx={{ zIndex: 1002, color: isFollowed ? "#bbb" : "#666", ...props.style }}
+        sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
         disabled={locationAccessDenied}
         onClick={() => {
           if (isFollowed) {
@@ -134,7 +125,7 @@ const MlFollowGps = (props) => {
         }}
       >
         {" "}
-        <RoomIcon sx={{fontSize: props.style.fontSize}}/>{" "}
+        <RoomIcon sx={{ fontSize: props.style.fontSize }} />{" "}
       </Button>
     </>
   );
@@ -156,6 +147,8 @@ MlFollowGps.defaultProps = {
       color: "#ececec",
     },
   },
+  onColor: "#ececec",
+  offColor: "#666"
 };
 
 MlFollowGps.propTypes = {
@@ -167,5 +160,13 @@ MlFollowGps.propTypes = {
    * CSS style object that is applied to the button component
    */
   style: PropTypes.object,
+  /**
+   * Active button font color
+   */
+  onColor: PropTypes.string,
+  /**
+   * Inactive button font color
+   */
+  offColor: PropTypes.string,
 };
 export default MlFollowGps;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
 import * as turf from "@turf/turf";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "../../hooks/useMapState";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
 
@@ -17,6 +18,14 @@ const msPerStep = 50;
 const MlGeoJsonLayer = (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 mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
   const oldGeojsonRef = useRef(null);
   const mapRef = useRef(null);
   const initializedRef = useRef(false);
@@ -114,6 +123,19 @@ const MlGeoJsonLayer = (props) => {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
     if (props.geojson) {
+      //check if insertBeforeLayer exists
+      if (props.insertBeforeLayer) {
+        let layerFound = false;
+
+        mapState?.layers?.forEach((layer) => {
+          if (layer.id === props.insertBeforeLayer) {
+            layerFound = true;
+          }
+        });
+        if (!layerFound) {
+          return;
+        }
+      }
       initializedRef.current = true;
       let geojson = props.geojson;
 
@@ -168,7 +190,7 @@ const MlGeoJsonLayer = (props) => {
         oldGeojsonRef.current = props.geojson;
       }
     }
-  }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
+  }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
 
   return <></>;
 };

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js

@@ -1,34 +1,18 @@
-import React, { useRef, useCallback, useEffect, useContext } from "react";
+import React, { useRef, useCallback, useEffect } from "react";
 
-import { v4 as uuidv4 } from "uuid";
-import { MapContext } from "@mapcomponents/react-core";
+import useMap from "../../hooks/useMap";
 
 const MlImageMarkerLayer = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapRef = useRef(null);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlImageMarkerLayer-") + uuidv4());
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
   const layerInitializedRef = useRef(false);
-  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef(props.layerId || componentId.current);
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-
-        mapRef.current = null;
-      }
-    };
-  }, []);
+  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !props.options
     )
       return;
@@ -38,19 +22,15 @@ const MlImageMarkerLayer = (props) => {
 
     if (props.options.layout) {
       for (key in props.options.layout) {
-        mapContext
-          .getMap(props.mapId)
-          .setLayoutProperty(layerId.current, key, props.options.layout[key]);
+        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
       }
     }
     if (props.options.paint) {
       for (key in props.options.paint) {
-        mapContext
-          .getMap(props.mapId)
-          .setPaintProperty(layerId.current, key, props.options.paint[key]);
+        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
       }
     }
-  }, [props.options, layerId.current, mapContext, props.mapId]);
+  }, [props.options, layerId.current, props.mapId]);
 
   const addLayer = useCallback(() => {
     let tmpOptions = {
@@ -59,50 +39,35 @@ const MlImageMarkerLayer = (props) => {
       ...props.options,
     };
     tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapRef.current.addLayer(
-      tmpOptions,
-      props.insertBeforeLayer,
-      componentId.current
-    );
-  }, [props]);
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+  }, [props, mapHook.mapIsReady, mapHook.map]);
 
   useEffect(() => {
-    if (
-      !props.options ||
-      !mapContext.mapExists(props.mapId) ||
-      layerInitializedRef.current
-    )
-      return;
-
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    mapRef.current = mapContext.getMap(props.mapId);
+    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
 
     layerInitializedRef.current = true;
 
-    console.log(props.imgSrc);
     if (props.imgSrc) {
-      mapRef.current.loadImage(props.imgSrc, function (error, image) {
+      mapHook.map.loadImage(props.imgSrc, function (error, image) {
         if (error) throw error;
-        mapRef.current.addImage(imageIdRef.current, image, componentId.current);
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
       });
     }
+
     addLayer();
-  }, [mapContext.mapIds, mapContext, props, addLayer]);
+  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !props.options
     ) {
       return;
     }
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
-    mapRef.current.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, mapContext, props]);
+    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
+  }, [props.options.source.data, props]);
 
   return <></>;
 };

package/src/components/MlLayer/MlLayer.js

@@ -2,15 +2,23 @@ import React, { useRef, useEffect, useContext } from "react";
 
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "../../hooks/useMapState";
 
 const MlLayer = (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 mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
   const layerInitializedRef = useRef(false);
   const mapRef = useRef(null);
-  const componentId = useRef(
-    (props.layerId ? props.layerId : "MlLayer-") + uuidv4()
-  );
+  const componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + uuidv4());
   const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   const layerId = useRef(props.layerId || componentId.current);
   const layerPaintConfRef = useRef(undefined);
@@ -60,6 +68,20 @@ const MlLayer = (props) => {
     // the MapLibre-gl instance (mapContext.map) is accessible here
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
+    //check if insertBeforeLayer exists
+    if (props.insertBeforeLayer) {
+      let layerFound = false;
+
+      mapState?.layers?.forEach((layer) => {
+        if (layer.id === props.insertBeforeLayer) {
+          layerFound = true;
+        }
+      });
+      if (!layerFound) {
+        return;
+      }
+    }
+
     mapRef.current = mapContext.getMap(props.mapId);
     if (mapRef.current) {
       layerInitializedRef.current = true;
@@ -78,7 +100,7 @@ const MlLayer = (props) => {
       layerPaintConfRef.current = JSON.stringify(props.options?.paint);
       layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
     }
-  }, [mapContext.mapIds, mapContext, props, layerId]);
+  }, [mapContext.mapIds, mapContext, props, mapState.layers]);
 
   return <></>;
 };

package/src/components/MlNavigationTools/MlNavigationTools.js

@@ -29,7 +29,6 @@ const MlNavigationTools = (props) => {
     minHeight: "20px",
     width: mediaIsMobile ? "50px" : "30px",
     height: mediaIsMobile ? "50px" : "30px",
-    color: "#bbb",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
@@ -38,8 +37,8 @@ const MlNavigationTools = (props) => {
     fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
-      color: "#ececec",
     },
+    color: "#ececec"
   };
 
   useEffect(() => {
@@ -144,7 +143,7 @@ const MlNavigationTools = (props) => {
       <Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}>
         <GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
       </Button>
-      <MlFollowGps style={buttonStyle}/>
+      <MlFollowGps style={{...(({color, ...rest}) => rest)(buttonStyle)}} />
       <ButtonGroup
         orientation="vertical"
         sx={{
@@ -154,10 +153,10 @@ const MlNavigationTools = (props) => {
           "Button:hover": {border: "none"},
         }}
       >
-        <Button sx={buttonStyle} onClick={zoomIn}>
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}>
           <ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
-        <Button sx={buttonStyle} onClick={zoomOut}>
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}>
           <RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
       </ButtonGroup>

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")}}} />
     </>
   );
 };