@mapcomponents/react-maplibre 0.1.63 → 0.1.65

package/src/components/MlGPXViewer/util/demoViewer.js

@@ -1,254 +0,0 @@
-import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
-import { bbox } from '@turf/turf';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Modal from '@mui/material/Modal';
-import InfoIcon from '@mui/icons-material/Info';
-import FileCopy from '@mui/icons-material/FileCopy';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import GeoJsonContext from './GeoJsonContext';
-import toGeoJSON from '../gpxConverter';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import useMap from '../../../hooks/useMap';
-import Grid from '@mui/material/Grid';
-import { ListItemButton } from '@mui/material';
-
-
-const modalStyle = {
-	position: 'absolute',
-	top: '50%',
-	left: '60%',
-	width: 350,
-	height: 280,
-	bgcolor: 'background.paper',
-	boxShadow: 24,
-	p: 4,
-};
-
-const mobileStyle = {
-	position: 'absolute',
-	top: '30%',
-	left: '20%',
-	width: 200,
-	height: 300,
-	bgcolor: 'background.paper',
-	boxShadow: 24,
-	p: 4,
-};
-
-/**
- * MlSpatialElevationProfileDemoViewer returns a button to load a Demo GPX Track into the map.
- */
-const MlGPXDemoLoader = (props) => {
-	
-	const [openModal, setOpenModal] = useState(false);
-		const [infoOpen, setInfoOpen] = useState(false);
-		const [metaData, setMetaData] = useState([]);
-	const [selectedSample, setSelectedSample] = useState();
-	const mapHook = useMap({ mapId: 'map_1' });
-	const dataSource = useContext(GeoJsonContext);
-	const sourceName = 'import-source';
-	const [file, setFile] = useState();
-	const reader = useRef(new FileReader());
-	reader.current.onload = (payload) => {
-		if (!payload) return;
-		setFile(payload.currentTarget.result);
-	};
-
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-	
-	const toogleDrawer = () => {
-		setInfoOpen(!infoOpen);
-	};
-
-	const handleClick = () => {
-		setOpenModal(true);
-	};
-
-	const handleSelect = (e) => {
-		
-		if (e.target.innerText === 'mountain_trail.gpx') {
-			setSelectedSample('assets/sample1.gpx');
-		} else if (e.target.innerText === 'bycycle_tour.gpx') {
-			setSelectedSample('assets/sample2.gpx');
-		} else {
-			setSelectedSample('assets/sample3.gpx');
-		}
-
-		e.target.style.backgroundColor = 'lightgray';
-	};
-
-	useEffect(() => {
-		if (!selectedSample) return;
-		fetch(selectedSample)
-			.then(function (response) {
-				return response.blob();
-			})
-			.then(function (gpx) {
-				reader.current.readAsText(gpx);
-			});
-	}, [selectedSample]);
-
-	const handleLoad = useCallback(() => {
-		addGPXToMap(file);
-		setOpenModal(false);
-	}, [file]);
-
-	const handleClose = () => {
-		setOpenModal(false);
-	};
-
-	const addGPXToMap = (gpxAsString) => {
-		if (!mapHook.map || !dataSource.setData) return;
-		try {
-			setMetaData([]);
-			const domParser = new DOMParser();
-			const gpxDoc = domParser.parseFromString(gpxAsString, 'application/xml');
-			const metadata = gpxDoc.querySelector('metadata');
-			metadata?.childNodes.forEach((node) => {
-				let value = node.textContent;
-				const title = node.nodeName;
-
-				if (node.nodeName === 'link') {
-					value = node.getAttribute('href');
-				}
-				if (value?.trim().length) {
-					const metaDatEntry = {
-						title: title,
-						value: value,
-						id: new Date().getTime(),
-					};
-					setMetaData((prevState) => [...prevState, metaDatEntry]);
-				}
-			});
-			const data = toGeoJSON.gpx(gpxDoc);
-			dataSource.setData(data);
-			mapHook.map.map.getSource(sourceName).setData(data);
-			const bounds = bbox(data);
-			mapHook.map.map.fitBounds(bounds);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-
-	return (
-		<>
-			<Modal
-				open={openModal}
-				onClose={handleClose}
-				aria-labelledby="modal-modal-title"
-				aria-describedby="modal-modal-description"
-			>
-				<Box sx={mediaIsMobile ? mobileStyle : modalStyle}>
-					<Grid container>
-						<Grid xs={10}>
-							<Typography id="modal-modal-title" variant="h6">
-								GPX demo files
-							</Typography>
-						</Grid>
-						<Grid xs={2}>
-							<Button onClick={handleClose}>
-								<CloseIcon sx={{ color: 'black' }} />
-							</Button>
-						</Grid>
-					</Grid>
-					<Divider />
-
-					<List>
-						<ListItem>
-							<ListItemButton value="sample1" onClick={handleSelect}>
-								<ListItemText> mountain_trail.gpx </ListItemText>
-							</ListItemButton>
-						</ListItem>
-						<Divider variant="inset" component="li" />
-						<ListItem>
-							<ListItemButton value="sample2" onClick={handleSelect}>
-								<ListItemText> bycycle_tour.gpx </ListItemText>
-							</ListItemButton>
-						</ListItem>
-						<Divider variant="inset" component="li" />
-						<ListItem>
-							<ListItemButton value="sample3" onClick={handleSelect}>
-								<ListItemText>treckking.gpx </ListItemText>
-							</ListItemButton>
-						</ListItem>
-						<Divider variant="inset" component="li" />
-					</List>
-					
-					<Grid>
-						<Button
-							variant="outlined"
-							onClick={handleLoad}
-							sx={{ display: 'block', marginLeft: 'auto' }}
-						>
-							Load
-						</Button>
-					</Grid>
-				</Box>
-			</Modal>
-
-			<Drawer variant="persistent" anchor="left" open={infoOpen}>
-				<Typography
-					variant="h6"
-					style={{
-						textAlign: "center",
-						padding: "1em",
-					}}
-					noWrap
-				>
-					Informationen zur Route
-				</Typography>
-				<Divider />
-				<List>
-					{metaData.map((item) => (
-						<ListItem key={`item--${item.id}`}>
-							<ListItemText primary={item.value} />
-						</ListItem>
-					))}
-				</List>
-			</Drawer>
-
-			{props.enabled && (
-				<div
-					style={{
-						position: 'fixed',
-						right: '5px',
-						bottom: mediaIsMobile ? '40px' : '25px',
-						display: 'flex',
-						flexDirection: 'column',
-						gap: '5px',
-						zIndex: 3000,
-					}}
-				>
-					<IconButton
-						onClick={handleClick}
-						style={{
-							backgroundColor: '#cbd300',
-						}}
-						size="large"
-					>
-						<FileCopy />
-					</IconButton>
-					<IconButton
-						onClick={toogleDrawer}
-						style={{
-							backgroundColor: '#cbd300',
-						}}
-						size="large"
-					>
-						<InfoIcon />
-					</IconButton>
-				</div>
-			)}
-		</>
-	);
-};
-
-export default MlGPXDemoLoader;

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.js

@@ -1,45 +0,0 @@
-import React from "react";
-
-import MlImageMarkerLayer from "./MlImageMarkerLayer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import wgMarker from "./assets/wg-marker.png";
-
-const storyoptions = {
-	title: "MapComponents/MlImageMarkerLayer",
-	component: MlImageMarkerLayer,
-	argTypes: { },
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<MlImageMarkerLayer
-		options={{
-			type: "symbol",
-			source: {
-				type: "geojson",
-				data: {
-					type: "Feature",
-					properties: {
-						id: "test",
-					},
-					geometry: {
-						type: "Point",
-						coordinates: [7.0847929969609424, 50.73855193187643],
-					},
-				},
-			},
-			layout: {
-				"icon-allow-overlap": true,
-				"icon-size": 0.14,
-				"icon-offset": [0, -180],
-			},
-		}}
-		imgSrc={wgMarker}
-	/>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/components/MlLayerMagnify/MlLayerMagnify.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-
-import MlLayerMagnify from "./MlLayerMagnify";
-import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
-
-import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlLayerMagnify",
-	component: MlLayerMagnify,
-	argTypes: {
-	},
-	decorators: multiMapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<>
-		<MlWmsLayer
-			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-			urlParameters={{
-				layers: "nw_uraufnahme_rw",
-			}}
-			sourceOptions={{
-				minzoom: 13,
-				maxzoom: 20,
-			}}
-			mapId={args.wmsLayerMapId}
-		/>
-		<MlLayerMagnify map1Id="map_1" map2Id="map_2" magnifierRadius={args.magnifierRadius} />
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {
-
-};
-ExampleConfig.args = {
-	wmsLayerMapId: "map_2",
-	magnifierRadius: 200,
-};

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js

@@ -1,224 +0,0 @@
-import React, { useCallback, useRef, useContext, useEffect } from "react";
-import MapContext from "../../contexts/MapContext";
-import GeoJsonContext from "../MlGPXViewer/util/GeoJsonContext";
-import { polygon, lineString } from "@turf/helpers";
-import { distance, lineOffset } from "@turf/turf";
-import { v4 as uuidv4 } from "uuid";
-import PropTypes from "prop-types";
-
-/**
- * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
- *
- * @component
- */
-const MlSpatialElevationProfile = (props) => {
-	const mapContext = useContext(MapContext);
-
-	const componentId = useRef(
-		(props.idPrefix ? props.idPrefix : "MlSpatialElevationProfile-") + uuidv4()
-	);
-	const mapRef = useRef(null);
-	const initializedRef = useRef(false);
-
-	const dataSource = useContext(GeoJsonContext);
-	const sourceName = useRef("elevationprofile-" + uuidv4());
-	const layerName = useRef("elevationprofile-layer-" + uuidv4());
-
-	const createStep = useCallback(
-		(x, y, z, x2, y2) => {
-			//const summand = 0.0002;
-			const line = lineString([
-				[x, y],
-				[x2, y2],
-			]);
-			const offsetLine = lineOffset(line, 5, { units: "meters" });
-			const x3 = offsetLine.geometry.coordinates[0][0];
-			const y3 = offsetLine.geometry.coordinates[0][1];
-			const x4 = offsetLine.geometry.coordinates[1][0];
-			const y4 = offsetLine.geometry.coordinates[1][1];
-
-			return polygon(
-				[
-					[
-						[x, y],
-						[x2, y2],
-
-						[x4, y4],
-						[x3, y3],
-						[x, y],
-					],
-				],
-				{ height: z * props.elevationFactor }
-			);
-		},
-		[props.elevationFactor]
-	);
-
-	useEffect(() => {
-		let _componentId = componentId.current;
-		return () => {
-			// This is the cleanup function, it is called when this react component is removed from react-dom
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-
-				mapRef.current = null;
-			}
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-
-		mapRef.current.addSource(
-			sourceName.current,
-			{
-				type: "geojson",
-				data: dataSource.data,
-			},
-			componentId.current
-		);
-		mapRef.current.addLayer(
-			{
-				id: layerName.current,
-				source: sourceName.current,
-				type: "fill-extrusion",
-				paint: {
-					"fill-extrusion-height": ["get", "height"],
-					"fill-extrusion-opacity": 0.9,
-					"fill-extrusion-color": [
-						"interpolate",
-						["linear"],
-						["get", "height"],
-						0,
-						"rgba(0, 0, 255, 0)",
-						0.1,
-						"royalblue",
-						0.3,
-						"cyan",
-						0.5,
-						"lime",
-						0.7,
-						"yellow",
-						1,
-						"yellow",
-					],
-				},
-			},
-			props.insertBeforeLayer,
-			componentId.current
-		);
-	}, [mapContext.mapIds, props.insertBeforeLayer, props.mapId, dataSource, mapContext]);
-
-	useEffect(() => {
-		if (!mapRef.current || !mapRef.current.getLayer(layerName.current)) return;
-		const { data } = dataSource;
-		if (!data || !data.features) return;
-
-		const line = data.features.find((element) => {
-			return element.geometry.type === "LineString";
-		});
-		if (!line || !line.geometry) return;
-		const heights = line.geometry.coordinates.map((coordinate, index) => {
-			return coordinate[2];
-		});
-
-		const min = Math.min(...heights);
-
-		let max = Math.max(...heights) - min;
-
-		max = max === 0 ? 1 : max;
-
-		mapRef.current.setPaintProperty(layerName.current, "fill-extrusion-color", [
-			"interpolate",
-			["linear"],
-			["get", "height"],
-			0,
-			"rgb(0,255,55)",
-			max * props.elevationFactor,
-			"rgb(255,0,0)",
-		]);
-		const lerp = (x, y, a) => x * (1 - a) + y * a;
-		const points = [];
-
-		line.geometry.coordinates.forEach((coordinate, index) => {
-			//const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
-			//points.push(point);
-			if (line.geometry.coordinates[index + 1]) {
-				const wayLength = distance(
-					[coordinate[0], coordinate[1]],
-					[line.geometry.coordinates[index + 1][0], line.geometry.coordinates[index + 1][1]],
-					{ units: "kilometers" }
-				);
-				let listLength = ~~((wayLength * 1000) / 10);
-				listLength = listLength < 1 ? 1 : listLength;
-				for (let i = 0; i < listLength; i++) {
-					const x = lerp(
-						line.geometry.coordinates[index][0],
-						line.geometry.coordinates[index + 1][0],
-						i / listLength
-					);
-					const y = lerp(
-						line.geometry.coordinates[index][1],
-						line.geometry.coordinates[index + 1][1],
-						i / listLength
-					);
-					const z = lerp(
-						line.geometry.coordinates[index][2] - min,
-						line.geometry.coordinates[index + 1][2] - min,
-						i / listLength
-					);
-
-					const x2 = lerp(
-						line.geometry.coordinates[index][0],
-						line.geometry.coordinates[index + 1][0],
-						(i + 1) / listLength
-					);
-					const y2 = lerp(
-						line.geometry.coordinates[index][1],
-						line.geometry.coordinates[index + 1][1],
-						(i + 1) / listLength
-					);
-
-					const point = createStep(x, y, z, x2, y2);
-					points.push(point);
-				}
-			}
-		});
-
-		const newData = dataSource.getEmptyFeatureCollection();
-		newData.features = points;
-
-		mapRef.current.getSource(sourceName.current)?.setData(newData);
-	}, [dataSource.data, createStep, dataSource, props.elevationFactor, mapContext]);
-
-	return <></>;
-};
-
-MlSpatialElevationProfile.defaultProps = {
-	elevationFactor: 1,
-};
-
-MlSpatialElevationProfile.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix: PropTypes.string,
-	/**
-	 * Number describes the factor of the height of the elevation
-	 */
-	elevationFactor: PropTypes.number,
-	/**
-	 * The layerId of an existing layer this layer should be rendered visually beneath
-	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-	 */
-	insertBeforeLayer: PropTypes.string,
-};
-
-export default MlSpatialElevationProfile;

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js

@@ -1,57 +0,0 @@
-import React from "react";
-
-import MlSpatialElevationProfile from "./MlSpatialElevationProfile";
-import MlGPXViewer from "../MlGPXViewer/MlGPXViewer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import GeoJsonProvider from "../MlGPXViewer/util/GeoJsonProvider";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import IconButton from "@mui/material/IconButton";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-const storyoptions = {
-	title: "MapComponents/MlSpatialElevationProfile",
-	component: MlSpatialElevationProfile,
-	argTypes: {
-		options: {
-			control: {
-				type: "object",
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => {
-
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-
-	return(
-	<>
-		<IconButton
-			style={{
-				position: "absolute",
-				right: "5px",
-				bottom: mediaIsMobile ? "145px" : "125px",
-				backgroundColor: "rgba(255,255,255,1)",
-
-				zIndex: 1000,
-			}}
-			title="Download sample-data"
-			size="large"
-			href="assets/sample.gpx"
-			target="blank"
-		>
-			<FileDownloadIcon />
-		</IconButton>
-		<GeoJsonProvider>
-			<MlGPXViewer />
-			<MlSpatialElevationProfile />
-		</GeoJsonProvider>
-	</>
-);
-}
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlThreeJsLayer/MlThreeJsLayer.stories.js

@@ -1,39 +0,0 @@
-import React, { useContext } from "react";
-
-import TopToolbar from "../../ui_components/TopToolbar";
-import MlThreeJsLayer from "./MlThreeJsLayer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import { LoadingOverlayContext } from "../../ui_components/LoadingOverlayContext";
-
-const storyoptions = {
-	title: "MapComponents/MlThreeJsLayer",
-	component: MlThreeJsLayer,
-	argTypes: {
-		options: {
-			control: {
-				type: "object",
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => {
-	const loadingOverlayContext = useContext(LoadingOverlayContext);
-
-	return (
-		<TopToolbar>
-			<MlThreeJsLayer
-				init={() => loadingOverlayContext?.setControlled?.(true)}
-				onDone={() =>
-					setTimeout(() => loadingOverlayContext?.setLoadingDone?.(true), 1200)
-				}
-			/>
-		</TopToolbar>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlWmsLoader/MlWmsLoader.stories.js

@@ -1,47 +0,0 @@
-import React, { useState } from "react";
-
-import MlWmsLoader from "./MlWmsLoader";
-
-import TextField from "@mui/material/TextField";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import Sidebar from "../../ui_components/Sidebar";
-
-const storyoptions = {
-	title: "MapComponents/MlWmsLoader",
-	component: MlWmsLoader,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	const [url, setUrl] = useState(props.url);
-
-	return (
-		<>
-			<Sidebar sx={{ wordBreak: "break-word" }}>
-				<TextField
-					label="WMS Url"
-					variant="standard"
-					value={url}
-					onChange={(ev) => setUrl(ev.target.value)}
-				/>
-				<MlWmsLoader {...props} url={url} />
-			</Sidebar>
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	/**
-	 * try https://maps.heigit.org/histosm/wms or https://magosm.magellium.com/geoserver/wms
-	 * https://www.wms.nrw.de/wms/kitas
-	 * https://www.wms.nrw.de/geobasis/wms_nw_vdop
-	 */
-	url: "https://www.wms.nrw.de/geobasis/wms_nw_vdop",
-};