@mapcomponents/react-maplibre 0.1.35 → 0.1.38

package/dist/index.esm.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef, useContext, useEffect, useState, useCallback, Children, isValidElement, cloneElement, useMemo } from 'react';
-import { MapContext } from '@mapcomponents/react-core';
+import React__default, { useState, useRef, useContext, useEffect, useCallback, Children, isValidElement, cloneElement, useMemo } from 'react';
 import { Map as Map$1, Popup } from 'maplibre-gl';
 import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
@@ -16,6 +15,7 @@ import syncMove from '@mapbox/mapbox-gl-sync-move';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import WMSCapabilities from 'wms-capabilities';
+import * as d3 from 'd3';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -108,6 +108,85 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
+var MapContext = React__default.createContext({});
+/**
+ * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
+MapComponentsProvider must be used one level higher than the first use of MapContext.
+ *
+ * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
+ */
+var MapComponentsProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(undefined), map = _b[0], setMap = _b[1];
+    var _c = useState([]), mapIds = _c[0], setMapIds = _c[1];
+    var mapIds_raw = useRef([]);
+    var maps = useRef({});
+    var removeMap = function (mapId) {
+        if (mapId) {
+            if (typeof maps.current[mapId] !== "undefined") {
+                delete maps.current[mapId];
+            }
+            var mapIdIndex = mapIds_raw.current.indexOf(mapId);
+            if (mapIdIndex > -1) {
+                mapIds_raw.current.splice(mapIdIndex, 1);
+            }
+            setMapIds(__spreadArray([], mapIds_raw.current, true));
+            if (mapIds.length === 1 && map) {
+                setMap(undefined);
+            }
+        }
+        else {
+            setMap(undefined);
+            removeMap("anonymous_map");
+        }
+    };
+    var setMapHandler = function (mapInstance) {
+        setMap(mapInstance);
+        if (mapIds.length === 0) {
+            var mapId = "anonymous_map";
+            setMapIds(__spreadArray(__spreadArray([], mapIds, true), [mapId], false));
+            maps.current[mapId] = mapInstance;
+        }
+    };
+    var value = {
+        map: map,
+        setMap: setMapHandler,
+        maps: maps.current,
+        mapIds: mapIds,
+        registerMap: function (mapId, mapInstance) {
+            if (mapId && mapInstance) {
+                maps.current[mapId] = mapInstance;
+                mapIds_raw.current.push(mapId);
+                setMapIds(__spreadArray([], mapIds_raw.current, true));
+                if (!map) {
+                    setMap(mapInstance);
+                }
+            }
+        },
+        removeMap: removeMap,
+        mapExists: function (mapId) {
+            if (mapId && Object.keys(maps.current).indexOf(mapId) === -1) {
+                return false;
+            }
+            else if (!mapId && !map) {
+                return false;
+            }
+            return true;
+        },
+        getMap: function (mapId) {
+            if (mapId && mapIds.indexOf(mapId) !== -1) {
+                return maps.current[mapId];
+            }
+            else if (!mapId && map) {
+                return map;
+            }
+            return null;
+        },
+    };
+    //@ts-ignore
+    return React__default.createElement(MapContext.Provider, { value: value }, children);
+};
+
 /**
  * Creates a MapLibre-gl-js instance and offers all of the native MapLibre functions and properties as well as additional functionality such as element registration & cleanup and more events.
  *
@@ -650,6 +729,23 @@ var defaultProps$2 = {
     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)",
+                    },
+                },
+            ],
+        },
     },
 };
 /**
@@ -664,10 +760,10 @@ var defaultProps$2 = {
  */
 var MapLibreMap = function (props) {
     var map = useRef(null);
-    var mapContainer = useRef(null);
+    var mapContainer = useRef();
     var mapContext = useContext(MapContext);
     var mapIdRef = useRef(props.mapId);
-    var mapOptions = props.options;
+    var initializedRef = useRef(false);
     useEffect(function () {
         var mapId = mapIdRef.current;
         return function () {
@@ -678,10 +774,12 @@ var MapLibreMap = function (props) {
         };
     }, []);
     useEffect(function () {
+        if (initializedRef.current)
+            return;
         if (mapContainer.current) {
+            initializedRef.current = true;
             map.current = new MapLibreGlWrapper({
-                // @ts-ignore
-                mapOptions: __assign({ container: mapContainer.current }, mapOptions),
+                mapOptions: __assign({ style: '', container: mapContainer.current }, props.options),
                 onReady: function (map, wrapper) {
                     map.once("load", function () {
                         if (props.mapId) {
@@ -694,9 +792,8 @@ var MapLibreMap = function (props) {
                 },
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mapContainer]);
-    return (React__default.createElement("div", { ref: mapContainer, className: "mapContainer", style: props.style }));
+    }, [props.options, props.mapId]);
+    return React__default.createElement("div", { ref: mapContainer, className: "mapContainer", style: props.style });
 };
 MapLibreMap.defaultProps = defaultProps$2;
 
@@ -881,22 +978,15 @@ 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: map,
         mapIsReady: mapIsReady,
         componentId: componentId.current,
         layers: mapState.layers,
-        cleanup: cleanup
+        cleanup: cleanup,
     };
 }
 
@@ -12080,7 +12170,6 @@ var MlFeatureEditor = function (props) {
         var _a;
         if (draw.current &&
             ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
-            // @ts-ignore
             draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
         }
     }, [props.geojson, drawToolsReady]);
@@ -12123,8 +12212,7 @@ function useLayer(props) {
     var layerLayoutConfRef = useRef("");
     var _a = useState(), layer = _a[0], setLayer = _a[1];
     var initializedRef = useRef(false);
-    var layerId = useRef(props.layerId ||
-        (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId);
+    var layerId = useRef(props.layerId || (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId);
     var createLayer = useCallback(function () {
         var _a, _b;
         if (initializedRef.current || !mapHook.map)
@@ -12175,26 +12263,22 @@ function useLayer(props) {
         createLayer();
     }, [mapHook.map, props.options, createLayer]);
     useEffect(function () {
-        var _a;
-        if (!initializedRef.current ||
-            !((_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getSource(layerId.current)))
+        var _a, _b, _c, _d;
+        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(layerId.current)))
             return;
-        // @ts-ignore
-        mapHook.map.map.getSource(layerId.current).setData(props.geojson);
+        //@ts-ignore setData only exists on GeoJsonSource
+        (_d = (_c = mapHook.map.map.getSource(layerId.current)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.geojson);
     }, [props.geojson, mapHook.map, props.options.type]);
     useEffect(function () {
         var _a, _b, _c, _d, _e;
-        if (!mapHook.map ||
-            !((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getLayer) === null || _c === void 0 ? void 0 : _c.call(_b, layerId.current)) ||
-            !initializedRef.current)
+        if (!mapHook.map || !((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getLayer) === null || _c === void 0 ? void 0 : _c.call(_b, layerId.current)) || !initializedRef.current)
             return;
         var key;
         var layoutString = JSON.stringify(props.options.layout);
         if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
             var oldLayout = JSON.parse(layerLayoutConfRef.current);
             for (key in props.options.layout) {
-                if (((_d = props.options.layout) === null || _d === void 0 ? void 0 : _d[key]) &&
-                    props.options.layout[key] !== oldLayout[key]) {
+                if (((_d = props.options.layout) === null || _d === void 0 ? void 0 : _d[key]) && props.options.layout[key] !== oldLayout[key]) {
                     mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
                 }
             }
@@ -12204,8 +12288,7 @@ function useLayer(props) {
         if (paintString !== layerPaintConfRef.current) {
             var oldPaint = JSON.parse(layerPaintConfRef.current);
             for (key in props.options.paint) {
-                if (((_e = props.options.paint) === null || _e === void 0 ? void 0 : _e[key]) &&
-                    props.options.paint[key] !== oldPaint[key]) {
+                if (((_e = props.options.paint) === null || _e === void 0 ? void 0 : _e[key]) && props.options.paint[key] !== oldPaint[key]) {
                     mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
                 }
             }
@@ -13452,7 +13535,7 @@ MlWmsLayer.propTypes = {
 var MlLayerMagnify = function (props) {
     var mapContext = useContext(MapContext);
     var syncMoveInitializedRef = useRef(false);
-    var syncCleanupFunctionRef = useRef(null);
+    var syncCleanupFunctionRef = useRef(function () { });
     var _a = useState('50'), swipeX = _a[0], setSwipeX = _a[1];
     var swipeXRef = useRef('50');
     var _b = useState('50'), swipeY = _b[0], setSwipeY = _b[1];
@@ -13482,10 +13565,7 @@ var MlLayerMagnify = function (props) {
         var _onResize = onResize.current;
         return function () {
             window.removeEventListener("resize", _onResize);
-            if (typeof syncCleanupFunctionRef.current === 'function') {
-                // @ts-ignore
-                syncCleanupFunctionRef.current();
-            }
+            syncCleanupFunctionRef.current();
         };
     }, []);
     var onMove = useCallback(function (e) {
@@ -13611,7 +13691,7 @@ var MlLayerSwipe = function (props) {
     var initializedRef = useRef(false);
     var _a = useState(50), swipeX = _a[0], setSwipeX = _a[1];
     var swipeXRef = useRef(0);
-    var syncCleanupFunctionRef = useRef(null);
+    var syncCleanupFunctionRef = useRef(function () { });
     var mapExists = useCallback(function () {
         if (!props.map1Id || !props.map2Id) {
             return false;
@@ -13622,10 +13702,7 @@ var MlLayerSwipe = function (props) {
         return true;
     }, [mapContext, props.map1Id, props.map2Id]);
     var cleanup = function () {
-        if (syncCleanupFunctionRef.current) {
-            // @ts-ignore
-            syncCleanupFunctionRef.current();
-        }
+        syncCleanupFunctionRef.current();
     };
     var onMove = useCallback(function (e) {
         if (!mapExists())
@@ -13639,7 +13716,6 @@ var MlLayerSwipe = function (props) {
                 : 0);
         clientX -= bounds.x;
         var 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;
@@ -18357,6 +18433,10 @@ MlOsmLayer.propTypes = {
   insertBeforeLayer: PropTypes.string
 };
 
+/**
+ * This component is deprecated and will be removed in the next major release
+ */
+
 var MlBasicComponent = function 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)
@@ -18484,5 +18564,67 @@ useWms.defaultProps = {
   }
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, useLayer, useMap, useMapState, useWms };
+var SimpleDataContext = /*#__PURE__*/React__default.createContext({});
+var SimpleDataContextProvider = SimpleDataContext.Provider;
+
+var SimpleDataProvider = function SimpleDataProvider(props) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  useEffect(function () {
+    if (!props.url) return;
+    var data_promise = null;
+
+    if (props.format === "json") {
+      data_promise = d3.json(props.url);
+    } else if (props.format === "csv") {
+      data_promise = d3.csv(props.url);
+    } else if (props.format === "xml") {
+      data_promise = d3.xml(props.url);
+    }
+
+    if (data_promise) {
+      data_promise.then(function (received_data) {
+        if (props.format === "xml") {
+          if (props.nodeType) {
+            var dataTmp = [];
+            received_data.querySelectorAll(props.nodeType).forEach(function (el) {
+              dataTmp.push(props.formatData(el));
+            });
+            setData(dataTmp);
+          }
+        } else {
+          if (props.data_property) {
+            received_data = received_data[props.data_property];
+          }
+
+          if (typeof props.formatData === "function") {
+            setData(received_data.map(props.formatData));
+          } else {
+            setData(received_data);
+          }
+        }
+
+        if (typeof props.onData === "function") {
+          props.onData();
+        }
+      });
+    }
+  }, [props.url, props]);
+  var value = {
+    data: data,
+    setData: setData
+  };
+  return /*#__PURE__*/React__default.createElement(SimpleDataContextProvider, {
+    value: value
+  }, props.children);
+};
+
+SimpleDataProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, useLayer, useMap, useMapState, useWms };
 //# sourceMappingURL=index.esm.js.map