@mapcomponents/react-maplibre 0.1.62 → 0.1.63

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

@@ -0,0 +1,254 @@
+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/MlGeoJsonLayer/MlGeoJsonLayer.stories.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, useEffect } from 'react';
+import MlGeoJsonLayer from './MlGeoJsonLayer';
+import useMap from '../../hooks/useMap';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import PolygonStyler from './story_utils/MlGeoJsonLayer.polygonStyler';
+import LineStyler from './story_utils/MlGeoJsonLayer.lineStyler';
+import sample_geojson_1 from './assets/sample_1.json';
+import sample_geojson_2 from './assets/sample_2.json';
+import { GeoJSONObject } from '@turf/turf';
+
+const storyoptions = {
+	title: 'MapComponents/MlGeoJsonLayer',
+	component: MlGeoJsonLayer,
+
+	argTypes: {},
+
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+interface TemplateProps {
+	geojson: GeoJSONObject;
+	mapId: string;
+	type: string;
+}
+
+const Template = (props: TemplateProps) => {
+	const mapHook = useMap({
+		mapId: undefined,
+	});
+
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapHook.map.map.flyTo({ center: [7.100175528281227, 50.73487992742369], zoom: 15 });
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<LineStyler {...props} />
+		</>
+	);
+};
+const PolygonTemplate = (props: TemplateProps) => {
+	const mapHook = useMap({
+		mapId: undefined,
+	});
+
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapHook.map.map.flyTo({ center: [7.100175528281227, 50.73487992742369], zoom: 15 });
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<PolygonStyler {...props} />
+		</>
+	);
+};
+
+export const Linestring = Template.bind({});
+Linestring.parameters = {};
+Linestring.args = {
+	geojson: sample_geojson_2,
+	mapId: 'Map_1',
+	/*paint:{
+		"stroke-color": 'rgba(123,20,80)',
+		"fill-opacity": 0
+	},*/
+	type: 'line',
+};
+
+export const Polygon = PolygonTemplate.bind({});
+
+Polygon.args = {
+	geojson: sample_geojson_1,
+};
+
+export const DefaultPaintOverrides = Template.bind({});
+DefaultPaintOverrides.parameters = {};
+DefaultPaintOverrides.args = {
+	defaultPaintOverrides: {
+		fill: {
+			'fill-color': 'blue',
+		},
+		circle: {
+			'circle-color': 'red',
+		},
+		line: {
+			'line-color': 'black',
+		},
+	},
+	geojson: sample_geojson_1,
+	type: '',
+};

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -1,15 +1,20 @@
-import React from "react";
+import React from 'react';
 
-import useLayer from "../../hooks/useLayer";
+import useLayer from '../../hooks/useLayer';
 
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuidv4 } from 'uuid';
 
-import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
-import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
-import { Feature, FeatureCollection } from "@turf/turf";
+import getDefaultPaintPropsByType from './util/getDefaultPaintPropsByType';
+import getDefaulLayerTypeByGeometry from './util/getDefaultLayerTypeByGeometry';
+import { Feature, FeatureCollection } from '@turf/turf';
 
