@mapcomponents/react-maplibre 0.1.32 → 0.1.35

package/src/hooks/useLayer.ts

@@ -0,0 +1,221 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+import useMap, { useMapType } from "./useMap";
+
+import { LayerSpecification } from "maplibre-gl";
+
+import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+
+type useLayerType = {
+  map: MapLibreGlWrapper | undefined;
+  layer: LayerSpecification;
+  layerId: string;
+  componentId: string;
+  mapHook: useMapType;
+};
+
+interface useLayerProps {
+  mapId?: string;
+  layerId?: string;
+  idPrefix?: string;
+  insertBeforeLayer?: string;
+  insertBeforeFirstSymbolLayer?: boolean;
+  geojson?: object;
+  options: LayerSpecification;
+  onHover?: Function;
+  onClick?: Function;
+  onLeave?: Function;
+}
+
+const legalLayerTypes = [
+  "fill",
+  "line",
+  "symbol",
+  "circle",
+  "heatmap",
+  "fill-extrusion",
+  "raster",
+  "hillshade",
+  "background",
+];
+
+function useLayer(props: useLayerProps): useLayerType {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  const layerTypeRef = useRef<string>("");
+  const layerPaintConfRef = useRef<string>("");
+  const layerLayoutConfRef = useRef<string>("");
+
+  const [layer, setLayer] = useState<any>();
+
+  const initializedRef = useRef<boolean>(false);
+  const layerId = useRef(
+    props.layerId ||
+      (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId
+  );
+
+  const createLayer = useCallback(() => {
+    if (initializedRef.current || !mapHook.map) return;
+    initializedRef.current = true;
+
+    mapHook.map.addLayer(
+      {
+        ...props.options,
+        ...(props.geojson
+          ? {
+              source: {
+                type: "geojson",
+                data: props.geojson,
+              },
+            }
+          : {}),
+        id: layerId.current,
+      },
+      props.insertBeforeLayer
+        ? props.insertBeforeLayer
+        : props.insertBeforeFirstSymbolLayer
+        ? mapHook.map.firstSymbolLayer
+        : undefined,
+      mapHook.componentId
+    );
+
+    setLayer(mapHook.map.map.getLayer(layerId.current));
+
+    if (typeof props.onHover !== "undefined") {
+      mapHook.map.on(
+        "mousemove",
+        layerId.current,
+        props.onHover,
+        mapHook.componentId
+      );
+    }
+
+    if (typeof props.onClick !== "undefined") {
+      mapHook.map.on(
+        "click",
+        layerId.current,
+        props.onClick,
+        mapHook.componentId
+      );
+    }
+
+    if (typeof props.onLeave !== "undefined") {
+      mapHook.map.on(
+        "mouseleave",
+        layerId.current,
+        props.onLeave,
+        mapHook.componentId
+      );
+    }
+
+    layerPaintConfRef.current = JSON.stringify(props.options?.paint);
+    layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
+    layerTypeRef.current = props.options.type;
+  }, [props, mapHook.map]);
+
+  useEffect(() => {
+    if (!mapHook.map) return;
+
+    if (
+      initializedRef.current &&
+      legalLayerTypes.indexOf(props.options.type) !== -1 &&
+      layerTypeRef.current &&
+      props.options.type !== layerTypeRef.current
+    ) {
+      // remove (cleanup) & reinitialize the layer if type has changed
+      cleanup();
+    } else if (
+      initializedRef.current &&
+      (legalLayerTypes.indexOf(props.options.type) === -1 ||
+        (legalLayerTypes.indexOf(props.options.type) !== -1 &&
+          props.options.type === layerTypeRef.current))
+    ) {
+      return;
+    }
+
+    createLayer();
+  }, [mapHook.map, props.options, createLayer]);
+
+  useEffect(() => {
+    if (
+      !initializedRef.current ||
+      !mapHook?.map?.map.getSource(layerId.current)
+    )
+      return;
+
+    // @ts-ignore
+    mapHook.map.map.getSource(layerId.current).setData(props.geojson);
+  }, [props.geojson, mapHook.map, props.options.type]);
+
+  useEffect(() => {
+    if (
+      !mapHook.map ||
+      !mapHook.map?.map?.getLayer?.(layerId.current) ||
+      !initializedRef.current
+    )
+      return;
+
+    var key;
+
+    let layoutString = JSON.stringify(props.options.layout);
+    if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
+      let oldLayout = JSON.parse(layerLayoutConfRef.current);
+
+      for (key in props.options.layout) {
+        if (
+          props.options.layout?.[key] &&
+          props.options.layout[key] !== oldLayout[key]
+        ) {
+          mapHook.map.map.setLayoutProperty(
+            layerId.current,
+            key,
+            props.options.layout[key]
+          );
+        }
+      }
+      layerLayoutConfRef.current = layoutString;
+    }
+
+    let paintString = JSON.stringify(props.options.paint);
+    if (paintString !== layerPaintConfRef.current) {
+      let oldPaint = JSON.parse(layerPaintConfRef.current);
+      for (key in props.options.paint) {
+        if (
+          props.options.paint?.[key] &&
+          props.options.paint[key] !== oldPaint[key]
+        ) {
+          mapHook.map.map.setPaintProperty(
+            layerId.current,
+            key,
+            props.options.paint[key]
+          );
+        }
+      }
+      layerPaintConfRef.current = paintString;
+    }
+  }, [props.options, mapHook.map]);
+
+  const cleanup = () => {
+    initializedRef.current = false;
+    mapHook.cleanup();
+  };
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return {
+    map: mapHook.map,
+    layer: layer,
+    layerId: layerId.current,
+    componentId: mapHook.componentId,
+    mapHook: mapHook,
+  };
+}
+
+export default useLayer;

