@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/hooks/useSources.stories.js

@@ -1,232 +0,0 @@
-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.ts

@@ -1,104 +0,0 @@
-import { useState, useEffect } from "react";
-import WMSCapabilities, { WMSCapabilitiesJSON } from "wms-capabilities";
-
-export interface useWmsProps{
-	url?:string;
-	urlParameters?:{[key: string]: string};
-}
-
-export interface useWmsReturnType{
-		capabilities:WMSCapabilitiesJSON | null | undefined;
-		getFeatureInfoUrl:string | undefined;
-		wmsUrl:string | undefined;
-		error:string | undefined;
-		setUrl:(value:string|undefined) => void;
-}
-
-function useWms(props:useWmsProps):useWmsReturnType {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState<string>();
-	const [url, setUrl] = useState(props.url);
-	const [wmsUrl, setWmsUrl] = useState("");
-	const [capabilities, setCapabilities] = useState<WMSCapabilitiesJSON | null | undefined>();
-	const [error, setError] = useState();
-
-	const clearState = () => {
-		setGetFeatureInfoUrl(undefined);
-		setCapabilities(undefined);
-		//setLayers([]);
-		setWmsUrl("");
-	};
-
-	useEffect(() => {
-		// extract URL parameters from the given URL
-		clearState();
-		setError(undefined);
-
-		if (!url) return;
-
-		let _propsUrlParams;
-		let _wmsUrl = url;
-		if (url.indexOf("?") !== -1) {
-			_propsUrlParams = url.split("?");
-			_wmsUrl = _propsUrlParams[0];
-		}
-		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
-
-		const urlParamsObj = {
-			...Object.fromEntries(_urlParamsFromUrl),
-			...props.urlParameters,
-		};
-		// create URLSearchParams object to assemble the URL Parameters
-		const urlParams = new URLSearchParams(urlParamsObj);
-
-		const 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:string) => {
-				setCapabilities(new WMSCapabilities(data, window.DOMParser).toJSON());
-			})
-			.catch((error) => {
-				//reset local state
-				clearState();
-				console.log(error);
-				setError(error.message);
-			});
-	}, [url, props.urlParameters]);
-
-	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]);
-
-	return {
-		capabilities,
-		getFeatureInfoUrl,
-		wmsUrl,
-		error,
-		setUrl,
-	};
-}
-
-useWms.defaultProps = {
-	url: "",
-	urlParameters: {
-		SERVICE: "WMS",
-		VERSION: "1.3.0",
-		REQUEST: "GetCapabilities",
-	},
-};
-
-export default useWms;

package/src/index.ts

@@ -1,78 +0,0 @@
-export { default as MapLibreGlWrapper} from './components/MapLibreMap/lib/MapLibreGlWrapper';
-export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
-
-export { default as MlCenterPosition } from "./components/MlCenterPosition/MlCenterPosition";
-
-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 MlPdfPreview } from "./components/MlCreatePdfForm/lib/PdfPreview";
-export { default as PdfContext } from "./components/MlCreatePdfForm/lib/PdfContext";
-export { default as PdfForm } from "./components/MlCreatePdfForm/lib/PdfForm";
-
-export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
-
-export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
-
-export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
-
-export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
-
-export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
-
-export { default as MlMeasureTool } from "./components/MlMeasureTool/MlMeasureTool";
-export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
-export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
-export { default as MlLayer } from "./components/MlLayer/MlLayer";
-export { default as MlScaleReference } from "./components/MlScaleReference/MlScaleReference";
-
-export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
-export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe";
-
-export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
-export { default as MlMarker } from "./components/MlMarker/MlMarker";
-
-export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
-
-export { default as MlGpxViewer } from "./components/MlGpxViewer/MlGpxViewer";
-export { default as GeoJsonProvider } from "./components/MlGpxViewer/util/GeoJsonProvider";
-export { default as GeoJsonContext } from "./components/MlGpxViewer/util/GeoJsonContext";
-
-export { default as MlShareMapState } from "./components/MlShareMapState/MlShareMapState";
-
-export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
-export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
-
-export { default as MlWmsFeatureInfoPopup } from "./components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup";
-export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
-export { default as MlWmsLoader } from "./components/MlWmsLoader/MlWmsLoader"
-
-export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
-
-export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
-export { default as useExportMap } from "./hooks/useExportMap";
-export { default as useGpx } from "./hooks/useGpx/useGpx";
-export { default as useLayerFilter } from "./hooks/useLayerFilter/useLayerFilter";
-export { default as useLayerHoverPopup } from "./hooks/useLayerHoverPopup/useLayerHoverPopup";
-export { default as useLayer } from "./hooks/useLayer";
-export { default as useLayerEvent } from "./hooks/useLayerEvent";
-export { default as useMap } from "./hooks/useMap";
-export { default as useMapState } from "./hooks/useMapState";
-export { default as useSource } from "./hooks/useSource";
-export { default as useWms } from "./hooks/useWms";
-
-export { MapComponentsProvider } from "./contexts/MapContext";
-export { default as MapContext } from "./contexts/MapContext";
-export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";
-export { default as SimpleDataContext } from "./contexts/SimpleDataContext";
-
-export { default as getTheme } from './ui_components/MapcomponentsTheme';
-
-export { default as LayerList } from './ui_components/LayerList/LayerList';
-export { default as LayerListItem } from './ui_components/LayerList/LayerListItem';
-export { default as LayerListFolder } from './ui_components/LayerList/LayerListFolder';
-export { default as LayerPropertyForm } from './ui_components/LayerList/util/LayerPropertyForm';
-export { default as LayerListItemVectorLayer } from './ui_components/LayerList/util/LayerListItemVectorLayer';
-export { default as ColorPicker } from './ui_components/LayerList/util/input/ColorPicker';