-
-import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+import {
+	LineLayerSpecification,
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	MapLayerMouseEvent,
+	LayerSpecification,
+} from 'maplibre-gl';
 
 type MlGeoJsonLayerProps = {
 	/**
@@ -19,7 +24,7 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * 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.
-	 * This layer will not be added to the maplibre-gl instance until a layer with an 
+	 * This layer will not be added to the maplibre-gl instance until a layer with an
 	 * id that matches the value of insertBeforeLayer is created.
 	 */
 	insertBeforeLayer?: string;
@@ -35,7 +40,7 @@ type MlGeoJsonLayerProps = {
 	 * Type of the layer that will be added to the MapLibre instance.
 	 * Possible values: "line", "circle", "fill"
 	 */
-	type?: "fill" | "line" | "circle";
+	type?: 'fill' | 'line' | 'circle';
 	/**
 	 * Paint property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -43,7 +48,10 @@ type MlGeoJsonLayerProps = {
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+	paint?:
+		| CircleLayerSpecification['paint']
+		| FillLayerSpecification['paint']
+		| LineLayerSpecification['paint'];
 	/**
 	 * Layout property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -51,7 +59,10 @@ type MlGeoJsonLayerProps = {
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
+	layout?:
+		| CircleLayerSpecification['layout']
+		| FillLayerSpecification['layout']
+		| LineLayerSpecification['layout'];
 	/**
 	 * Javascript object that is spread into the addLayer commands first parameter.
 	 */
@@ -59,7 +70,11 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
 	 */
-	defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
+	defaultPaintOverrides?: {
+		circle?: CircleLayerSpecification['paint'];
+		fill?: FillLayerSpecification['paint'];
+		line?: LineLayerSpecification['paint'];
+	};
 	/**
 	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
 	 */
@@ -73,27 +88,23 @@ type MlGeoJsonLayerProps = {
 	 * left/unhovered.
 	 */
 	onLeave?: MapLayerMouseEvent;
-}
+};
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
  *
  * @component
  */
+
 const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
 	const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	useLayer({
 		mapId: props.mapId,
-		layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
+		layerId: props.layerId || 'MlGeoJsonLayer-' + uuidv4(),
 		geojson: props.geojson,
 		options: {
-			paint:
-				props.paint ||
-				getDefaultPaintPropsByType(
-					layerType,
-					props.defaultPaintOverrides
-				),
+			paint: props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides),
 			layout: props.layout || {},
 			...props.options,
 			type: layerType as LayerSpecification['type'],
@@ -104,8 +115,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
 		onLeave: props.onLeave,
 	});
 
-	return (<></>);
+	return <></>;
 };
 
-
 export default MlGeoJsonLayer;

package/src/components/MlGeoJsonLayer/assets/sample_1.json

