@mapcomponents/react-maplibre 0.1.35 → 0.1.38

package/docs-build/{vendors~main~dab50aa4.b0d58038.iframe.bundle.js.map → vendors~main~dab50aa4.277284e0.iframe.bundle.js.map}

@@ -1 +1 @@
-{"version":3,"file":"vendors~main~dab50aa4.b0d58038.iframe.bundle.js","sources":["webpack:///vendors~main~dab50aa4.b0d58038.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;AAuvRA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAuBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA;;;;;;;;AAwoBA;;;;;;;;;;;;;;;AAgCA;AAqBA;AACA;AAiCA;AACA;;;;;AAwmBA","sourceRoot":""}
+{"version":3,"file":"vendors~main~dab50aa4.277284e0.iframe.bundle.js","sources":["webpack:///vendors~main~dab50aa4.277284e0.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;AAuvRA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAuBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA;;;;;;;;AAwoBA;;;;;;;;;;;;;;;AAgCA;AAqBA;AACA;AAiCA;AACA;;;;;AAwmBA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.35",
+  "version": "0.1.38",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
@@ -17,18 +17,27 @@
     "build-catalogue-markdown-docs": "node scripts/build-catalogue-markdown-docs.js",
     "create-component": "./scripts/create-map-component.sh"
   },
-  "dependencies": {},
-  "devDependencies": {
-    "@babel/preset-react": "^7.16.7",
+  "dependencies": {
     "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
-    "@mapcomponents/react-core": "^0.1.7",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "5.5.3",
     "@mui/styles": "^5.5.3",
+    "@turf/turf": "^6.5.0",
+    "jspdf": "^2.5.1",
+    "maplibre-gl": "^2.1.7",
+    "react-i18next": "^11.14.3",
+    "three": "^0.139.1",
+    "uuid": "^8.3.2",
+    "wms-capabilities": "^0.5.1",
+    "xmldom": "^0.6.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@babel/preset-react": "^7.16.7",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
@@ -44,7 +53,6 @@
     "@storybook/theming": "^6.4.19",
     "@svgr/rollup": "^6.2.1",
     "@testing-library/react": "^12.1.2",
-    "@turf/turf": "^6.5.0",
     "@types/enzyme": "^3.10.11",
     "@types/mapbox__mapbox-gl-draw": "^1.2.3",
     "@types/mapbox__point-geometry": "^0.1.2",
@@ -57,6 +65,7 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^2.0.6",
     "babel-preset-react-app": "^10.0.1",
+    "d3": "^7.4.4",
     "docz": "^2.4.0",
     "enzyme": "^3.11.0",
     "glob": "^7.2.0",
@@ -66,14 +75,11 @@
     "jest-enzyme": "^7.1.2",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
-    "jspdf": "^2.5.1",
-    "maplibre-gl": "^2.1.7",
     "postcss": "^8.4.12",
     "react": "^17.0.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
     "react-dom": "^17.0.2",
-    "react-i18next": "^11.16.2",
     "rollup": "^2.70.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-import-css": "^3.0.3",
@@ -81,15 +87,11 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "showdown": "^2.0.3",
-    "three": "^0.139.1",
     "ts-jest": "^27.1.4",
     "typedoc": "^0.22.13",
     "typedoc-plugin-missing-exports": "^0.22.6",
     "typedoc-twilio-theme": "^1.0.1",
-    "typescript": "^4.6.3",
-    "uuid": "^8.3.2",
-    "wms-capabilities": "^0.5.1",
-    "xmldom": "^0.6.0"
+    "typescript": "^4.6.3"
   },
   "jest": {
     "roots": [
@@ -124,7 +126,8 @@
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
-      "^!maplibre-gl$": "<rootDir>/node_modules/maplibre-gl"
+      "^!maplibre-gl$": "<rootDir>/node_modules/maplibre-gl",
+      "d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
     },
     "moduleFileExtensions": [
       "web.js",

package/rollup.config.js

@@ -42,15 +42,14 @@ const config = {
     "d3",
     "@emotion/react",
     "@emotion/styled",
-    ...Object.keys(pkg.peerDependencies || pkg.devDependencies),
+    "@babel/helpers",
+    "jspdf",
+    ...Object.keys(pkg.dependencies),
+    ...Object.keys(pkg.peerDependencies),
+    ...Object.keys(pkg.devDependencies),
   ],
   inlineDynamicImports: true,
   onwarn: function (warning, warn) {
-    if (
-      warning.code === "CIRCULAR_DEPENDENCY" ||
-      warning.code === "THIS_IS_UNDEFINED"
-    )
-      return;
     warn(warning);
   },
 };

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import MapLibreMap from "./MapLibreMap";
-import { MapComponentsProvider } from "@mapcomponents/react-core";
+import { MapComponentsProvider } from "../../contexts/MapContext";
 
 const storyoptions = {
   title: "Core/MapLibreMap",

package/src/components/MapLibreMap/MapLibreMap.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MapLibreMap from "./MapLibreMap";
 
 const MapLibreMapTestComponent = (props) => {

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,10 +1,9 @@
-import React, { useRef, useEffect, useContext, FC } from "react";
+import React, { useRef, useEffect, useContext, FC,  RefObject } from "react";
 
-// @ts-ignore
-import { MapContext } from "@mapcomponents/react-core";
-// @ts-ignore
+import MapContext from "../../contexts/MapContext";
 import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
 
+import { MapOptions as MapOptionsType } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 type MapLibreMapProps = {
@@ -17,7 +16,7 @@ type MapLibreMapProps = {
    * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
    * available properties.
    */
-  options?: object;
+  options?: MapOptionsType;
   /**
    * css style definition passed to the map container DOM element
    */
@@ -29,6 +28,23 @@ const defaultProps: MapLibreMapProps = {
   options: {
     center: { lng: 8.607, lat: 53.1409349 },
     zoom: 11,
+    container: '',
+    style: {
+      version: 8,
+      name: "blank",
+      center: [0, 0],
+      zoom: 0,
+      sources: {},
+      layers: [
+        {
+          id: "background",
+          type: "background",
+          paint: {
+            "background-color": "rgba(80,0,0,0)",
+          },
+        },
+      ],
+    },
   },
 };
 
@@ -43,13 +59,13 @@ const defaultProps: MapLibreMapProps = {
  * @category Map components
  */
 const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
-  const map: any = useRef(null);
-  const mapContainer = useRef(null);
+  const map: any = useRef<MapLibreGlWrapper>(null);
+  const mapContainer = useRef<HTMLDivElement>();
 
-  const mapContext: any = useContext(MapContext);
+  const mapContext: any = useContext<MapContextType>(MapContext);
 
   const mapIdRef = useRef(props.mapId);
-  const mapOptions = props.options;
+  const initializedRef = useRef(false);
 
   useEffect(() => {
     let mapId = mapIdRef.current;
@@ -62,12 +78,15 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
   }, []);
 
   useEffect(() => {
+    if (initializedRef.current) return;
+
     if (mapContainer.current) {
+      initializedRef.current = true;
       map.current = new MapLibreGlWrapper({
-        // @ts-ignore
         mapOptions: {
+          style: '',
           container: mapContainer.current,
-          ...mapOptions,
+          ...props.options,
         },
         onReady: (map: any, wrapper: any) => {
           map.once("load", () => {
@@ -80,12 +99,9 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
         },
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mapContainer]);
+  }, [props.options, props.mapId]);
 
-  return (
-    <div ref={mapContainer} className="mapContainer" style={props.style} />
-  );
+  return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
 };
 
 MapLibreMap.defaultProps = defaultProps;

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, useState } from "react";
 import { mount } from "enzyme";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../../contexts/MapContext";
 import { v4 as uuidv4 } from "uuid";
 import MapLibreMap from "../MapLibreMap";
 

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

@@ -1,4 +1,4 @@
-import { Map, IControl, MapOptions } from "maplibre-gl";
+import { Map, IControl, MapOptions as MapOptionsType } from "maplibre-gl";
 
 type EventArgArray = [string, string | Function, Function?];
 type LayerState = {
@@ -64,7 +64,7 @@ class MapLibreGlWrapper {
   on: Function;
   cleanup: Function;
 
-  constructor(props: { mapOptions: MapOptions; onReady: Function }) {
+  constructor(props: { mapOptions: MapOptionsType; onReady: Function }) {
     // closure variable to safely point to the object context of the current MapLibreGlWrapper instance
     let self = this;
 

package/src/components/MlBasicComponent.js

@@ -1,7 +1,10 @@
 import React, { useEffect, useContext } from "react";
 
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../contexts/MapContext";
 
+/**
+ * This component is deprecated and will be removed in the next major release
+ */
 const MlBasicComponent = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   // without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MlFeatureEditor from "./MlFeatureEditor";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import maplibregl from "maplibre-gl/dist/maplibre-gl";

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -111,7 +111,6 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
       draw.current &&
       props.geojson?.geometry
     ) {
-      // @ts-ignore
       draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
   }, [props.geojson, drawToolsReady]);

package/src/components/MlFollowGps/MlFollowGps.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MlFollowGps from "./MlFollowGps";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 

package/src/components/MlLayer/MlLayer.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import MlLayer from "./MlLayer";
 

package/src/components/MlLayerMagnify/MlLayerMagnify.test.js

@@ -2,7 +2,7 @@ import MlLayerMagnify from "./MlLayerMagnify";
 
 import React, { useContext, useState } from "react";
 import { mount } from "enzyme";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 // Mapbox sync-move mockup

package/src/components/MlLayerMagnify/MlLayerMagnify.tsx

@@ -9,8 +9,7 @@ import React, {
 // @ts-ignore
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 import "./style.css";
-// @ts-ignore
-import { MapContext } from "@mapcomponents/react-core";
+import  MapContext  from "../../contexts/MapContext";
 
 interface MlLayerMagnifyProps {
   /**
@@ -35,7 +34,7 @@ interface MlLayerMagnifyProps {
 const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
   const mapContext:MapContextType = useContext(MapContext);
   const syncMoveInitializedRef = useRef(false);
-  const syncCleanupFunctionRef = useRef(null);
+  const syncCleanupFunctionRef = useRef(() => {});
 
   const [swipeX, setSwipeX] = useState('50');
   const swipeXRef = useRef('50');
@@ -72,10 +71,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
     return () => {
       window.removeEventListener("resize", _onResize);
-      if (typeof syncCleanupFunctionRef.current === 'function') {
-        // @ts-ignore
-        syncCleanupFunctionRef.current();
-      }
+      syncCleanupFunctionRef.current();
     };
   }, []);
 

package/src/components/MlLayerSwipe/MlLayerSwipe.test.js

@@ -2,7 +2,7 @@ import MlLayerSwipe from "./MlLayerSwipe";
 
 import React, { useContext, useState } from "react";
 import { mount } from "enzyme";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 // Mapbox sync-move mockup

package/src/components/MlLayerSwipe/MlLayerSwipe.tsx

@@ -8,8 +8,7 @@ import React, {
 // @ts-ignore
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 import "./style.css";
-// @ts-ignore
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 
 interface MlLayerSwipeProps {
   /**
@@ -32,7 +31,7 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
   const [swipeX, setSwipeX] = useState(50);
   const swipeXRef = useRef(0);
 
-  const syncCleanupFunctionRef = useRef(null);
+  const syncCleanupFunctionRef = useRef(() => {});
 
   const mapExists = useCallback(() => {
     if (!props.map1Id || !props.map2Id) {
@@ -46,10 +45,7 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
   }, [mapContext, props.map1Id, props.map2Id]);
 
   const cleanup = () => {
-    if (syncCleanupFunctionRef.current) {
-      // @ts-ignore
       syncCleanupFunctionRef.current();
-    }
   };
 
   const onMove = useCallback(
@@ -68,7 +64,6 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
       clientX -= bounds.x;
       let swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
 
-      console.log(swipeX_tmp);
       if (swipeXRef.current !== swipeX_tmp) {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -5,7 +5,7 @@ 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 MapContext from "../../contexts/MapContext";
 import LayerBox from "./components/LayerBox";
 import Divider from "@mui/material/Divider";
 import useMapState from "../../hooks/useMapState";

package/src/components/MlNavigationCompass/MlNavigationCompass.test.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from "react";
 import { mount, configure } from "enzyme";
 import { waitFor } from "@testing-library/react";
-import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
+import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
 import MlNavigationCompass from "./MlNavigationCompass";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import maplibregl from "maplibre-gl/dist/maplibre-gl";

package/src/components/MlShareMapState/MlShareMapState.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useContext, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 import { v4 as uuidv4 } from "uuid";
 import useMapState from "../../hooks/useMapState";
 

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useContext, useEffect } from "react";
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 import GeoJsonContext from "../MlGPXViewer/util/GeoJsonContext";
 import { polygon, lineString } from "@turf/helpers";
 import { distance, lineOffset } from "@turf/turf";
@@ -110,13 +110,7 @@ const MlSpatialElevationProfile = (props) => {
       props.insertBeforeLayer,
       componentId.current
     );
-  }, [
-    mapContext.mapIds,
-    props.insertBeforeLayer,
-    props.mapId,
-    dataSource,
-    mapContext,
-  ]);
+  }, [mapContext.mapIds, props.insertBeforeLayer, props.mapId, dataSource, mapContext]);
 
   useEffect(() => {
     if (!mapRef.current || !mapRef.current.getLayer(layerName.current)) return;
@@ -155,10 +149,7 @@ const MlSpatialElevationProfile = (props) => {
       if (line.geometry.coordinates[index + 1]) {
         const wayLength = distance(
           [coordinate[0], coordinate[1]],
-          [
-            line.geometry.coordinates[index + 1][0],
-            line.geometry.coordinates[index + 1][1],
-          ],
+          [line.geometry.coordinates[index + 1][0], line.geometry.coordinates[index + 1][1]],
           { units: "kilometers" }
         );
         let listLength = ~~((wayLength * 1000) / 10);
@@ -228,6 +219,6 @@ MlSpatialElevationProfile.propTypes = {
    * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
    */
   insertBeforeLayer: PropTypes.string,
-}
+};
 
 export default MlSpatialElevationProfile;

package/src/components/MlThreeJsLayer/MlThreeJsLayer.js

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useEffect, useState } from "react";
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 
 import Button from "@mui/material/Button";
 import maplibregl from "maplibre-gl";

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js

@@ -3,7 +3,7 @@ import React, { useState, useContext, useRef, useEffect } from "react";
 import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 import { v4 as uuidv4 } from "uuid";
 
 /**

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
 
-// @ts-ignore
-import { MapContext } from "@mapcomponents/react-core";
+import MapContext from "../../contexts/MapContext";
 import { v4 as uuidv4 } from "uuid";
 
 import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";