@mapcomponents/react-maplibre 0.1.22 → 0.1.26

package/dist/index.esm.js

@@ -1651,66 +1651,6 @@ MlGeoJsonLayer.propTypes = {
   transitionTime: PropTypes.number
 };
 
-var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
-  var mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer
-  });
-  var layerInitializedRef = useRef(false);
-  var imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  var layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
-  useEffect(function () {
-    if (!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
-
-    var key;
-
-    if (props.options.layout) {
-      for (key in props.options.layout) {
-        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-      }
-    }
-
-    if (props.options.paint) {
-      for (key in props.options.paint) {
-        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-      }
-    }
-  }, [props.options, layerId.current, props.mapId]);
-  var addLayer = useCallback(function () {
-    var tmpOptions = _objectSpread2({
-      id: layerId.current,
-      layout: {}
-    }, props.options);
-
-    tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
-  }, [props, mapHook.mapIsReady, mapHook.map]);
-  useEffect(function () {
-    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
-    layerInitializedRef.current = true;
-
-    if (props.imgSrc) {
-      mapHook.map.loadImage(props.imgSrc, function (error, image) {
-        if (error) throw error;
-        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
-      });
-    }
-
-    addLayer();
-  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
-  useEffect(function () {
-    if (!mapHook.mapIsReady || mapHook.map && !mapHook.map.getLayer(layerId.current) || !props.options) {
-      return;
-    }
-
-    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, props]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-};
-
-var marker = "b556faa3bc6829d2.png";
-
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -1737,8 +1677,6 @@ var MlFollowGps = function MlFollowGps(props) {
       geoJson = _useState4[0],
       setGeoJson = _useState4[1];
 
-  var watchIdRef = useRef(undefined);
-
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
       locationAccessDenied = _useState6[0],
@@ -1749,17 +1687,14 @@ var MlFollowGps = function MlFollowGps(props) {
       accuracyGeoJson = _useState8[0],
       setAccuracyGeoJson = _useState8[1];
 
-  useEffect(function () {
-    return function () {
-      if (watchIdRef.current) {
-        navigator.geolocation.clearWatch(watchIdRef.current);
-        watchIdRef.current = undefined;
-      }
-    };
-  }, []);
   var getLocationSuccess = useCallback(function (pos) {
     if (!mapHook.map) return;
-    mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+    mapHook.map.flyTo({
+      center: [pos.coords.longitude, pos.coords.latitude],
+      zoom: 18,
+      speed: 1,
+      curve: 1
+    });
     var geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
     setGeoJson(geoJsonPoint);
     setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
@@ -1774,33 +1709,31 @@ var MlFollowGps = function MlFollowGps(props) {
     if (!mapHook.map) return;
 
     if (isFollowed) {
-      watchIdRef.current = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
-    } else {
-      navigator.geolocation.clearWatch(watchIdRef.current);
+      var _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+
+      return function () {
+        navigator.geolocation.clearWatch(_watchId);
+      };
     }
   }, [isFollowed, getLocationSuccess]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, {
     geojson: accuracyGeoJson,
     type: "fill",
     paint: _objectSpread2({
-      "fill-color": "#ee7700",
-      "fill-opacity": 0.5
+      "fill-color": "#cbd300",
+      "fill-opacity": 0.3
     }, props.accuracyPaint),
-    insertBeforeLayer: "MlFollowGpsMarker"
-  }), isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlImageMarkerLayer, {
-    layerId: "MlFollowGpsMarker",
-    options: {
-      type: "symbol",
-      source: {
-        type: "geojson",
-        data: geoJson
-      },
-      layout: _objectSpread2({
-        "icon-size": 0.1,
-        "icon-offset": [0, -340]
-      }, props.markerLayout)
-    },
-    imgSrc: props.markerImage || marker
+    insertBeforeLayer: props.insertBeforeLayer
+  }), isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, {
+    geojson: geoJson,
+    type: "circle",
+    paint: _objectSpread2({
+      "circle-color": "#009ee0",
+      "circle-radius": 5,
+      "circle-stroke-color": "#fafaff",
+      "circle-stroke-width": 1
+    }, props.circlePaint),
+    insertBeforeLayer: props.insertBeforeLayer
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: _objectSpread2({
       zIndex: 1002,
@@ -1865,16 +1798,11 @@ MlFollowGps.propTypes = {
   accuracyPaint: PropTypes.object,
 
   /**
-   * Marker layout property object, that is passed to the MlImageMarkerLayer responsible for drawing the position marker.
-   * Use any available layout property from layer type "symbol".
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
-   */
-  markerLayout: PropTypes.object,
-
-  /**
-   * Replace the default marker image with a custom one.
+   * position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Use any available paint prop from layer type "fill".
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  markerImage: PropTypes.string
+  circlePaint: PropTypes.object
 };
 
 var nmMap = {
@@ -2064,6 +1992,64 @@ MlCreatePdfButton.propTypes = {
   mapId: PropTypes.string
 };
 
+var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
+  var layerInitializedRef = useRef(false);
+  var imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
+  var layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
+  useEffect(function () {
+    if (!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
+
+    var key;
+
+    if (props.options.layout) {
+      for (key in props.options.layout) {
+        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
+      }
+    }
+
+    if (props.options.paint) {
+      for (key in props.options.paint) {
+        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
+      }
+    }
+  }, [props.options, layerId.current, props.mapId]);
+  var addLayer = useCallback(function () {
+    var tmpOptions = _objectSpread2({
+      id: layerId.current,
+      layout: {}
+    }, props.options);
+
+    tmpOptions.layout["icon-image"] = imageIdRef.current;
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+  }, [props, mapHook.mapIsReady, mapHook.map]);
+  useEffect(function () {
+    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
+    layerInitializedRef.current = true;
+
+    if (props.imgSrc) {
+      mapHook.map.loadImage(props.imgSrc, function (error, image) {
+        if (error) throw error;
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+      });
+    }
+
+    addLayer();
+  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
+  useEffect(function () {
+    if (!mapHook.mapIsReady || mapHook.map && !mapHook.map.getLayer(layerId.current) || !props.options) {
+      return;
+    }
+
+    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
+  }, [props.options.source.data, props]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+};
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function SvgRotateRight(props) {
@@ -2683,51 +2669,33 @@ MlOsmLayer.propTypes = {
  */
 
 var MlVectorTileLayer = function MlVectorTileLayer(props) {
-  var mapContext = useContext(MapContext);
-  var layerName = "vector-tile-layer-";
-  var sourceName = "vector-tile-source-";
-  var idSuffixRef = useRef(new Date().getTime());
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
   var layerIdsRef = useRef({});
+  var layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
   var layerPaintConfsRef = useRef({});
   var layerLayoutConfsRef = useRef({});
   var initializedRef = useRef(false);
-  var mapRef = useRef(null);
-
-  var cleanup = function cleanup() {
-    if (mapRef.current && mapRef.current.style) {
-      for (var key in layerIdsRef.current) {
-        if (mapRef.current.getLayer(layerIdsRef.current[key])) {
-          mapRef.current.removeLayer(layerIdsRef.current[key]);
-        }
-      }
-
-      if (mapRef.current.getSource(sourceName + idSuffixRef.current)) {
-        mapRef.current.removeSource(sourceName + idSuffixRef.current);
-      }
-    }
-  };
-
-  useEffect(function () {
-    return cleanup;
-  }, []);
   useEffect(function () {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId); // Add the new layer to the openlayers instance once it is available
+    if (!mapHook.map || initializedRef.current) return;
+    initializedRef.current = true; // Add the new layer to the openlayers instance once it is available
 
-    mapRef.current.addSource(sourceName + idSuffixRef.current, _objectSpread2({
+    mapHook.map.addSource(layerId.current, _objectSpread2({
       type: "vector",
       tiles: [props.url],
       tileSize: 512,
       attribution: ""
-    }, props.sourceOptions));
+    }, props.sourceOptions), mapHook.componentId);
 
     for (var key in props.layers) {
-      var layerId = layerName + "_" + key + "_" + idSuffixRef.current;
-      layerIdsRef.current[key] = layerId;
-      mapRef.current.addLayer(_objectSpread2({
-        id: layerId,
-        source: sourceName + idSuffixRef.current,
+      var _layerId = layerId.current + "_" + key;
+
+      layerIdsRef.current[key] = _layerId;
+      mapHook.map.addLayer(_objectSpread2({
+        id: _layerId,
+        source: layerId.current,
         type: "line",
         minzoom: 0,
         maxzoom: 22,
@@ -2737,23 +2705,22 @@ var MlVectorTileLayer = function MlVectorTileLayer(props) {
           "line-color": "rgb(80, 80, 80)",
           "line-width": 2
         }
-      }, props.layers[key]));
+      }, props.layers[key]), props.insertBeforeLayer, mapHook.componentId);
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
       layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
     }
-  }, [mapContext.mapIds, props, mapContext]);
+  }, [mapHook.map, props]);
   useEffect(function () {
-    if (!mapRef.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 || !initializedRef.current) return; // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
     for (var key in props.layers) {
-      if (mapRef.current.getLayer(layerIdsRef.current[key])) {
+      if (mapHook.map.getLayer(layerIdsRef.current[key])) {
         // update changed paint property
         var layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
         if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
           for (var paintKey in props.layers[key].paint) {
-            mapContext.getMap(props.mapId).setPaintProperty(layerIdsRef.current[key], paintKey, props.layers[key].paint[paintKey]);
+            mapHook.map.setPaintProperty(layerIdsRef.current[key], paintKey, props.layers[key].paint[paintKey]);
           }
         }
 
@@ -2763,28 +2730,14 @@ var MlVectorTileLayer = function MlVectorTileLayer(props) {
 
         if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
           for (var layoutKey in props.layers[key].layout) {
-            mapContext.getMap(props.mapId).setLayoutProperty(layerIdsRef.current[key], layoutKey, props.layers[key].layout[layoutKey]);
+            mapHook.map.setLayoutProperty(layerIdsRef.current[key], layoutKey, props.layers[key].layout[layoutKey]);
           }
         }
 
         layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
-  }, [props.layers, props, mapContext]);
-  useEffect(function () {
-    if (!mapRef.current) return;
-
-    for (var key in props.layers) {
-      if (mapRef.current.getLayer(layerIdsRef.current[key])) {
-        // toggle layer visibility by changing the layout object's visibility property
-        if (props.visible) {
-          mapContext.getMap(props.mapId).setLayoutProperty(layerIdsRef.current[key], "visibility", "visible");
-        } else {
-          mapContext.getMap(props.mapId).setLayoutProperty(layerIdsRef.current[key], "visibility", "none");
-        }
-      }
-    }
-  }, [props.visible]);
+  }, [props.layers, mapHook.map]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
@@ -2804,11 +2757,6 @@ MlVectorTileLayer.propTypes = {
    */
   layers: PropTypes.object,
 
-  /**
-   * Boolean value to control the visibility of this layer
-   */
-  visible: PropTypes.bool,
-
   /**
    * String of the URL of a wms layer
    */