@mapcomponents/react-maplibre 0.1.16 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.16",
+  "version": "0.1.20",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",
@@ -12,7 +12,7 @@
     "@fontsource/roboto": "^4.5.1",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
-    "@mapcomponents/react-core": "^0.1.1",
+    "@mapcomponents/react-core": "^0.1.7",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "5.0.0",
     "@mui/styles": "^5.0.1",

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

@@ -69,6 +69,7 @@ const MapLibreGlWrapper = function (props) {
         if (!Object.is(item.handler, handler)) {
           return item;
         }
+        return false;
       });
     },
     /**
@@ -111,7 +112,7 @@ const MapLibreGlWrapper = function (props) {
       //if (self.baseLayers.indexOf(layer.id) === -1) {
       let paint = {};
       let values = layer.paint?._values;
-      Object.keys(values || {}).map((propName) => {
+      Object.keys(values || {}).forEach((propName) => {
         paint[propName] =
           typeof values[propName].value !== "undefined"
             ? values[propName].value.value
@@ -119,7 +120,7 @@ const MapLibreGlWrapper = function (props) {
       });
       let layout = {};
       values = layer.layout?._values;
-      Object.keys(values || {}).map((propName) => {
+      Object.keys(values || {}).forEach((propName) => {
         layout[propName] =
           typeof values[propName].value !== "undefined"
             ? values[propName].value.value

package/src/components/MlComponentTemplate/MlComponentTemplate.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import useMap from "../../hooks/useMap";
 
@@ -11,7 +11,7 @@ import useMap from "../../hooks/useMap";
  * @component
  */
 const MlComponentTemplate = (props) => {
-  const mapHook = useMap({mapId: props.mapId, waitForLayer: props.insertBeforeLayer});
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const initializedRef = useRef(false);
 
   useEffect(() => {
@@ -21,7 +21,7 @@ const MlComponentTemplate = (props) => {
     initializedRef.current = true;
 
     mapHook.map.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapHook.map, props.mapId]);
+  }, [mapHook.map, mapHook.mapIsReady, props.mapId]);
 
   return <></>;
 };

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -1,14 +1,16 @@
-import React, { useRef, useEffect, useContext, useCallback } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 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 useMap from "../../hooks/useMap";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
+import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
+import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 
 const msPerStep = 50;
+const legalLayerTypes = ["circle", "fill", "line"];
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
@@ -17,58 +19,46 @@ 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 mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const initializedRef = useRef(false);
+  const layerId = useRef(props.layerId || "MlGeoJsonLayer-" + mapHook.componentId);
+  const layerTypeRef = useRef(undefined);
+
+  // transition effect variables
+  const oldGeojsonRef = useRef(null);
   const transitionInProgressRef = useRef(false);
   const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
