@mapcomponents/react-maplibre 0.1.69 → 0.1.71

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

@@ -1,52 +0,0 @@
-import React from "react";
-
-import MlVectorTileLayer from "./MlVectorTileLayer";
-import TopToolbar from "../../ui_components/TopToolbar";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlVectorTileLayer",
-	component: MlVectorTileLayer,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<TopToolbar>
-		<MlVectorTileLayer {...args} />
-	</TopToolbar>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-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: [
-		{
-			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,40 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-import React from 'react'
-import MlVectorTileLayer from "./MlVectorTileLayer";
-import { uuid_regex } from "../../setupTests";
-
-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: [
-				{
-					id: "landuseLine",
-					"source-layer": "landuse",
-					layout: {
-						"line-cap": "round",
-						"line-join": "round",
-					},
-					paint: { "line-width": 1, "line-color": "#ff0000" },
-				},
-			],
-			sourceOptions: {
-				minzoom: 0,
-				maxzoom: 20,
-			},
-		}}
-	/>
-);
-
-layerRemovalTest(
-	"<MlVectorTileLayer />",
-	testComponent,
-	new RegExp('^.*"landuseLine".*$'),
-	'landuseLine'
-);
-sourceRemovalTest(
-	"<MlVectorTileLayer />",
-	testComponent,
-	new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '".*$'),
-	"MlVectorTileLayer-{uuid}"
-);

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -1,144 +0,0 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import useMap from '../../hooks/useMap';
-import { LayerSpecification } from 'maplibre-gl';
-import { VectorSourceSpecification } from 'maplibre-gl';
-
-export type MlVectorTileLayerProps = {
-	mapId?: string;
-	insertBeforeLayer?: string;
-	layerId?: string;
-	sourceOptions?: VectorSourceSpecification;
-	url?: string;
-	layers: LayerSpecification[];
-}
-
-/**
- * Adds a vector-tile source and 0...n vector-tile-layers to the MapLibre instance referenced by
- * props.mapId
- *
- * @component
- */
-const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
-	const layerPaintConfsRef = useRef({});
-	const layerLayoutConfsRef = useRef({});
-	const initializedRef = useRef(false);
-
-	console.log('render vt')
-	console.log(props.layers)
-	const createLayers = useCallback(() => {
-		if (!mapHook.map) return;
-
-		initializedRef.current = true;
-
-		if (mapHook.map.map.getSource(layerId.current)) {
-			mapHook.cleanup();
-		}
-
-		// Add the new layer to the maplibre instance once it is available
-		mapHook.map.addSource(
-			layerId.current,
-			{
-				type: 'vector',
-				tiles: [props.url || ''],
-				attribution: '',
-				minzoom: 0,
-				maxzoom: 14,
-				...props.sourceOptions,
-			},
-			mapHook.componentId
-		);
-
-		props.layers.forEach((layer) => {
-			if (!mapHook.map) return;
-			mapHook.map.addLayer(
-				{
-					source: layerId.current,
-					minzoom: 0,
-					maxzoom: 22,
-					layout: {},
-					paint: {
-						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-						// @ts-ignore
-						'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',
-				() => {
-					if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
-						console.log('Recreate Layer ' + layerId.current);
-						createLayers();
-					}
-				},
-				mapHook.componentId
-			);
-		});
-	}, [mapHook.map, props]);
-
-	const updateLayers = useCallback(() => {
-		if (!initializedRef.current) return;
-
-		props.layers.forEach((layer) => {
-			if (!mapHook.map) return;
-			if (mapHook.map.map.getLayer(layer.id)) {
-				// update changed paint property
-				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[layer.id] = layerPaintConfString;
-
-				// update changed layout property
-				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[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 <></>;
-};
-
-export default MlVectorTileLayer;

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.doc.de.md

@@ -1,3 +0,0 @@
-# Component Beschreibung
-
-Beschreibungstext

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js

@@ -1,64 +0,0 @@
-import React, { useRef, useEffect, useContext } from "react";
-import PropTypes from "prop-types";
-
-import MapContext from "../../contexts/MapContext";
-import { v4 as uuidv4 } from "uuid";
-
-/**
- * TODO: Add short & useful description
- *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- *
- * @component
- */
-const MlWmsFeatureInfoPopup = (props) => {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const mapContext = useContext(MapContext);
-
-	const initializedRef = useRef(false);
-	const mapRef = useRef(undefined);
-	const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsFeatureInfoPopup-") + uuidv4());
-
-	useEffect(() => {
-		let _componentId = componentId.current;
-
-		return () => {
-			// This is the cleanup function, it is called when this react component is removed from react-dom
-			// try to remove anything this component has added to the MapLibre-gl instance
-			// e.g.: remove the layer
-			// mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-			// check for the existence of map.style before calling getLayer or getSource
-
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-				mapRef.current = undefined;
-			}
-			initializedRef.current = false;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-		// the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-
-		mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-	}, [mapContext.mapIds, mapContext, props.mapId]);
-
-	return <></>;
-};
-
-MlWmsFeatureInfoPopup.defaultProps = {
-	mapId: undefined,
-};
-
-MlWmsFeatureInfoPopup.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-};
-export default MlWmsFeatureInfoPopup;

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.meta_.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlWmsFeatureInfoPopup",
-  "title": "",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import MlWmsFeatureInfoPopup from './MlWmsFeatureInfoPopup';
-
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-
-const storyoptions = {
-	title: 'MapComponents/MlWmsFeatureInfoPopup',
-	component: MlWmsFeatureInfoPopup,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => <MlWmsFeatureInfoPopup />;
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/components/MlWmsLayer/MlWmsLayer.stories.js

@@ -1,49 +0,0 @@
-import React, { useState } from "react";
-
-import MlWmsLayer from "./MlWmsLayer";
-import TopToolbar from "../../ui_components/TopToolbar";
-import Button from "@mui/material/Button";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-import "../../App.css";
-
-const storyoptions = {
-	title: "MapComponents/MlWmsLayer",
-	component: MlWmsLayer,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	const [showLayer, setShowLayer] = useState(true);
-
-	return (
-		<>
-			<TopToolbar>
-				<Button
-					color="primary"
-					variant={showLayer ? "contained" : "outlined"}
-					onClick={() => setShowLayer(!showLayer)}
-				>
-					WMS
-				</Button>
-			</TopToolbar>
-			<MlWmsLayer visible={showLayer} {...props} />
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
-	urlParameters: {
-		layers: "nw_uraufnahme_rw",
-	},
-};
-//

package/src/components/MlWmsLayer/MlWmsLayer.test.js

@@ -1,19 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlWmsLayer from "./MlWmsLayer";
-import { uuid_regex } from "../../setupTests";
-
-const testComponent = <MlWmsLayer url="mock" urlParameters={{ layers: "mock" }} />;
-
-layerRemovalTest(
-	"<MlWmsLayer />",
-	testComponent,
-	new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
-	"MlWmsLayer-{uuid}"
-);
-sourceRemovalTest(
-	"<MlWmsLayer />",
-	testComponent,
-	new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
-	"MlWmsLayer-{uuid}"
-);

package/src/components/MlWmsLayer/MlWmsLayer.tsx

@@ -1,218 +0,0 @@
-import React, { useMemo, useRef, useEffect, useCallback } from 'react';
-import useMap from '../../hooks/useMap';
-
-import PropTypes from 'prop-types';
-import { RasterLayerSpecification, RasterSourceSpecification } from 'maplibre-gl';
-
-const defaultProps = {
-	visible: true,
-	urlParameters: {
-		bbox: '{bbox-epsg-3857}',
-		format: 'image/png',
-		service: 'WMS',
-		version: '1.1.1',
-		request: 'GetMap',
-		srs: 'EPSG:3857',
-		width: 256,
-		height: 256,
-		styles: '',
-	},
-	attribution: '',
-	sourceOptions: {
-		minZoom: 0,
-		maxZoom: 20,
-	},
-	layerOptions: {
-		minZoom: 0,
-		maxZoom: 20,
-	},
-};
-
-interface MlWmsLayerProps {
-	urlParameters?: { [key: string]: string };
-	url: string;
-	visible?: boolean;
-	attribution?: string;
-	mapId?: string;
-	sourceOptions?: RasterSourceSpecification;
-	layerOptions?: RasterLayerSpecification;
-	insertBeforeLayer?: string;
-	layerId?: string;
-}
-/**
- * Adds a WMS raster source & layer to the maplibre-gl instance
- *
- * @param {object} props
- * @param {object} props.urlParameters URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object
- * @param {string} props.url WMS URL
- * @param {bool}	 props.visible Sets layer "visibility" property to "visible" if true or "none" if false
- * @param {string} props.attribution MapLibre attribution shown in the bottom right of the map, if this layer is visible
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- * @param {object} props.sourceOptions Object that is passed to the MapLibre.addSource call as config option parameter
- * @param {object} props.layerOptions Object that is passed to the MapLibre.addLayer call as config option parameter
- * @param {string} props.insertBeforeLayer Id of an existing layer in the mapLibre instance to help specify the layer order
-																					 This layer will be visually beneath the layer with the "insertBeforeLayer" id
- *
- * @component
- */
-const MlWmsLayer = (props: MlWmsLayerProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const initializedRef = useRef(false);
-	const layerId = useRef(props.layerId || 'MlWmsLayer-' + mapHook.componentId);
-
-	const tileUrl = useMemo(() => {
-		let _propsUrlParams;
-		let _wmsUrl = props.url;
-		if (props.url.indexOf('?') !== -1) {
-			_propsUrlParams = props.url.split('?');
-			_wmsUrl = _propsUrlParams[0];
-		}
-		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
-		// first spread in default props manually to enable overriding a single parameter without replacing the whole default urlParameters object
-		const urlParamsObj = {
-			...defaultProps.urlParameters,
-			...Object.fromEntries(_urlParamsFromUrl),
-			...props.urlParameters,
-		};
-		const urlParams = new URLSearchParams(urlParamsObj as unknown as Record<string, string>);
-		const urlParamsStr =
-			decodeURIComponent(urlParams.toString()) + ''.replace(/%2F/g, '/').replace(/%3A/g, ':');
-
-		return _wmsUrl + '?' + urlParamsStr;
-	}, [props.urlParameters, props.url]);
-
-	const createLayer = useCallback(() => {
-		if (!mapHook.map) return;
-
-		initializedRef.current = true;
-
-		if (mapHook.map.map.getLayer(layerId.current)) {
-			mapHook.cleanup();
-		}
-
-		mapHook.map.addSource(
-			layerId.current,
-			{
-				type: 'raster',
-				tiles: [tileUrl],
-				tileSize: 256,
-				attribution: props.attribution,
-				...props.sourceOptions,
-			},
-			mapHook.componentId
-		);
-
-		mapHook.map.addLayer(
-			{
-				id: layerId.current,
-				type: 'raster',
-				source: layerId.current,
-				...props.layerOptions,
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-
-		// recreate layer if map style.json has changed
-		mapHook.map.on(
-			'styledata',
-			() => {
-				if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
-					console.log('Recreate Layer ' + layerId.current);
-					createLayer();
-				}
-			},
-			mapHook.componentId
-		);
-		if (!props.visible) {
-			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
-		}
-	}, [mapHook.map, props, tileUrl]);
-
-	useEffect(() => {
-		if (initializedRef.current) return;
-
-		createLayer();
-	}, [createLayer]);
-
-	useEffect(() => {
-		if (!mapHook.map || !mapHook.map?.map?.style?.sourceCaches?.[layerId.current] || !initializedRef.current) return;
-
-		const source = mapHook.map.map.getSource(layerId.current) as RasterSourceSpecification;
-		source.tiles = [tileUrl];
-
-		mapHook.map.map.style.sourceCaches[layerId.current].clearTiles();
-
-		mapHook.map.map.style.sourceCaches[layerId.current].update(mapHook.map.map.transform);
-
-		mapHook.map.map.triggerRepaint();
-	}, [mapHook.map, tileUrl]);
-
-	useEffect(() => {
-		if (!mapHook.map || !initializedRef.current) return;
-
-		// toggle layer visibility by changing the layout object's visibility property
-		if (props.visible) {
-			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'visible');
-		} else {
-			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');
-		}
-	}, [props.visible, mapHook.map]);
-
-	return <></>;
-};
-
-MlWmsLayer.defaultProps = {
-	...defaultProps,
-};
-
-MlWmsLayer.propTypes = {
-	/**
-	 * WMS URL
-	 */
-	url: PropTypes.string.isRequired,
-	/**
-	 * URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object.
-	 */
-	urlParameters: PropTypes.shape({
-		layers: PropTypes.string.isRequired,
-		bbox: PropTypes.string,
-		format: PropTypes.string,
-		service: PropTypes.string,
-		version: PropTypes.string,
-		request: PropTypes.string,
-		srs: PropTypes.string,
-		width: PropTypes.number,
-		height: PropTypes.number,
-	}),
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * MapLibre attribution shown in the bottom right of the map, if this layer is visible
-	 */
-	attribution: PropTypes.string,
-	/**
-	 * Object that is passed to the MapLibre.addLayer call as config option parameter
-	 */
-	layerOptions: PropTypes.object,
-	/**
-	 * Object that is passed to the MapLibre.addSource call as config option parameter
-	 */
-	sourceOptions: PropTypes.object,
-	/**
-	 * Id of an existing layer in the mapLibre instance to help specify the layer order
-	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-	 */
-	insertBeforeLayer: PropTypes.string,
-	/**
-	 * Sets layer "visibility" property to "visible" if true or "none" if false
-	 */
-	visible: PropTypes.bool,
-};
-export default MlWmsLayer;

package/src/components/MlWmsLoader/MlWmsLoader.doc.de.md

@@ -1 +0,0 @@
-Darstellung von WMS Diensten mit Feature Info Abfrage

package/src/components/MlWmsLoader/MlWmsLoader.doc.en.md

@@ -1 +0,0 @@
-Presentation of WMS services with the feature of an information query.

package/src/components/MlWmsLoader/MlWmsLoader.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlWmsLoader",
-  "title": "WMS loader",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "WMS Feature Info",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}