@@ -1,26 +1,140 @@
 {
-  "type": "Feature",
-  "properties": {},
-  "geometry": {
-    "type": "LineString",
-    "coordinates": [
-      [7.1074676513671875, 50.74340774029213],
-      [7.0992279052734375, 50.756441089372665],
-      [7.079315185546874, 50.764693667025014],
-      [7.045669555664062, 50.77945780529241],
-      [7.030563354492187, 50.79161300845443],
-      [7.0291900634765625, 50.80940599750376],
-      [7.0236968994140625, 50.820685846099174],
-      [7.0085906982421875, 50.825891011253546],
-      [6.9879913330078125, 50.826758482363275],
-      [6.97906494140625, 50.835432306955276],
-      [6.9824981689453125, 50.84583876895451],
-      [6.9962310791015625, 50.85147463352982],
-      [7.012023925781249, 50.85710981721644],
-      [7.021636962890625, 50.86664473085768],
-      [7.0367431640625, 50.872278081520406],
-      [7.0477294921875, 50.877044231111014],
-      [7.052536010742187, 50.88397594225127]
-    ]
-  }
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"id": "1",
+			"type": "Feature",
+			"properties": { "name": "Hofgarten" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.104246282215286, 50.734109601136055],
+						[7.10209443365315, 50.732370465826534],
+						[7.104720792410859, 50.73113417375197],
+						[7.1049635650692835, 50.73112718895845],
+						[7.105724988405626, 50.73137864087451],
+						[7.107071273146147, 50.73179073970729],
+						[7.107060238024758, 50.73190249469832],
+						[7.106629868312979, 50.732552065303736],
+						[7.104246282215286, 50.734109601136055]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "2",
+			"type": "Feature",
+			"properties": { "name": "Stadtgarten" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.105893155288783, 50.73444907786518],
+						[7.106402034397206, 50.733582900352985],
+						[7.106897536862704, 50.73369549309848],
+						[7.107111352729277, 50.7336105803617],
+						[7.107157469878132, 50.733549549237495],
+						[7.108406816456494, 50.733927190803854],
+						[7.1084747528756225, 50.73402627417772],
+						[7.10853382802236, 50.734039360645426],
+						[7.1083093424639685, 50.73448242889327],
+						[7.108247313560071, 50.73447868993853],
+						[7.108226637258156, 50.734508601570155],
+						[7.107907631465423, 50.734559077405464],
+						[7.107694960936584, 50.73457777214577],
+						[7.107597486944087, 50.734575902671935],
+						[7.107576810643138, 50.73462077001935],
+						[7.108185284655264, 50.734633856320954],
+						[7.108087810663733, 50.73492362349066],
+						[7.107910600755304, 50.734888120981594],
+						[7.107875467179866, 50.734952050517165],
+						[7.107778849851883, 50.73496038914578],
+						[7.107682232521427, 50.734963168688125],
+						[7.10769979930771, 50.7350132004259],
+						[7.107339680163761, 50.73499652318577],
+						[7.107221104348952, 50.73497706639833],
+						[7.107278196408828, 50.73488534143442],
+						[7.107019086291899, 50.73484364820982],
+						[7.106988344414447, 50.734927034622416],
+						[7.106514041150831, 50.73484364820982],
+						[7.106606266786173, 50.734604606338195],
+						[7.105893155288783, 50.73444907786518]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "3",
+			"type": "Feature",
+			"properties": { "name": "Opernplatz" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.104632320011916, 50.736606042555366],
+						[7.104779316251751, 50.736422797521044],
+						[7.104817178920001, 50.7363283555695],
+						[7.104868404882268, 50.736319898072],
+						[7.105434117684382, 50.73653415420432],
+						[7.105596704435243, 50.736569393605805],
+						[7.105797153853388, 50.73659758510803],
+						[7.105725882948974, 50.73684848872955],
+						[7.105338347406786, 50.736800563422435],
+						[7.1051824423039704, 50.73677237204271],
+						[7.104863950451204, 50.73668356908482],
+						[7.104632320011916, 50.736606042555366]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "2c3972ac51f4350582ecc9de57d47c75",
+			"type": "Feature",
+			"properties": { "name": "Keiserplatz" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.100878520474112, 50.73167947463554],
+						[7.100876728417518, 50.731653654340704],
+						[7.100857282327439, 50.731633541894354],
+						[7.10079841102764, 50.73157086579248],
+						[7.100757419228046, 50.731538946883745],
+						[7.100606042670478, 50.73140800018959],
+						[7.100525308506718, 50.73136967425927],
+						[7.10037393194915, 50.731331348297005],
+						[7.100313381326117, 50.731308991470826],
+						[7.100267968358821, 50.73127226237719],
+						[7.100184711252609, 50.73119561026192],
+						[7.099690214497514, 50.73138724031432],
+						[7.099691475969678, 50.73140400766788],
+						[7.099861143861631, 50.73141398829278],
+						[7.0998571229209375, 50.73145675554436],
+						[7.099832918440285, 50.73150591044205],
+						[7.099780384599569, 50.73155556557083],
+						[7.099892082101547, 50.73155547486934],
+						[7.099882074627317, 50.73158758317477],
+						[7.0999202108099695, 50.73158998765363],
+						[7.099912858928455, 50.73159899760262],
+						[7.0999207681442975, 50.73160353227202],
+						[7.099921690047621, 50.7316057996082],
+						[7.099930036031913, 50.73160923675198],
+						[7.100091909667459, 50.731627463555895],
+						[7.100165737828326, 50.731649680201066],
+						[7.1003014331650665, 50.731709520224214],
+						[7.100316426855426, 50.73173557596814],
+						[7.100384577793838, 50.73178469147469],
+						[7.100415620558475, 50.731796580130755],
+						[7.100494222199336, 50.7318078992016],
+						[7.100585685541193, 50.731804728779615],
+						[7.100677188738862, 50.73177247244158],
+						[7.100842140282873, 50.73170978389162],
+						[7.100873170896176, 50.73169013008063],
+						[7.100878520474112, 50.73167947463554]
+					]
+				],
+				"type": "Polygon"
+			}
+		}
+	]
 }