@mapcomponents/react-maplibre 0.1.42 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.42",
+  "version": "0.1.45",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",

package/src/hooks/useLayer.ts

@@ -57,7 +57,14 @@ function useLayer(props: useLayerProps): useLayerType {
   );
 
   const createLayer = useCallback(() => {
-    if (initializedRef.current || !mapHook.map) return;
+    if (!mapHook.map) return;
+
+    if (mapHook.map.map.getLayer(layerId.current)) {
+      mapHook.map.map.removeLayer(layerId.current);
+    }
+    if (mapHook.map.map.getSource(layerId.current)) {
+      mapHook.map.map.removeSource(layerId.current);
+    }
     initializedRef.current = true;
 
     mapHook.map.addLayer(
@@ -104,15 +111,6 @@ function useLayer(props: useLayerProps): useLayerType {
     if (!mapHook.map) return;
 
     if (
-      initializedRef.current &&
-      ((props.options.type && legalLayerTypes.indexOf(props.options.type) !== -1) ||
-        !props.options.type) &&
-      layerTypeRef.current &&
-      props.options.type !== layerTypeRef.current
-    ) {
-      // remove (cleanup) & reinitialize the layer if type has changed
-      cleanup();
-    } else if (
       initializedRef.current &&
       (legalLayerTypes.indexOf(props.options.type) === -1 ||
         (legalLayerTypes.indexOf(props.options.type) !== -1 &&
@@ -132,7 +130,12 @@ function useLayer(props: useLayerProps): useLayerType {
   }, [props.geojson, mapHook.map, props.options.type]);
 
   useEffect(() => {
-    if (!mapHook.map || !mapHook.map?.map?.getLayer?.(layerId.current) || !initializedRef.current)
+    if (
+      !mapHook.map ||
+      !mapHook.map?.map?.getLayer?.(layerId.current) ||
+      !initializedRef.current ||
+      props.options.type !== layerTypeRef.current
+    )
       return;
 
     var key;