@mapcomponents/react-maplibre 0.1.58 → 0.1.60

package/package.json

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

package/src/components/MlCreatePdfForm/MlCreatePdfForm.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PdfPreview from './lib/PdfPreview';
 import PdfForm from './lib/PdfForm';
 import { PdfContextProvider } from './lib/PdfContext';
-import { createPdfResolverParams } from '../../hooks/exportMap/lib';
+import { createPdfResolverParams } from '../../hooks/useExportMap/lib';
 import { SxProps } from '@mui/material';
 
 interface MlCreatePdfFormProps {

package/src/components/MlCreatePdfForm/lib/PdfForm.tsx

@@ -13,8 +13,8 @@ import {
 } from '@mui/material';
 
 import useMap from '../../../hooks/useMap';
-import exportMap from '../../../hooks/exportMap';
-import { createPdfResolverParams } from '../../../hooks/exportMap/lib';
+import useExportMap from '../../../hooks/useExportMap';
+import { createPdfResolverParams } from '../../../hooks/useExportMap/lib';
 
 import * as turf from '@turf/turf';
 
@@ -49,7 +49,7 @@ export default function PdfForm(props:PdfFormProps) {
 		// eslint-disable-next-line react/prop-types
 		mapId: props.mapId,
 	});
-	const mapExporter = exportMap({ mapId: props.mapId });
+	const mapExporter = useExportMap({ mapId: props.mapId });
 
 	const createPdfHandler = useCallback(() => {
 		if (

package/src/components/MlVectorTileLayer/MlVectorTileLayer.stories.js

@@ -28,16 +28,22 @@ ExampleConfig.args = {
 	mapId: "map_1",
 	url:
 		"https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-	layers: {
-		landuseLine: {
-			"source-layer": "landuse",
-			layout: {
-				"line-cap": "round",
-				"line-join": "round",
-			},
-			paint: { "line-width": 2, "line-color": "#ff0000" },
+	layers: [
+		{
+			id: "water",
+			type: "fill",
+			"source-layer": "water",
+			layout: {},
+			paint: { "fill-color": "#0905f5", "fill-opacity": 0.5 },
 		},
-	},
+		{
+			id: "buildings",
+			type: "fill",
+			"source-layer": "building",
+			layout: {},
+			paint: { "fill-color": "#717875" },
+		},
+	],
 	sourceOptions: {
 		minzoom: 0,
 		maxzoom: 20,

package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js

@@ -1,5 +1,5 @@
 import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
+import React from 'react'
 import MlVectorTileLayer from "./MlVectorTileLayer";
 import { uuid_regex } from "../../setupTests";
 
@@ -7,8 +7,9 @@ const testComponent = (
 	<MlVectorTileLayer
 		{...{
 			url: "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-			layers: {
-				landuseLine: {
+			layers: [
+				{
+					id: "landuseLine",
 					"source-layer": "landuse",
 					layout: {
 						"line-cap": "round",
@@ -16,7 +17,7 @@ const testComponent = (
 					},
 					paint: { "line-width": 1, "line-color": "#ff0000" },
 				},
-			},
+			],
 			sourceOptions: {
 				minzoom: 0,
 				maxzoom: 20,
@@ -28,8 +29,8 @@ const testComponent = (
 layerRemovalTest(
 	"<MlVectorTileLayer />",
 	testComponent,
-	new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '_landuseLine".*$'),
-	"MlVectorTileLayer-{uuid}_landuseLine"
+	new RegExp('^.*"landuseLine".*$'),
+	'landuseLine'
 );
 sourceRemovalTest(
 	"<MlVectorTileLayer />",

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -1,14 +1,15 @@
 import React, { useRef, useEffect, useCallback } from "react";
-import useMap from "../../hooks/useMap";
-import PropTypes from "prop-types";
+import useMap from '../../hooks/useMap';
+import { LayerSpecification } from 'maplibre-gl';
+import { VectorSourceSpecification } from 'maplibre-gl';
 
 interface MlVectorTileLayerProps {
 	mapId?: string;
 	insertBeforeLayer?: string;
 	layerId?: string;
-	sourceOptions?: any;
+	sourceOptions?: VectorSourceSpecification;
 	url?: string;
-	layers?: any;
+	layers: LayerSpecification[];
 }
 
 /**
@@ -23,135 +24,116 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 		waitForLayer: props.insertBeforeLayer,
 	});
 
-	const layerIdsRef = useRef({});
-	const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+	const layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
 	const layerPaintConfsRef = useRef({});
 	const layerLayoutConfsRef = useRef({});
 	const initializedRef = useRef(false);
 
-	const createLayer = useCallback(() => {
+	const createLayers = useCallback(() => {
 		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
+		// Add the new layer to the maplibre instance once it is available
 		mapHook.map.addSource(
 			layerId.current,
 			{
-				type: "vector",
+				type: 'vector',
 				tiles: [props.url],
 				tileSize: 512,
-				attribution: "",
+				attribution: '',
 				...props.sourceOptions,
 			},
 			mapHook.componentId
 		);
 
-		for (let key in props.layers) {
-			let _layerId = layerId.current + "_" + key;
-			layerIdsRef.current[key] = _layerId;
-
+		props.layers.forEach((layer) => {
+			if (!mapHook.map) return;
 			mapHook.map.addLayer(
 				{
-					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,
+						'line-opacity': 0.5,
+						'line-color': 'rgb(80, 80, 80)',
+						'line-width': 2,
 					},
-					...props.layers[key],
+					...layer,
 				},
 				props.insertBeforeLayer,
 				mapHook.componentId
 			);
-			layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-			layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+			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",
+				'styledata',
 				() => {
 					if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
-						console.log("Recreate Layer " + layerId.current);
-						createLayer();
+						console.log('Recreate Layer ' + layerId.current);
+						createLayers();
 					}
 				},
 				mapHook.componentId
 			);
-		}
+		});
 	}, [mapHook.map, props]);
 
-	useEffect(() => {
-		if (initializedRef.current) return;
-
-		createLayer();
-	}, [createLayer]);
+	const updateLayers = useCallback(() => {
+		if (!initializedRef.current) return;
 
-	useEffect(() => {
-		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((layer) => {
+			if (!mapHook.map) return;
+			if (mapHook.map.map.getLayer(layer.id)) {
 				// update changed paint property
-				let layerPaintConfString = JSON.stringify(props.layers[key].paint);
-
-				if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
-					for (let paintKey in props.layers[key].paint) {
-						mapHook.map.map.setPaintProperty(
-							layerIdsRef.current[key],
-							paintKey,
-							props.layers[key].paint[paintKey]
-						);
+				const layerPaintConfString = JSON.stringify(layer.paint);
+
+				if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
+					for (const 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
-				let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
-
-				if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
-					for (let layoutKey in props.layers[key].layout) {
-						mapHook.map.map.setLayoutProperty(
-							layerIdsRef.current[key],
-							layoutKey,
-							props.layers[key].layout[layoutKey]
-						);
+				const layerLayoutConfString = JSON.stringify(layer.layout);
+
+				if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
+					for (const 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(() => {
+		if (initializedRef.current) return;
+		createLayers();
+	}, [createLayers]);
+
+	// if layers get removed or added
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+		createLayers();
+	}, [props.layers.length, mapHook.map]);
+
+	// on layout/paint update
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+		updateLayers();
 	}, [props.layers, mapHook.map]);
 
 	return <></>;
 };
 
-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,
-};
-
 export default MlVectorTileLayer;

package/src/hooks/{exportMap → useExportMap}/index.ts

@@ -10,7 +10,7 @@ interface exportMapProps {
 	mapId?: string;
 }
 
-export default function exportMap(props: exportMapProps) {
+export default function useExportMap(props: exportMapProps) {
 	const mapHook = useMap({ mapId: props.mapId });
 
 	const _createExport = useMemo(() => {

package/src/hooks/{exportMap → useExportMap}/lib.ts

@@ -1,4 +1,4 @@
-import { LngLatLike, Map } from 'maplibre-gl';
+import { LngLatLike, Map } from '!maplibre-gl';
 import jsPDF from 'jspdf';
 import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
 

package/src/index.ts

@@ -1,7 +1,7 @@
 export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
 export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
-export { default as MlCreatePdfForm } from "./components/MlCreatePdfButton/MlCreatePdfButton";
+export { default as MlCreatePdfForm } from "./components/MlCreatePdfForm/MlCreatePdfForm";
 export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
@@ -35,7 +35,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";