-  const componentId = useRef(
-    (props.layerId ? props.layerId : "MlGeoJsonLayer-") + (props.idSuffix || uuidv4())
-  );
-  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 (transitionTimeoutRef.current) {
         clearTimeout(transitionTimeoutRef.current);
       }
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-
-        mapRef.current = null;
-      }
     };
   }, []);
 
   useEffect(() => {
-    if (!mapRef.current || !initializedRef.current) return;
+    if (!mapHook.map || !initializedRef.current) return;
 
     for (var key in props.layout) {
-      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+      mapHook.map.setLayoutProperty(layerId.current, key, props.layout[key]);
     }
-  }, [props.layout, mapContext, props.mapId]);
+  }, [props.layout, mapHook.map, props.mapId]);
 
   useEffect(() => {
-    if (!mapRef.current || !initializedRef.current) return;
+    if (!mapHook.map || !initializedRef.current) return;
+
+    let _paint =
+      props.paint || getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides);
 
-    for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
+    for (var key in _paint) {
+      mapHook.map.setPaintProperty(layerId.current, key, _paint[key]);
     }
-  }, [props.paint, mapContext, props.mapId]);
+  }, [props.paint, mapHook.map, props.mapId, props.defaultPaintOverrides]);
 
   const transitionToGeojson = useCallback(
     (newGeojson) => {
@@ -81,18 +71,16 @@ const MlGeoJsonLayer = (props) => {
         oldGeojsonRef,
         msPerStep,
         currentTransitionStepRef,
-        mapRef.current,
-        componentId.current,
+        mapHook.map,
+        layerId.current,
         transitionTimeoutRef
       );
     },
-    [props]
+    [props, mapHook.map]
   );
 
   useEffect(() => {
-    if (!mapRef.current?.getSource?.(componentId.current) || !initializedRef.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
+    if (!mapHook?.map?.getSource(layerId.current) || !initializedRef.current) return;
 
     if (
       typeof props.transitionTime !== "undefined" &&
@@ -105,92 +93,96 @@ const MlGeoJsonLayer = (props) => {
       transitionGeojsonCommonDataRef.current = [];
       transitionToGeojson(props.geojson);
     } else {
-      mapRef.current.getSource(componentId.current).setData(props.geojson);
+      mapHook.map.getSource(layerId.current).setData(props.geojson);
     }
     oldGeojsonRef.current = props.geojson;
   }, [
     props.geojson,
     props.mapId,
-    mapContext,
+    mapHook.map,
     props.type,
     transitionToGeojson,
     props.transitionTime,
   ]);
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.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
+  const createLayer = useCallback(() => {
+    let geojson = props.geojson;
 
-    if (props.geojson) {
-      //check if insertBeforeLayer exists
-      if (props.insertBeforeLayer) {
-        let layerFound = false;
+    if (
+      props.type === "line" &&
+      typeof props.transitionTime !== "undefined" &&
+      props.transitionTime &&
+      typeof props.geojson.geometry !== "undefined"
+    ) {
+      var tmpChunks = turf.lineChunk(props.geojson, 0.01);
+      geojson = tmpChunks.features[0];
+    }
 
-        mapState?.layers?.forEach((layer) => {
-          if (layer.id === props.insertBeforeLayer) {
-            layerFound = true;
-          }
-        });
-        if (!layerFound) {
-          return;
-        }
-      }
-      initializedRef.current = true;
-      let geojson = props.geojson;
+    layerTypeRef.current = props.type || getDefaulLayerTypeByGeometry(props.geojson);
 
-      if (
-        props.type === "line" &&
-        typeof props.transitionTime !== "undefined" &&
-        props.transitionTime &&
-        typeof props.geojson.geometry !== "undefined"
-      ) {
-        var tmpChunks = turf.lineChunk(props.geojson, 0.01);
-        geojson = tmpChunks.features[0];
-      }
+    mapHook.map.addLayer(
+      {
+        id: layerId.current,
+        source: {
+          type: "geojson",
+          data: geojson,
+        },
+        type: layerTypeRef.current,
+        paint:
+          props.paint ||
+          getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides),
+        layout: props.layout || {},
+        ...props.options,
+      },
+      props.insertBeforeLayer,
+      mapHook.componentId
+    );
 
-      mapRef.current = mapContext.getMap(props.mapId);
+    if (typeof props.onHover !== "undefined") {
+      mapHook.map.on("mousemove", mapHook.componentId, props.onHover, mapHook.componentId);
+    }
 
-      mapRef.current.addLayer(
-        {
-          id: layerId.current,
-          source: {
-            type: "geojson",
-            data: geojson,
-          },
-          type: props.type || "line",
-          paint: props.paint || {
-            "line-color": "rgb(100,200,100)",
-            "line-width": 10,
-          },
-          layout: props.layout || {},
-        },
-        props.insertBeforeLayer,
-        componentId.current
-      );
+    if (typeof props.onClick !== "undefined") {
+      mapHook.map.on("click", mapHook.componentId, props.onClick, mapHook.componentId);
+    }
 
-      if (typeof props.onHover !== "undefined") {
-        mapRef.current.on("mousemove", componentId.current, props.onHover, componentId.current);
-      }
+    if (typeof props.onLeave !== "undefined") {
+      mapHook.map.on("mouseleave", mapHook.componentId, props.onLeave, mapHook.componentId);
+    }
 
-      if (typeof props.onClick !== "undefined") {
-        mapRef.current.on("click", componentId.current, props.onClick, componentId.current);
-      }
+    if (
+      props.type === "line" &&
+      typeof props.transitionTime !== "undefined" &&
+      typeof props.geojson.geometry !== "undefined"
+    ) {
+      transitionToGeojson(props.geojson);
+      oldGeojsonRef.current = props.geojson;
+    }
+  }, [mapHook.map, props, transitionToGeojson]);
 
-      if (typeof props.onLeave !== "undefined") {
-        mapRef.current.on("mouseleave", componentId.current, props.onLeave, componentId.current);
-      }
+  useEffect(() => {
+    if (!mapHook.mapIsReady || !props.geojson) return;
 
-      if (
-        props.type === "line" &&
-        typeof props.transitionTime !== "undefined" &&
-        typeof props.geojson.geometry !== "undefined"
-      ) {
-        transitionToGeojson(props.geojson);
-        oldGeojsonRef.current = props.geojson;
-      }
+    if (
+      initializedRef.current &&
+      legalLayerTypes.indexOf(props.type) !== -1 &&
+      layerTypeRef.current &&
+      props.type !== layerTypeRef.current
+    ) {
+      mapHook.map.cleanup(mapHook.componentId);
+    } else if (
+      initializedRef.current &&
+      (legalLayerTypes.indexOf(props.type) === -1 ||
+        (legalLayerTypes.indexOf(props.type) !== -1 && props.type === layerTypeRef.current))
+    ) {
+      return;
     }
-  }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
+
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    initializedRef.current = true;
+
+    createLayer();
+  }, [mapHook.mapIsReady, createLayer, props]);
 
   return <></>;
 };
