@mapcomponents/react-maplibre 0.1.59 → 0.1.60

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
 export { default as useWms } from "./hooks/useWms.js";
 export { default as useSource } from "./hooks/useSource";
-export { default as useExportMap } from "./hooks/exportMap";
+export { default as useExportMap } from "./hooks/useExportMap";
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";
 export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";

package/dist/index.esm.js

@@ -10621,7 +10621,7 @@ var createExport = function (options) {
         _loop_1(name_1);
     }
     // Create a new MapLibre-gl instance
-    var renderMap = new Map$2({
+    var renderMap = new Map$1({
         container: container,
         center: options.map.map.getCenter(),
         zoom: options.map.map.getZoom(),
@@ -10698,7 +10698,7 @@ function downloadPdf(options) {
     });
 }
 
-function exportMap(props) {
+function useExportMap(props) {
     var mapHook = useMap({ mapId: props.mapId });
     var _createExport = useMemo(function () {
         if (mapHook.map) {
@@ -10733,7 +10733,7 @@ function PdfForm(props) {
         // eslint-disable-next-line react/prop-types
         mapId: props.mapId,
     });
-    var mapExporter = exportMap({ mapId: props.mapId });
+    var mapExporter = useExportMap({ mapId: props.mapId });
     var createPdfHandler = useCallback(function () {
         var _a, _b, _c, _d, _e;
         if (mapHook.map &&
@@ -14269,89 +14269,84 @@ var MlVectorTileLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var layerIdsRef = useRef({});
-    var layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+    var layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
     var layerPaintConfsRef = useRef({});
     var layerLayoutConfsRef = useRef({});
     var initializedRef = useRef(false);
-    var createLayer = useCallback(function () {
+    var createLayers = useCallback(function () {
         if (!mapHook.map)
             return;
         initializedRef.current = true;
-        if (mapHook.map.map.getLayer(layerId.current)) {
+        if (mapHook.map.map.getSource(layerId.current)) {
             mapHook.cleanup();
         }
-        // Add the new layer to the openlayers instance once it is available
-        mapHook.map.addSource(layerId.current, __assign({ type: "vector", tiles: [props.url], tileSize: 512, attribution: "" }, props.sourceOptions), mapHook.componentId);
-        for (var key in props.layers) {
-            var _layerId = layerId.current + "_" + key;
-            layerIdsRef.current[key] = _layerId;
-            mapHook.map.addLayer(__assign({ id: _layerId, source: layerId.current, type: "line", minzoom: 0, maxzoom: 22, layout: {}, paint: {
-                    "line-opacity": 0.5,
-                    "line-color": "rgb(80, 80, 80)",
-                    "line-width": 2,
-                } }, 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);
+        // Add the new layer to the maplibre instance once it is available
+        mapHook.map.addSource(layerId.current, __assign({ type: 'vector', tiles: [props.url], tileSize: 512, attribution: '' }, props.sourceOptions), mapHook.componentId);
+        props.layers.forEach(function (layer) {
+            if (!mapHook.map)
+                return;
+            mapHook.map.addLayer(__assign({ source: layerId.current, minzoom: 0, maxzoom: 22, layout: {}, paint: {
+                    'line-opacity': 0.5,
+                    'line-color': 'rgb(80, 80, 80)',
+                    'line-width': 2,
+                } }, layer), props.insertBeforeLayer, mapHook.componentId);
+            layerPaintConfsRef.current[layer.id] = JSON.stringify(layer.paint);
+            layerLayoutConfsRef.current[layer.id] = JSON.stringify(layer.layout);
             // recreate layer if style has changed
-            mapHook.map.on("styledata", function () {
+            mapHook.map.on('styledata', function () {
                 var _a;
                 if (initializedRef.current && !((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getSource(layerId.current))) {
-                    console.log("Recreate Layer " + layerId.current);
-                    createLayer();
+                    console.log('Recreate Layer ' + layerId.current);
+                    createLayers();
                 }
             }, mapHook.componentId);
-        }
+        });
     }, [mapHook.map, props]);
-    useEffect(function () {
-        if (initializedRef.current)
+    var updateLayers = useCallback(function () {
+        if (!initializedRef.current)
             return;
-        createLayer();
-    }, [createLayer]);
-    useEffect(function () {
-        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 (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
+        props.layers.forEach(function (layer) {
+            if (!mapHook.map)
+                return;
+            if (mapHook.map.map.getLayer(layer.id)) {
                 // 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) {
-                        mapHook.map.map.setPaintProperty(layerIdsRef.current[key], paintKey, props.layers[key].paint[paintKey]);
+                var layerPaintConfString = JSON.stringify(layer.paint);
+                if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
+                    for (var paintKey in layer.paint) {
+                        mapHook.map.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);
                     }
                 }
-                layerPaintConfsRef.current[key] = layerPaintConfString;
+                layerPaintConfsRef.current[layer.id] = layerPaintConfString;
                 // update changed layout property
-                var layerLayoutConfString = JSON.stringify(props.layers[key].layout);
-                if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
-                    for (var layoutKey in props.layers[key].layout) {
-                        mapHook.map.map.setLayoutProperty(layerIdsRef.current[key], layoutKey, props.layers[key].layout[layoutKey]);
+                var layerLayoutConfString = JSON.stringify(layer.layout);
+                if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
+                    for (var layoutKey in layer.layout) {
+                        mapHook.map.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);
                     }
                 }
-                layerLayoutConfsRef.current[key] = layerLayoutConfString;
+                layerLayoutConfsRef.current[layer.id] = layerLayoutConfString;
             }
-        }
+        });
+    }, [mapHook.map, props.layers]);
+    // initial layer creation
+    useEffect(function () {
+        if (initializedRef.current)
+            return;
+        createLayers();
+    }, [createLayers]);
+    // if layers get removed or added
+    useEffect(function () {
+        if (!mapHook.map || !initializedRef.current)
+            return;
+        createLayers();
+    }, [props.layers.length, mapHook.map]);
+    // on layout/paint update
+    useEffect(function () {
+        if (!mapHook.map || !initializedRef.current)
+            return;
+        updateLayers();
     }, [props.layers, mapHook.map]);
     return React__default.createElement(React__default.Fragment, null);
-};
-MlVectorTileLayer.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-    /**
-     * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-     */
-    sourceOptions: PropTypes.object,
-    /**
-     * Object that hold layers
-     */
-    layers: PropTypes.object,
-    /**
-     * String of the URL of a wms layer
-     */
-    url: PropTypes.string,
 };
 
 var defaultProps = {
@@ -19745,5 +19740,5 @@ SimpleDataProvider.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, exportMap as useExportMap, useLayer, useMap, useMapState, useSource, useWms };
+export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, useExportMap, useLayer, useMap, useMapState, useSource, useWms };
 //# sourceMappingURL=index.esm.js.map