package/src/hooks/{useMap.js → useMap.ts}

@@ -1,11 +1,30 @@
-import React, { useContext, useState, useEffect, useRef } from "react";
+import {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  MutableRefObject,
+} from "react";
 import { v4 as uuidv4 } from "uuid";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
 import useMapState from "./useMapState";
+import MapLibreGlWrapper, {
+  LayerState,
+} from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 
-function useMap(props) {
+type useMapType = {
+  map: MapLibreGlWrapper | undefined;
+  mapIsReady: boolean;
+  componentId: string;
+  layers: (LayerState | undefined)[];
+  cleanup: Function
+};
+
+function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+  const mapContext: MapContextType = useContext(MapContext);
+  const [map, setMap] = useState();
 
   const mapState = useMapState({
     mapId: props.mapId,
@@ -20,23 +39,24 @@ function useMap(props) {
   });
 
   const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
+  const mapRef: MutableRefObject<MapLibreGlWrapper | undefined> =
+    useRef(undefined);
 
   const componentId = useRef(uuidv4());
 
   const [mapIsReady, setMapIsReady] = useState(false);
 
-  useEffect(() => {
-    let _componentId = componentId.current;
+  const cleanup = () => {
+    if (mapRef.current) {
+      mapRef.current.cleanup(componentId.current);
+      mapRef.current = undefined;
+    }
+    initializedRef.current = false;
+    setMapIsReady(false);
+  };
 
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-      setMapIsReady(false);
-    };
+  useEffect(() => {
+    return cleanup;
   }, []);
 
   useEffect(() => {
@@ -47,7 +67,7 @@ function useMap(props) {
     if (props.waitForLayer) {
       let layerFound = false;
 
-      mapState?.layers?.forEach((layer) => {
+      mapState?.layers?.forEach((layer: any) => {
         if (layer.id === props.waitForLayer) {
           layerFound = true;
         }
@@ -60,15 +80,26 @@ function useMap(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);
+    // @ts-ignore
+    setMap(mapRef.current);
     setMapIsReady(true);
-  }, [mapContext.mapIds, mapState.layers, mapContext, props.waitForLayer, props.mapId]);
+  }, [
+    mapContext.mapIds,
+    mapState.layers,
+    mapContext,
+    props.waitForLayer,
+    props.mapId,
+  ]);
 
   return {
-    map: mapRef.current,
+    map: map,
     mapIsReady,
     componentId: componentId.current,
     layers: mapState.layers,
+    cleanup
   };
 }
 
 export default useMap;
+
+export type {useMapType};

package/src/hooks/{useMapState.js → useMapState.ts}

@@ -1,25 +1,53 @@
 import { useContext, useCallback, useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
-
+import MapLibreGlWrapper, {
+  LayerState,
+  ViewportState,
+} from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+
+type useMapStateType = {
+  layers: (LayerState | undefined)[];
+  viewport: ViewportState | undefined;
+};
+type MapContext = {
+  mapIds: [string?];
+  mapExists: Function;
+  maps: [];
+  getMap: Function;
+  setMap: Function;
+};
 /**
  * React hook that allows subscribing to map state changes
  *
  * @component
  */
-function useMapState(props) {
+function useMapState(props: {
+  mapId?: string;
+  watch?: {
+    layers?: boolean;
+    sources?: boolean;
+    viewport?: boolean;
+  };
+  filter?: {
+    includeBaseLayers?: boolean;
+    matchLayerIds?: RegExp | string;
+    matchSourceIds?: RegExp | string;
+  };
+}): useMapStateType {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+  const mapContext: MapContext = useContext(MapContext);
 
   const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
+  const mapRef = useRef<MapLibreGlWrapper>();
 
-  const [viewport, setViewport] = useState(undefined);
+  const [viewport, setViewport] = useState<ViewportState | undefined>();
   const viewportRef = useRef(undefined);
 
-  const [layers, setLayers] = useState(undefined);
-  const layersRef = useRef(undefined);
+  const [layers, setLayers] = useState<(LayerState | undefined)[]>([]);
+  const layersRef = useRef<string>();
   //const mapRef = useRef(props.map);
   const componentId = useRef(uuidv4());
 
@@ -49,6 +77,8 @@ function useMapState(props) {
   );
 
   const refreshLayerState = useCallback(() => {
+    if (!mapRef.current) return;
+
     let _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
     let _layerStateString = JSON.stringify(_layerState);
     if (layersRef.current !== _layerStateString) {
@@ -77,6 +107,11 @@ function useMapState(props) {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
 
+    if (!mapRef.current) {
+      initializedRef.current = false;
+      return;
+    }
+
     if (props?.watch?.viewport) {
       setViewport(mapRef.current.wrapper.viewportState);
 

package/src/{index.js → index.ts}

@@ -1,27 +1,34 @@
 export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
+export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
+export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
-export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
 export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
 export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
 export { default as MlLayer } from "./components/MlLayer/MlLayer";
-export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer";
 export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
 export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
-export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
-export { default as MlBasicComponent } from "./components/MlBasicComponent";
+
 export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
 export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe";
+
+export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
+export { default as MlMarker } from "./components/MlMarker/MlMarker";
+
 export { default as MlGPXViewer } from "./components/MlGPXViewer/MlGPXViewer";
 export { default as GeoJsonProvider } from "./components/MlGPXViewer/util/GeoJsonProvider";
 export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJsonContext";
-export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
-export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
-export { default as MlMarker } from "./components/MlMarker/MlMarker";
 
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile.js";
+
+export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
+export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
+
+export { default as useLayer } from "./hooks/useLayer";
 export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
-export { default as useWms } from "./hooks/useWms";
+export { default as useWms } from "./hooks/useWms.js";
+//

package/tsconfig.json

@@ -1,33 +1,27 @@
 {
   "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "build",
+    "outDir": "build/esm",
     "module": "esnext",
     "target": "es5",
-    "lib": [
-      "es6",
-      "dom",
-      "es2016",
-      "es2017"
-    ],
-    "sourceMap": true,
-    "jsx": "react-jsx",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "jsx": "react",
+    "declaration": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "src/custom.d.tsx"],
+  "exclude": ["node_modules", "lib"],
+  "typedocOptions": {
+    "entryPoints": ["src/index.ts"],
+    "out": "docs",
+  }
 }

package/.env

@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true

package/.storybook/main.bck.js

@@ -1,56 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-const { merge } = require("webpack-merge");
-
-function getPackageDir(filepath) {
-  let currDir = path.dirname(require.resolve(filepath));
-  while (true) {
-    if (fs.existsSync(path.join(currDir, "package.json"))) {
-      return currDir;
-    }
-    const { dir, root } = path.parse(currDir);
-    if (dir === root) {
-      throw new Error(
-        `Could not find package.json in the parent directories starting from ${filepath}.`
-      );
-    }
-    currDir = dir;
-  }
-}
-
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-  ],
-  webpackFinal: async (config, { configType }) => {
-    config.module.rules.push({
-      test: /\.(js)$/,
-      loader: require.resolve("babel-loader"),
-      options: {
-        plugins: ["@emotion"],
-      },
-    });
-
-    // split into more chunks
-    config.optimization = {
-      splitChunks: {
-        chunks: "all",
-        minSize: 30 * 1024, // 30KB
-        maxSize: 1024 * 1024, // 1MB
-      },
-    };
-
-    return merge(config, {
-      resolve: {
-        alias: {
-          "@emotion/core": getPackageDir("@emotion/react"),
-          "@emotion/styled": getPackageDir("@emotion/styled"),
-          "emotion-theming": getPackageDir("@emotion/react"),
-        },
-      },
-    });
-  },
-};

package/babel.config.json

@@ -1,4 +0,0 @@
-{
-  "plugins": ["@emotion"],
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/coverage/lcov-report/src/translations/english.js.html

@@ -1,94 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for src/translations/english.js</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/translations</a> english.js</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>0/0</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>0/1</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line low'></div>
-    <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">const english = <span class="cstat-no" title="statement not covered" >{</span>
-    "en": { "Layer": "Layer" }
-}
-export default english;</pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue Mar 15 2022 11:25:03 GMT+0000 (Coordinated Universal Time)
-            </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-