@mapcomponents/react-maplibre 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

package/src/components/MlVectorTileLayer/MlVectorTileLayer.js

@@ -16,6 +16,7 @@ const MlVectorTileLayer = (props) => {
   const idSuffixRef = useRef(new Date().getTime());
   const layerIdsRef = useRef({});
   const layerPaintConfsRef = useRef({});
+  const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
   const mapRef = useRef(null);
 
@@ -70,6 +71,7 @@ const MlVectorTileLayer = (props) => {
         ...props.layers[key],
       });
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
+      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
     }
   }, [mapContext.mapIds, props, mapContext]);
 
@@ -79,9 +81,10 @@ const MlVectorTileLayer = (props) => {
     // 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])) {
-        let layerConfString = JSON.stringify(props.layers[key].paint);
+        // update changed paint property
+        let layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
-        if (layerConfString !== layerPaintConfsRef.current[key]) {
+        if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
           for (let paintKey in props.layers[key].paint) {
             mapContext
               .getMap(props.mapId)
@@ -92,7 +95,23 @@ const MlVectorTileLayer = (props) => {
               );
           }
         }
-        layerPaintConfsRef.current[key] = layerConfString;
+        layerPaintConfsRef.current[key] = layerPaintConfString;
+
+        // update changed layout property
+        let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+
+        if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
+          for (let layoutKey in props.layers[key].layout) {
+            mapContext
+              .getMap(props.mapId)
+              .setLayoutProperty(
+                layerIdsRef.current[key],
+                layoutKey,
+                props.layers[key].layout[layoutKey]
+              );
+          }
+        }
+        layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
   }, [props.layers, props, mapContext]);

package/src/hooks/useMap.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useEffect, useRef } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
 import useMapState from "./useMapState";
@@ -25,12 +25,8 @@ function useMap(props) {
 
   useEffect(() => {
     let _componentId = componentId.current;
-    console.log("initialize maphook");
 
     return () => {
-      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;