package/src/setupTests.js

@@ -1,113 +0,0 @@
-/* eslint-disable no-undef */
-import 'jest-enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-import { configure } from 'enzyme';
-
-var uuid_regex = '[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}';
-export { uuid_regex };
-
-// MapLibre-gl mockup
-var mockMapLibreMethods = {
-	on: jest.fn(),
-	off: jest.fn(),
-	addControl: jest.fn(),
-	removeControl: jest.fn(),
-	fitBounds: 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');
-
-	return {
-		...originalModule,
-		GeolocateControl: jest.fn(),
-		Map: function () {
-			// eslint-disable-next-line @typescript-eslint/no-this-alias
-			var self = this;
-			this.layers = [];
-			this.sources = [];
-			this.style = { sourceCaches: {} };
-
-			let styleFunctions = {
-				// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				addSource: (id, source) => {
-					if (typeof id.id !== 'undefined') {
-						self.sources.push(id);
-						self.style.sourceCaches[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);
-						delete self.style.sourceCaches[id];
-					}
-				},
-				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(),
-	};
-});
-
-configure({ adapter: new Adapter() });
-
-window.URL.createObjectURL = function () {};
-window.HTMLCanvasElement.prototype.getContext = () => {};

package/src/stories/components/Readme.js

@@ -1,7 +0,0 @@
-import { Description } from "@storybook/addon-docs/blocks";
-
-import readme from "../README.md";
-
-const Readme = () => <Description markdown={readme} />;
-
-export default Readme;

package/src/ui_components/Dropzone.tsx

@@ -1,104 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import Typography from '@mui/material/Typography';
-
-type Props = {
-	setData: (data: string) => void;
-};
-
-const stopDefault = (event: DragEvent) => {
-	event.preventDefault();
-	event.stopPropagation();
-};
-export default function Dropzone(props: Props) {
-	const [zIndex, setZIndex] = useState(0);
-	const dropZone = useRef<HTMLDivElement>(null);
-	const dropHandler = (event: DragEvent) => {
-		event.preventDefault();
-
-		if (event?.dataTransfer?.items) {
-			if (event.dataTransfer.items.length > 1) {
-				return false;
-			}
-			// If dropped items aren't files, reject them
-			if (event.dataTransfer.items[0].kind === 'file') {
-				const reader = new FileReader();
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				reader.onload = (payload: any) => {
-					if (!payload?.currentTarget?.result) return;
-
-					if (typeof props.setData === 'function') {
-						props.setData(payload.currentTarget.result);
-					}
-				};
-				const file = event.dataTransfer.items[0].getAsFile();
-				if (file) {
-					reader.readAsText(file);
-				}
-			}
-		} else {
-			// Use DataTransfer interface to access the file(s)
-		}
-		return;
-	};
-
-	useEffect(() => {
-		const _dropZone = dropZone.current;
-		const raiseDropZoneAndStopDefault = (event: DragEvent) => {
-			setZIndex(1000);
-			stopDefault(event);
-		};
-		const lowerDropZone = () => {
-			setZIndex(0);
-		};
-		const lowerDropZoneAndStopDefault = (event: DragEvent) => {
-			setZIndex(0);
-			stopDefault(event);
-		};
-
-		window.addEventListener('dragenter', raiseDropZoneAndStopDefault);
-		window.addEventListener('dragover', stopDefault);
-
-		_dropZone?.addEventListener('dragleave', lowerDropZone);
-
-		window.addEventListener('drop', lowerDropZoneAndStopDefault);
-
-		return () => {
-			window.removeEventListener('dragenter', raiseDropZoneAndStopDefault);
-			window.removeEventListener('dragover', stopDefault);
-			_dropZone?.removeEventListener('dragleave', lowerDropZone);
-			window.removeEventListener('drop', lowerDropZoneAndStopDefault);
-		};
-	}, []);
-
-	return (
-		<div
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			onDrop={dropHandler}
-			ref={dropZone}
-			style={{
-				position: 'absolute',
-				left: '0',
-				top: '0',
-				backgroundColor: 'rgba(255,255,255,0.5)',
-				width: '100%',
-				height: '100%',
-				zIndex: zIndex,
-			}}
-		>
-			<Typography
-				variant="h6"
-				style={{
-					top: '50%',
-					position: 'absolute',
-					left: '50%',
-					msTransform: 'translate(-50%, -50%)',
-					transform: ' translate(-50%, -50%)',
-				}}
-				noWrap
-			>
-				Datei ablegen
-			</Typography>
-		</div>
-	);
-}