@mapcomponents/react-maplibre 0.1.21 → 0.1.25

package/dist/index.esm.js

@@ -1016,12 +1016,7 @@ function useMap(props) {
 
   useEffect(function () {
     var _componentId = componentId.current;
-    console.log("initialize maphook");
     return function () {
-      console.log("cleanup maphook");
-      console.log(_typeof(mapRef.current));
-      console.log(JSON.stringify(mapRef.current.style._order));
-
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = undefined;
@@ -1714,8 +1709,6 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(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
@@ -1742,8 +1735,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],
@@ -1754,14 +1745,6 @@ 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]);
@@ -1779,9 +1762,11 @@ 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, {
@@ -1791,21 +1776,15 @@ var MlFollowGps = function MlFollowGps(props) {
       "fill-color": "#ee7700",
       "fill-opacity": 0.5
     }, 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": "#ee9900",
+      "circle-radius": 5
+    }, props.circlePaint),
+    insertBeforeLayer: props.insertBeforeLayer
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: _objectSpread2({
       zIndex: 1002,
@@ -1870,16 +1849,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 = {
@@ -2688,50 +2662,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,
@@ -2741,42 +2698,39 @@ 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])) {
-        var layerConfString = JSON.stringify(props.layers[key].paint);
+      if (mapHook.map.getLayer(layerIdsRef.current[key])) {
+        // update changed paint property
+        var layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
-        if (layerConfString !== layerPaintConfsRef.current[key]) {
+        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]);
           }
         }
 
-        layerPaintConfsRef.current[key] = layerConfString;
-      }
-    }
-  }, [props.layers, props, mapContext]);
-  useEffect(function () {
-    if (!mapRef.current) return;
+        layerPaintConfsRef.current[key] = layerPaintConfString; // update changed layout property
 
-    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");
+        var layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+
+        if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
+          for (var layoutKey in props.layers[key].layout) {
+            mapHook.map.setLayoutProperty(layerIdsRef.current[key], layoutKey, props.layers[key].layout[layoutKey]);
+          }
         }
+
+        layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
-  }, [props.visible]);
+  }, [props.layers, mapHook.map]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
@@ -2796,11 +2750,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
    */