@@ -221,6 +213,14 @@ MlGeoJsonLayer.propTypes = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
   paint: PropTypes.object,
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: PropTypes.object,
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options: PropTypes.object,
   /**
    * GeoJSON data that is supposed to be rendered by this component.
    */
@@ -252,11 +252,6 @@ MlGeoJsonLayer.propTypes = {
    * Only works with layer type "line" and LineString GeoJSON data.
    */
   transitionTime: PropTypes.number,
-  /**
-   * Id suffix string that is appended to the componentId.
-   * Probably removed soon.
-   */
-  idSuffix: PropTypes.string,
 };
 
 export default MlGeoJsonLayer;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -7,7 +7,9 @@ import { MapContext } from "@mapcomponents/react-core";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
+import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
+console.log(sample_polygon_geojson_1);
 const storyoptions = {
   title: "MapComponents/MlGeoJsonLayer",
   component: MlGeoJsonLayer,
@@ -20,6 +22,13 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (props) => {
+  return (
+    <>
+      <MlGeoJsonLayer {...props} />
+    </>
+  );
+};
+const LinestringTransitionTemplate = (props) => {
   const mapContext = useContext(MapContext);
   const [geojson, setGeojson] = useState(sample_geojson_1);
   const initializedRef = useRef(false);
@@ -28,9 +37,7 @@ const Template = (props) => {
     if (!mapContext.getMap() || initializedRef.current) return;
 
     initializedRef.current = true;
-    mapContext
-      .getMap()
-      .setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
+    mapContext.getMap().setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
     mapContext.getMap().setZoom(9.5);
 
     setTimeout(() => {
@@ -45,6 +52,28 @@ const Template = (props) => {
   );
 };
 
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+export const Linestring = LinestringTransitionTemplate.bind({});
+Linestring.parameters = {};
+Linestring.args = {};
+
+export const Polygon = Template.bind({});
+Polygon.parameters = {};
+Polygon.args = {
+  geojson: sample_polygon_geojson_1,
+};
+export const DefaultPaintOverrides = Template.bind({});
+DefaultPaintOverrides.parameters = {};
+DefaultPaintOverrides.args = {
+  defaultPaintOverrides: {
+    fill: {
+      "fill-color": "blue",
+    },
+    circle: {
+      "circle-color": "red",
+    },
+    line: {
+      "line-color": "orange",
+    },
+  },
+  geojson: sample_polygon_geojson_1,
+};

package/src/components/MlGeoJsonLayer/assets/sample_polygon_1.json

@@ -0,0 +1,33 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [7.08646747303149, 50.74485058672653],
+            [7.084287513691095, 50.74371917250187],
+            [7.084437772332876, 50.743610683782215],
+            [7.084640903561933, 50.743721758552354],
+            [7.085805654941254, 50.74293993704128],
+            [7.087023278906713, 50.74218320888983],
+            [7.087791368229503, 50.74258090834434],
+            [7.088796806075749, 50.743261830692745],
+            [7.089275088452752, 50.743701110992674],
+            [7.088087117762917, 50.74409411011173],
+            [7.087662548338368, 50.743784963165815],
+            [7.087184330538875, 50.7440368518605],
+            [7.087233860417484, 50.744077781245316],
+            [7.08714938625954, 50.744122118772154],
+            [7.087057544749172, 50.74427276821896],
+            [7.087104984084277, 50.744509715654885],
+            [7.08646747303149, 50.74485058672653]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.js

@@ -0,0 +1,25 @@
+const mapGeometryTypesToLayerTypes = {
+  Position: "circle",
+  Point: "circle",
+  MultiPoint: "circle",
+  LineString: "line",
+  MultiLineString: "line",
+  Polygon: "fill",
+  MultiPolygon: "fill",
+  GeometryCollection: "circle",
+};
+
+const getDefaulLayerTypeByGeometry = (geojson) => {
+  if (geojson?.type === "Feature") {
+    return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
+      ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
+      : "circle";
+  }
+  if (geojson?.type === "FeatureCollection") {
+    if (geojson.features.length) {
+      return getDefaulLayerTypeByGeometry(geojson.features[0]);
+    }
+    return "circle";
+  }
+};
+export default getDefaulLayerTypeByGeometry;

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js

@@ -0,0 +1,31 @@
+const getDefaultPaintPropsByType = (type, defaultPaintOverrides) => {
+  switch (type) {
+    case "fill":
+      if (defaultPaintOverrides?.fill) {
+        return defaultPaintOverrides.fill;
+      }
+      return {
+        "fill-color": "rgba(10,240,256,0.6)",
+      };
+    case "line":
+      if (defaultPaintOverrides?.line) {
+        return defaultPaintOverrides.line;
+      }
+      return {
+        "line-color": "rgb(100,200,100)",
+        "line-width": 5,
+      };
+    case "circle":
+    default:
+      if (defaultPaintOverrides?.circle) {
+        return defaultPaintOverrides.circle;
+      }
+      return {
+        "circle-color": "#44aaaa",
+        "circle-stroke-color": "#fff",
+        "circle-stroke-width": 2,
+      };
+  }
+};
+
+export default getDefaultPaintPropsByType;

package/src/components/MlLayer/MlLayer.js

@@ -19,7 +19,6 @@ const MlLayer = (props) => {
   const layerInitializedRef = useRef(false);
   const mapRef = useRef(null);
   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);
   const layerLayoutConfRef = useRef(undefined);

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -2,7 +2,6 @@
 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";
@@ -14,7 +13,6 @@ 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
  *

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

@@ -1,11 +1,10 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import React from "react";
 import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
 import MlLayerSwitcher from "./MlLayerSwitcher";
-import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer'
+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",
@@ -17,9 +16,7 @@ const storyoptions = {
   decorators: mapContextDecorator,
 };
 export default storyoptions;
-const layerId = "nw_uraufnahme_rw";
 const Template = (args) => {
-  const [geojson, setGeojson] = useState(sample_geojson_1);
   return (
     <>
       <MlWmsLayer
@@ -39,7 +36,7 @@ const Template = (args) => {
       <MlGeoJsonLayer
         type="line"
         layout={{ visibility: args.geojsonLayerVisible ? "visible" : "none" }}
-        geojson={geojson}
+        geojson={sample_geojson_1}
         layerId="geojson1"
       />
       <MlGeoJsonLayer

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

@@ -1,8 +1,7 @@
-import { React, useEffect, useState } from "react";
-import { css, cx } from "@emotion/css";
+import React from "react";
+import { css } from "@emotion/css";
 import { Box } from "@mui/system";
 import ImageLoader from "../../../ui_components/ImageLoader";
-import { propsToClassKey } from "@mui/styles";
 import useMapState from "../../../hooks/useMapState";
 
 /**
@@ -10,8 +9,6 @@ import useMapState from "../../../hooks/useMapState";
  *
  */
 const LayerBox = (props) => {
-  const [activeClassName, setActiveClassName] = useState("");
-  const [className, setClassName] = useState("mllayerswitcher-layer-box ");
   const { layers } = useMapState({
     mapId: props.mapId,
     watch: {
@@ -23,33 +20,12 @@ const LayerBox = (props) => {
       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 (
     <>

package/src/components/MlMarker/MlMarker.js

@@ -67,7 +67,6 @@ const MlMarker = (props) => {
   useEffect(() => {
     if (mapRef.current && iframe.current?.contentWindow?.document?.body?.scrollHeight) {
       setTimeout(() => {
-        let mapWidth = mapRef.current._container.clientWidth;
         let mapHeight = mapRef.current._container.clientHeight;
 
         const _pixelPos = mapRef.current.project([props.lng, props.lat]);
@@ -124,6 +123,7 @@ const MlMarker = (props) => {
             ref={iframe}
             sandbox="allow-same-origin allow-popups-to-escape-sandbox"
             frameBorder="0"
+            title={componentId.current}
           ></iframe>
         </Paper>
       )}