@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/hooks/useSources.stories.js

@@ -0,0 +1,232 @@
+import useSource from './useSource';
+import React, { useEffect, useState } from 'react';
+import useMap from './useMap';
+import useMapState from './useMapState';
+import useLayer from './useLayer';
+import TopToolbar from '../ui_components/TopToolbar';
+import Button from '@mui/material/Button';
+import MlGeojsonLayerWithSource from '../components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource';
+
+import mapContextDecoratorHooks from '../decorators/MapContextDecoratorHooks';
+import wg_geojson from './assets/pointWG.json';
+const vectorUrl =
+	'https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf';
+
+const storyoptions = {
+	title: 'Hooks/UseSource',
+	component: useSource,
+	argTypes: {},
+	decorators: mapContextDecoratorHooks,
+};
+export default storyoptions;
+
+const GeojsonExample = (args) => {
+	const { source } = useSource({ ...args });
+
+	useLayer({
+		mapId: args.mapId,
+		layerId: 'layer1',
+		source: source?.id ? source.id : '',
+		options: {
+			type: 'circle',
+			paint: {
+				'circle-radius': 6,
+				'circle-color': 'red',
+			},
+		},
+	});
+	useLayer({
+		mapId: args.mapId,
+		layerId: 'layer2',
+		source: source?.id ? source.id : '',
+		options: {
+			type: 'circle',
+			paint: {
+				'circle-radius': 4,
+				'circle-color': 'green',
+			},
+		},
+	});
+	return <></>;
+};
+
+const VectorExample = (args) => {
+	useSource({ ...args });
+	const mapHook = useMap({
+		mapId: args.mapId,
+	});
+	useEffect(() => {
+		if (!mapHook.map) return;
+		mapHook.map.addLayer(
+			{
+				id: 'vector-lineLayer',
+				type: 'line',
+				source: args.sourceId,
+				minzoom: 0,
+				maxzoom: 22,
+				'source-layer': 'landuse',
+				layout: {
+					'line-cap': 'round',
+					'line-join': 'round',
+				},
+				paint: { 'line-width': 2, 'line-color': '#ff0000' },
+			},
+			false,
+			mapHook.componentId
+		);
+		mapHook.map.addLayer(
+			{
+				id: 'vector-FillLayer',
+				type: 'fill',
+				source: args.sourceId,
+				minzoom: 0,
+				maxzoom: 22,
+				'source-layer': 'landuse',
+				paint: {
+					'fill-color': '#32a850',
+					'fill-opacity': 0.4,
+				},
+			},
+			false,
+			mapHook.componentId
+		);
+	}, [mapHook.map]);
+	return <></>;
+};
+
+const RasterExample = (args) => {
+	useSource({ ...args });
+	const mapHook = useMap({
+		mapId: args.mapId,
+	});
+	useEffect(() => {
+		if (!mapHook.map) return;
+		mapHook.map.addLayer(
+			{
+				id: 'raster-wms',
+				type: 'raster',
+				source: args.sourceId,
+				minzoom: 0,
+				maxzoom: 22,
+			},
+			false,
+			mapHook.componentId
+		);
+	}, [mapHook.map]);
+	return <></>;
+};
+
+const removeExample = (args) => {
+	const [sourceStatus, setSourceStatus] = useState(true);
+	const [activeSources, setActiveSources] = useState([]);
+	const mapHook = useMap({
+		mapId: args.mapId,
+	});
+
+	const mapState = useMapState({
+		mapId: args.mapId,
+		watch: {
+			viewport: false,
+			layers: true,
+			sources: true,
+		},
+		filter: {
+			includeBaseLayers: false,
+		},
+	});
+
+	useEffect(() => {
+		if (!mapHook.map) {
+			return;
+		}
+
+		mapHook.map.map.on('sourcedata', () => {
+			if (mapHook?.map?.map?.style.sourceCaches) {
+				setActiveSources(Object.keys(mapHook?.map?.map?.style.sourceCaches));
+			}
+		});
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<TopToolbar>
+				<Button
+					color="primary"
+					variant={sourceStatus ? 'contained' : 'outlined'}
+					onClick={() => setSourceStatus(!sourceStatus)}
+				>
+					Ml GeoJsonLayer With Source JSX Active?
+				</Button>
+			</TopToolbar>
+			{sourceStatus && <MlGeojsonLayerWithSource></MlGeojsonLayerWithSource>}
+			<div
+				style={{
+					position: 'fixed',
+					zIndex: 10000,
+					display: 'flex',
+					flexWrap: 'wrap',
+					top: '62px',
+					left: 0,
+					right: 0,
+					bottom: 0,
+					maxHeight: '100VH',
+					backgroundColor: 'rgba(80,80,80,.8)',
+					padding: '50px',
+					fontSize: '20px',
+					color: '#51ff09',
+					overflow: 'hidden',
+					pointerEvents: 'none',
+				}}
+			>
+				{activeSources?.length > 0 && (
+					<div>
+						Active sources: <br></br> {JSON.stringify(activeSources, null, '  ')}
+						<br></br> <br></br> Active layers : {}
+						<pre>{JSON.stringify(mapState, null, '  ')}</pre>
+					</div>
+				)}
+			</div>
+		</>
+	);
+};
+
+export const useGeojsonSourceExample = GeojsonExample.bind({});
+useGeojsonSourceExample.args = {
+	mapId: 'map_1',
+	sourceId: 'geojson-source',
+	source: {
+		type: 'geojson',
+		data: wg_geojson,
+	},
+};
+
+export const useVectorSourceExample = VectorExample.bind({});
+useVectorSourceExample.args = {
+	mapId: 'map_1',
+	sourceId: 'vector-source',
+	source: {
+		type: 'vector',
+		tiles: [vectorUrl],
+		tilesize: 512,
+		attribution: '',
+	},
+};
+
+export const useRasterSourceExample = RasterExample.bind({});
+useRasterSourceExample.args = {
+	mapId: 'map_1',
+	sourceId: 'raster-source',
+	source: {
+		type: 'raster',
+		tiles: [
+			'https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&styles=&layers=nw_uraufnahme_rw',
+		],
+		tilesize: 256,
+		attribution: '',
+	},
+};
+
+export const removeSourceExample = removeExample.bind({});
+removeSourceExample.args = {
+	mapId: 'map_1',
+};

package/src/hooks/useWms.js

@@ -2,90 +2,90 @@ import { useState, useEffect } from "react";
 import WMSCapabilities from "wms-capabilities";
 
 function useWms(props) {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState(undefined);
-  const [url, setUrl] = useState(props.url);
-  const [wmsUrl, setWmsUrl] = useState("");
-  const [capabilities, setCapabilities] = useState(undefined);
-  const [error, setError] = useState(undefined);
+	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState(undefined);
+	const [url, setUrl] = useState(props.url);
+	const [wmsUrl, setWmsUrl] = useState("");
+	const [capabilities, setCapabilities] = useState(undefined);
+	const [error, setError] = useState(undefined);
 
-  const clearState = () => {
-    setGetFeatureInfoUrl(undefined);
-    setCapabilities(undefined);
-    //setLayers([]);
-    setWmsUrl("");
-  };
+	const clearState = () => {
+		setGetFeatureInfoUrl(undefined);
+		setCapabilities(undefined);
+		//setLayers([]);
+		setWmsUrl("");
+	};
 
-  useEffect(() => {
-    // extract URL parameters from the given URL
-    clearState();
-    setError(undefined);
+	useEffect(() => {
+		// extract URL parameters from the given URL
+		clearState();
+		setError(undefined);
 
-    if (!url) return;
+		if (!url) return;
 
-    let _propsUrlParams;
-    let _wmsUrl = url;
-    if (url.indexOf("?") !== -1) {
-      _propsUrlParams = url.split("?");
-      _wmsUrl = _propsUrlParams[0];
-    }
-    let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
+		let _propsUrlParams;
+		let _wmsUrl = url;
+		if (url.indexOf("?") !== -1) {
+			_propsUrlParams = url.split("?");
+			_wmsUrl = _propsUrlParams[0];
+		}
+		let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
 
-    let urlParamsObj = {
-      ...Object.fromEntries(_urlParamsFromUrl),
-      ...props.urlParameters,
-    };
-    // create URLSearchParams object to assemble the URL Parameters
-    let urlParams = new URLSearchParams(urlParamsObj);
+		let urlParamsObj = {
+			...Object.fromEntries(_urlParamsFromUrl),
+			...props.urlParameters,
+		};
+		// create URLSearchParams object to assemble the URL Parameters
+		let urlParams = new URLSearchParams(urlParamsObj);
 
-    let urlParamsStr =
-      decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+		let urlParamsStr =
+			decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 
-    fetch(_wmsUrl + "?" + urlParamsStr)
-      .then((res) => {
-        if (!res.ok) {
-          throw Error(res.statusText + " (" + res.status + " - " + res.type + ")");
-        } else {
-          return res.text();
-        }
-      })
-      .then((data) => {
-        setCapabilities(new WMSCapabilities(data).toJSON());
-      })
-      .catch((error) => {
-        //reset local state
-        clearState();
-        console.log(error);
-        setError(error.message);
-      });
-  }, [url, props.urlParameters]);
+		fetch(_wmsUrl + "?" + urlParamsStr)
+			.then((res) => {
+				if (!res.ok) {
+					throw Error(res.statusText + " (" + res.status + " - " + res.type + ")");
+				} else {
+					return res.text();
+				}
+			})
+			.then((data) => {
+				setCapabilities(new WMSCapabilities(data).toJSON());
+			})
+			.catch((error) => {
+				//reset local state
+				clearState();
+				console.log(error);
+				setError(error.message);
+			});
+	}, [url, props.urlParameters]);
 
-  useEffect(() => {
-    if (!capabilities?.Service) return;
+	useEffect(() => {
+		if (!capabilities?.Service) return;
 
-    setWmsUrl(capabilities.Capability?.Request?.GetMap?.DCPType?.[0]?.HTTP?.Get?.OnlineResource);
-    // set getFeatureInfo url
-    setGetFeatureInfoUrl(
-      capabilities.Capability?.Request?.GetFeatureInfo?.DCPType?.[0]?.HTTP?.Get?.OnlineResource
-    );
-  }, [capabilities]);
+		setWmsUrl(capabilities.Capability?.Request?.GetMap?.DCPType?.[0]?.HTTP?.Get?.OnlineResource);
+		// set getFeatureInfo url
+		setGetFeatureInfoUrl(
+			capabilities.Capability?.Request?.GetFeatureInfo?.DCPType?.[0]?.HTTP?.Get?.OnlineResource
+		);
+	}, [capabilities]);
 
-  return {
-    capabilities,
-    getFeatureInfoUrl,
-    wmsUrl,
-    error,
-    setUrl,
-  };
+	return {
+		capabilities,
+		getFeatureInfoUrl,
+		wmsUrl,
+		error,
+		setUrl,
+	};
 }
 
 useWms.defaultProps = {
-  url: "",
-  urlParameters: {
-    SERVICE: "WMS",
-    VERSION: "1.3.0",
-    REQUEST: "GetCapabilities",
-  },
+	url: "",
+	urlParameters: {
+		SERVICE: "WMS",
+		VERSION: "1.3.0",
+		REQUEST: "GetCapabilities",
+	},
 };
 
 export default useWms;

package/src/index.ts

@@ -1,6 +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/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";
@@ -33,6 +34,8 @@ export { default as useLayer } from "./hooks/useLayer";
 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 { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";

package/src/setupTests.js

@@ -9,99 +9,99 @@ export { uuid_regex };
 
 // MapLibre-gl mockup
 var mockMapLibreMethods = {
-  on: jest.fn(),
-  off: jest.fn(),
-  addControl: jest.fn(),
-  removeControl: jest.fn(),
-  hasControl: jest.fn(() => true),
-  getCanvas: () => document.createElement("canvas"),
-  getContainer: () => ({
-    style: {},
-  }),
+	on: jest.fn(),
+	off: jest.fn(),
+	addControl: jest.fn(),
+	removeControl: jest.fn(),
+	hasControl: jest.fn(() => true),
+	getCanvas: () => document.createElement("canvas"),
+	getContainer: () => ({
+		style: {},
+	}),
 };
 export { mockMapLibreMethods };
 
 jest.mock("maplibre-gl/dist/maplibre-gl", () => {
-  const originalModule = jest.requireActual("maplibre-gl/dist/maplibre-gl");
+	const originalModule = jest.requireActual("maplibre-gl/dist/maplibre-gl");
 
-  return {
-    ...originalModule,
-    GeolocateControl: jest.fn(),
-    Map: function () {
-      var self = this;
-      this.layers = [];
-      this.sources = [];
+	return {
+		...originalModule,
+		GeolocateControl: jest.fn(),
+		Map: function () {
+			var self = this;
+			this.layers = [];
+			this.sources = [];
 
-      let styleFunctions = {
-        addSource: (id, source) => {
-          if (typeof id.id !== "undefined") {
-            self.sources.push(id);
-          } else if (typeof id !== "undefined") {
-            self.sources.push(id);
-          }
-        },
-        getSource: (id) => {
-          if (self.sources.indexOf(id) !== -1) {
-            return { setData: jest.fn() };
-          }
-          return false;
-        },
-        removeSource: (id) => {
-          const sourcePosition = self.sources.indexOf(id);
-          if (sourcePosition !== -1) {
-            self.sources.splice(sourcePosition, 1);
-          }
-        },
-        addLayer: (layer) => {
-          if (typeof layer.id !== "undefined") {
-            self.layers.push(layer.id);
-            if (
-              typeof layer.source !== "undefined" &&
-              typeof layer.source === "object"
-            ) {
-              self.sources.push(layer.id);
-            }
-          }
-        },
-        getLayer: (id) => {
-          if (self.layers.indexOf(id) !== -1) {
-            return {};
-          }
-          return false;
-        },
-        removeLayer: (id) => {
-          const layerPosition = self.layers.indexOf(id);
-          if (layerPosition !== -1) {
-            self.layers.splice(layerPosition, 1);
-          }
-        },
-      };
+			let styleFunctions = {
+				addSource: (id, source) => {
+					if (typeof id.id !== "undefined") {
+						self.sources.push(id);
+					} else if (typeof id !== "undefined") {
+						self.sources.push(id);
+					}
+				},
+				getSource: (id) => {
+					if (self.sources.indexOf(id) !== -1) {
+						return { setData: jest.fn() };
+					}
+					return false;
+				},
+				removeSource: (id) => {
+					const sourcePosition = self.sources.indexOf(id);
+					if (sourcePosition !== -1) {
+						self.sources.splice(sourcePosition, 1);
+					}
+				},
+				addLayer: (layer) => {
+					if (typeof layer.id !== "undefined") {
+						self.layers.push(layer.id);
+						if (
+							typeof layer.source !== "undefined" &&
+							typeof layer.source === "object"
+						) {
+							self.sources.push(layer.id);
+						}
+					}
+				},
+				getLayer: (id) => {
+					if (self.layers.indexOf(id) !== -1) {
+						return {};
+					}
+					return false;
+				},
+				removeLayer: (id) => {
+					const layerPosition = self.layers.indexOf(id);
+					if (layerPosition !== -1) {
+						self.layers.splice(layerPosition, 1);
+					}
+				},
+			};
 
-      return {
-        ...styleFunctions,
-        once: (eventName, callback) => {
-          callback();
-        },
-        remove: jest.fn(),
-        setLayerZoomRange: jest.fn(),
-        setLayoutProperty: jest.fn(),
-        addImage: jest.fn(),
-        loadImage: jest.fn(),
-        removeImage: jest.fn(),
-        hasImage: jest.fn(),
-        project: jest.fn(),
-        setZoom: jest.fn(),
-        setPitch: jest.fn(),
-        setCenter: jest.fn(),
-        style: { ...styleFunctions },
-        layers: this.layers,
-        sources: this.sources,
-        _update: jest.fn(),
-        ...mockMapLibreMethods,
-      };
-    },
-    NavigationControl: jest.fn(),
-  };
+			return {
+				...styleFunctions,
+				once: (eventName, callback) => {
+					callback();
+				},
+				remove: jest.fn(),
+				setLayerZoomRange: jest.fn(),
+				setLayoutProperty: jest.fn(),
+				addImage: jest.fn(),
+				loadImage: jest.fn(),
+				removeImage: jest.fn(),
+				hasImage: jest.fn(),
+				project: jest.fn(),
+				setZoom: jest.fn(),
+				setPitch: jest.fn(),
+				setCenter: jest.fn(),
+				style: { ...styleFunctions },
+				layers: this.layers,
+				sources: this.sources,
+				_update: jest.fn(),
+				...mockMapLibreMethods,
+			};
+		},
+		NavigationControl: jest.fn(),
+	};
 });
 
 configure({ adapter: new Adapter() });