@mapcomponents/react-maplibre 0.1.61 → 0.1.63

package/src/components/MlGPXViewer/MlGPXViewer.stories.js

@@ -1,17 +1,21 @@
-import React from "react";
-
-import MlGPXViewer from "./MlGPXViewer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import GeoJsonProvider from "./util/GeoJsonProvider";
+import React, { useState } from 'react';
+import MlGPXViewer from './MlGPXViewer';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import GeoJsonProvider from './util/GeoJsonProvider';
+import MlGPXViewerInstructions from './util/MlGPXViewerInstructions';
+import TopToolbar from '../../ui_components/TopToolbar';
+import { Button, IconButton } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import MlGPXDemoLoader from './util/demoViewer';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
 
 const storyoptions = {
-	title: "MapComponents/MlGPXViewer",
+	title: 'MapComponents/MlGPXViewer',
 	component: MlGPXViewer,
 	argTypes: {
 		options: {
 			control: {
-				type: "object",
+				type: 'object',
 			},
 		},
 	},
@@ -19,13 +23,69 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => (
-	<>
-		<GeoJsonProvider>
-			<MlGPXViewer />
-		</GeoJsonProvider>
-	</>
-);
+const Template = () => {
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [demoMode, setDemoMode] = useState(false);
+	const [guide, setGuide] = useState(false);
+
+	const handleClick1 = () => {
+		setDemoMode(!demoMode);
+		
+	};
+	const handleClick2 = ()=>{
+		setGuide(true);
+		setTimeout(()=>{
+			setGuide(false)
+		}, 9000);
+	}
+
+	const textColor = () =>{
+		if(demoMode){
+			return "white"
+		} else {
+			return "steelblue"
+		}
+	}
+
+	const textColor2 = () =>{
+		if(guide){
+			return "white"
+		} else {
+			return "steelblue"
+		}
+	}
+
+	return (
+		<>
+			<TopToolbar>
+				<MlGPXViewerInstructions open={guide} />
+				<Button variant="contained" onClick={handleClick2}  color={guide ? "primary" : "inherit"} sx={{ color: textColor2, marginRight: '10px' }}> Guide me through</Button>
+				<Button variant="contained" onClick={handleClick1} color={demoMode ? "primary" : "inherit"} sx={{ color: textColor }}> 
+					Demo Mode
+				</Button>
+			</TopToolbar>
+			<IconButton
+				style={{
+					position: 'absolute',
+					right: '5px',
+					bottom: mediaIsMobile ? '145px' : '130px',
+					backgroundColor: 'rgba(255,255,255,1)',
+					zIndex: 1000,
+				}}
+				title="Download sample-data"
+				size="large"
+				href="assets/sample.gpx"
+				target="blank"
+			>
+				<FileDownloadIcon />
+			</IconButton>
+			<GeoJsonProvider>
+				<MlGPXDemoLoader enabled={demoMode} />
+				<MlGPXViewer />
+			</GeoJsonProvider>
+		</>
+	);
+};
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};

package/src/components/MlGPXViewer/MlGPXViewer.tsx

@@ -233,7 +233,7 @@ const MlGPXViewer = (props:MlGPXViewerProps) => {
 				if (node.nodeName === "link") {
 					value = node.getAttribute("href");
 				}
-				if (!!value?.trim().length) {
+				if (value?.trim().length) {
 					const metaDatEntry = {
 						title: title,
 						value: value,
@@ -278,6 +278,8 @@ const MlGPXViewer = (props:MlGPXViewerProps) => {
 
 		fileupload.current.click();
 	};
+
+		
 	return (
 		<>
 			<div

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

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { Grid } from '@mui/material';
+import ReplyAllIcon from '@mui/icons-material/ReplyAll';
+import Fade from '@mui/material/Fade';
+
+const divStyle = {
+	width: 450,
+	height: 450,
+	position: 'fixed',
+	//right: '5px',
+	//bottom: '25px',
+	display: 'block',
+	flexDirection: 'column',
+	gap: '5px',
+	zIndex: 900,
+	borderRadius: 360,
+	right: -120,
+	bottom: -120,
+	backgroundColor: 'steelblue',
+	alignItems: 'center',
+};
+
+export default function MlGPXViewerInstructions(props) {
+	const [step1, setStep1] = useState(false);
+	const [step2, setStep2] = useState(false);
+	const [step3, setStep3] = useState(false);
+
+	useEffect(() => {
+		if (props.open) {
+			setStep1(true);
+
+			setTimeout(() => {
+				setStep2(true);
+				setStep1(false);
+			}, 2500);
+			setTimeout(() => {
+				setStep3(true);
+			}, 5000);
+
+			setTimeout(() => {
+				setStep2(false);
+			}, 5000);
+			setTimeout(() => {
+				setStep3(false);
+				props.callback(false);
+			}, 9000);
+		} else {
+			return;
+		}
+	}, [props.open]);
+
+	return (
+		<>
+			{step1 && (
+			<Fade in={step1} timeout={150}>
+				<div style={divStyle} >
+					<h2 style={{ marginTop: 100, marginLeft: 100, color: 'white', textAlign: 'left' }}>
+						You can load your <br />
+						own GPX file <br /> here
+					</h2>
+					<ReplyAllIcon
+						sx={{
+							color: 'white',
+							fontSize: 80,
+							transform: 'rotate(180deg)',
+							marginTop: -3,
+							marginLeft: 22,
+						}}
+					/>
+				</div>
+				</Fade>
+			)}
+
+			{step2 && (
+				<Fade in={step2} timeout={150}>
+				<div style={divStyle}>
+					<Grid>
+						<h2 style={{ marginTop: 100, marginLeft: 100, color: 'white', textAlign: 'left' }}>
+							You can see more <br />  information about <br />
+							the track <br />
+							here
+						</h2>
+					</Grid>
+
+					<Grid>
+						<ReplyAllIcon
+							sx={{
+								color: 'white',
+								fontSize: 80,
+								transform: 'rotate(180deg)',
+								marginTop: 1,
+								marginLeft: 22,
+							}}
+						/>
+					</Grid>
+				</div>
+				</Fade>
+			)}
+			{step3 && (
+				<Fade in={step3} timeout={1500}>
+				<div
+					style={{
+						width: 450,
+						height: 450,
+						position: 'fixed',
+						//left: '5px',
+						//top: '25px',
+						display: 'block',
+						flexDirection: 'column',
+						gap: '5px',
+						//zIndex: 500,
+						borderRadius: 360,
+						left: -40,
+						top: -150,
+						backgroundColor: 'steelblue',
+						opacity: 1,
+						alignItems: 'center',
+						transition:'ease-in',
+						transitionProperty:'opacity',
+						
+					}}
+				>
+					<Grid>
+						<h2 style={{ marginTop: 230, marginRight: 190, color: 'white', textAlign: 'right' }}>
+							In demo mode we <br /> provide you some <br />  GPX tracks <br /> to load.
+						</h2>
+					</Grid>
+					<Grid>
+						<ReplyAllIcon
+							sx={{
+								color: 'white',
+								fontSize: 80,
+								position: 'absolute',
+								transform: 'rotate(90deg)',
+								marginTop: -18,
+								marginLeft: 35,
+							}}
+						/>
+					</Grid>
+				</div>
+				</Fade>
+			)}
+		</>
+	);
+}

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

@@ -0,0 +1,2 @@
+
+

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: '',
+};