@mapcomponents/react-maplibre 0.1.20 → 0.1.24

package/dist/index.esm.js

@@ -331,7 +331,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
     /**
      * Maps layerIds to layerState in JSON string form for quick deep comparisons
      */
-    layerStateStrings: {},
+    layerStateString: "",
 
     /**
      * Previous Version of layerStateString
@@ -345,26 +345,30 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
      * @returns object
      */
     buildLayerObject: function buildLayerObject(layer) {
-      var _layer$paint, _layer$layout;
-
       //if (self.baseLayers.indexOf(layer.id) === -1) {
-      var paint = {};
-      var values = (_layer$paint = layer.paint) === null || _layer$paint === void 0 ? void 0 : _layer$paint._values;
-      Object.keys(values || {}).forEach(function (propName) {
-        paint[propName] = typeof values[propName].value !== "undefined" ? values[propName].value.value : values[propName];
-      });
-      var layout = {};
-      values = (_layer$layout = layer.layout) === null || _layer$layout === void 0 ? void 0 : _layer$layout._values;
-      Object.keys(values || {}).forEach(function (propName) {
-        layout[propName] = typeof values[propName].value !== "undefined" ? values[propName].value.value : values[propName];
-      });
+      //let paint = {};
+      //let values = layer.paint?._values;
+      //Object.keys(values || {}).map((propName) => {
+      //  paint[propName] =
+      //    typeof values[propName].value !== "undefined"
+      //      ? values[propName].value.value
+      //      : values[propName];
+      //});
+      //let layout = {};
+      //values = layer.layout?._values;
+      //Object.keys(values || {}).map((propName) => {
+      //  layout[propName] =
+      //    typeof values[propName].value !== "undefined"
+      //      ? values[propName].value.value
+      //      : values[propName];
+      //});
       return {
         id: layer.id,
         type: layer.type,
         visible: layer.visibility === "none" ? false : true,
-        baseLayer: self.baseLayers.indexOf(layer.id) !== -1,
-        paint: paint,
-        layout: layout //filter: layers[layerId].filter,
+        baseLayer: self.baseLayers.indexOf(layer.id) !== -1 //paint,
+        //layout,
+        //filter: layers[layerId].filter,
         //layout: layers[layerId].layout,
         //maxzoom: layers[layerId].maxzoom,
         //metadata: layers[layerId].metadata,
@@ -394,9 +398,11 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
      */
     refreshLayerState: function refreshLayerState() {
       self.wrapper.layerState = self.wrapper.buildLayerObjects();
-      self.wrapper.layerStateStrings = self.wrapper.layerState.map(function (el) {
-        return JSON.stringify(el);
-      });
+
+      if (JSON.stringify(self.wrapper.layerState) !== self.wrapper.layerStateString) {
+        self.wrapper.fire("layerchange");
+        self.wrapper.layerStateString = JSON.stringify(self.wrapper.layerState);
+      }
     },
 
     /**
@@ -733,16 +739,18 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
                 self.wrapper.viewportState = self.wrapper.getViewport();
                 self.wrapper.fire("viewportchange");
               });
+              self.map.on("idle", function () {
+                self.wrapper.refreshLayerState();
+              });
               self.map.on("data", function () {
                 self.wrapper.refreshLayerState();
-                self.wrapper.fire("layerchange");
               });
 
               if (typeof props.onReady === "function") {
                 props.onReady(self.map, self);
               }
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -1532,15 +1540,15 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     }, props.options), props.insertBeforeLayer, mapHook.componentId);
 
     if (typeof props.onHover !== "undefined") {
-      mapHook.map.on("mousemove", mapHook.componentId, props.onHover, mapHook.componentId);
+      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
     }
 
     if (typeof props.onClick !== "undefined") {
-      mapHook.map.on("click", mapHook.componentId, props.onClick, mapHook.componentId);
+      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
     }
 
     if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on("mouseleave", mapHook.componentId, props.onLeave, mapHook.componentId);
+      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
     }
 
     if (props.type === "line" && typeof props.transitionTime !== "undefined" && typeof props.geojson.geometry !== "undefined") {
@@ -2675,50 +2683,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,
@@ -2728,37 +2719,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; // toggle layer visibility by changing the layout object's visibility property
+        layerPaintConfsRef.current[key] = layerPaintConfString; // update changed layout property
 
-    if (props.visible) {
-      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "visible");
-    } else {
-      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "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);
 };
 
@@ -2825,29 +2818,16 @@ var defaultProps = {
  */
 
 var MlWmsLayer = function MlWmsLayer(props) {
-  var mapContext = useContext(MapContext);
-  var componentId = useRef(props.layerId || "MlWmsLayer-" + v4());
-  var mapRef = useRef(null);
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
   var initializedRef = useRef(false);
-  var layerId = useRef(props.layerId || componentId.current);
-  useEffect(function () {
-    var _componentId = componentId.current;
-    return function () {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = null;
-      }
-
-      initializedRef.current = false;
-    };
-  }, []);
+  var layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
   useEffect(function () {
     var _propsUrlParams2;
 
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    mapRef.current = mapContext.getMap(props.mapId);
-    if (!mapRef.current) return;
+    if (!mapHook.map || initializedRef.current) return;
     initializedRef.current = true;
 
     var _propsUrlParams;
@@ -2866,31 +2846,31 @@ var MlWmsLayer = function MlWmsLayer(props) {
 
     var urlParams = new URLSearchParams(urlParamsObj);
     var urlParamsStr = decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
-    mapRef.current.addSource(layerId.current, _objectSpread2({
+    mapHook.map.addSource(layerId.current, _objectSpread2({
       type: "raster",
       tiles: [_wmsUrl + "?" + urlParamsStr],
       tileSize: urlParamsObj.width,
       attribution: props.attribution
-    }, props.sourceOptions), componentId.current);
-    mapRef.current.addLayer(_objectSpread2({
+    }, props.sourceOptions), mapHook.componentId);
+    mapHook.map.addLayer(_objectSpread2({
       id: layerId.current,
       type: "raster",
-      source: componentId.current
-    }, props.layerOptions), props.insertBeforeLayer, componentId.current);
+      source: layerId.current
+    }, props.layerOptions), props.insertBeforeLayer, mapHook.componentId);
 
     if (!props.visible) {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [mapContext.mapIds, mapContext, props]);
+  }, [mapHook.map, props]);
   useEffect(function () {
-    if (!mapRef.current || !initializedRef.current) return; // toggle layer visibility by changing the layout object's visibility property
+    if (!mapHook.map || !initializedRef.current) return; // toggle layer visibility by changing the layout object's visibility property
 
     if (props.visible) {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "visible");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "visible");
     } else {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [props.visible]);
+  }, [props.visible, mapHook.map]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };