@mapcomponents/react-maplibre 0.1.63 → 0.1.64

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

@@ -0,0 +1,65 @@
+{
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"id": "1",
+			"type": "Feature",
+			"properties": {
+				"Standort": "Bonn",
+				"Mitarbeitende": 26
+			},
+			"geometry": {
+				"coordinates": [
+					7.085121767634178,
+					50.738628929850876
+				],
+				"type": "Point"
+			}
+		},
+		{
+			"id": "2",
+			"type": "Feature",
+			"properties": {
+				"Standort": "Freiburg",
+				"Mitarbeitende": 10
+			},
+			"geometry": {
+				"coordinates": [
+					7.842759788570362,
+					47.98905444717667
+				],
+				"type": "Point"
+			}
+		},
+		{
+			"id": "3",
+			"type": "Feature",
+			"properties": {
+				"Standort": "Berlin",
+				"Mitarbeitende": 13
+			},
+			"geometry": {
+				"coordinates": [
+					13.330420447460796,
+					52.492768290796676
+				],
+				"type": "Point"
+			}
+		},
+		{
+			"id": "4",
+			"type": "Feature",
+			"properties": {
+				"Standort": "Hamburg",
+				"Mitarbeitende": 3
+			},
+			"geometry": {
+				"coordinates": [
+					10.041789021808029,
+					53.5511363175323
+				],
+				"type": "Point"
+			}
+		}
+	]
+}

package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
+
+const CircleMapStyler = (props: MlGeoJsonLayerProps) => {
+	return <MlGeoJsonLayer {...props} />;
+};
+
+export default CircleMapStyler;

package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
+
+const HeatMapStyler = (props: MlGeoJsonLayerProps) => {
+
+	return <MlGeoJsonLayer {...props} />;
+};
+
+export default HeatMapStyler;

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/{MlGPXViewer/MlGPXViewer.meta.json → MlGpxViewer/MlGpxViewer.meta.json}

@@ -1,5 +1,5 @@
 {
-  "name": "MlGPXViewer",
+  "name": "MlGpxViewer",
   "title": "GPX viewer",
   "description": "",
   "i18n": {
@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlGpxViewer/MlGpxViewer.stories.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import MlGpxViewer from './MlGpxViewer';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+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/MlGpxDemoLoader';
+import FileCopy from '@mui/icons-material/FileCopy';
+import InfoIcon from '@mui/icons-material/Info';
+import Dropzone from '../../ui_components/Dropzone';
+import UploadButton from '../../ui_components/UploadButton';
+import MetadataDrawer from './util/MetadataDrawer';
+import { MetadataType } from '../../hooks/useGpx/useGpx';
+
+const storyoptions = {
+	title: 'MapComponents/MlGpxViewer',
+	component: MlGpxViewer,
+	argTypes: {
+		options: {
+			control: {
+				type: 'object',
+			},
+		},
+	},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => {
+	const [gpxData, setGpxData] = useState<string | ArrayBuffer | undefined>();
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [demoLoaderOpen, setDemoLoaderOpen] = useState(false);
+	const [guide, setGuide] = useState(false);
+	const [metadataDrawerOpen, setMetadataDrawerOpen] = useState(false);
+	const [metadata, setMetadata] = useState<MetadataType[]>([]);
+
+	const handleClick1 = () => {
+		setDemoLoaderOpen(!demoLoaderOpen);
+	};
+	const handleClick2 = () => {
+		setGuide(true);
+		setTimeout(() => {
+			setGuide(false);
+		}, 9000);
+	};
+
+	return (
+		<>
+		<MlGpxViewerInstructions open={guide} />
+		<MlGpxDemoLoader open={demoLoaderOpen} setOpen={setDemoLoaderOpen} setGpx={setGpxData} />
+			<TopToolbar appBarStyle={{ zIndex: 500 }}>
+				<Button variant="contained" onClick={handleClick2} sx={{ marginRight: '10px' }}>
+					Guide me through
+				</Button>
+				<Button variant="contained" onClick={handleClick1}>
+					Demo Mode
+				</Button>
+			</TopToolbar>
+			
+			
+			<div
+				style={{
+					position: 'fixed',
+					right: '5px',
+					bottom: mediaIsMobile ? '40px' : '25px',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '5px',
+					zIndex: 1000,
+				}}
+			>
+				<UploadButton
+					setData={setGpxData}
+					buttonComponent={
+						<IconButton
+							style={{
+								backgroundColor: 'rgba(255,255,255,1)',
+							}}
+							size="large"
+						>
+							<FileCopy />
+						</IconButton>
+					}
+				/>
+				<IconButton
+					onClick={() => {
+						setMetadataDrawerOpen((prevState) => !prevState);
+					}}
+					style={{
+						backgroundColor: 'rgba(255,255,255,1)',
+					}}
+					size="large"
+				>
+					<InfoIcon />
+				</IconButton>
+			</div>
+			<MetadataDrawer metadata={metadata} open={metadataDrawerOpen} />
+			<Dropzone setData={(data) => setGpxData(data)} />
+			<MlGpxViewer
+				gpxData={gpxData as string | undefined}
+				onParseGpxData={(parsedGpx) => setMetadata(parsedGpx.metadata ? parsedGpx.metadata : [])}
+			/>
+		</>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};

package/src/components/MlGpxViewer/MlGpxViewer.test.js

@@ -0,0 +1,53 @@
+import { layerRemovalTest, sourceRemovalTest } from '../../util';
+
+import MlGpxViewer from './MlGpxViewer';
+import { uuid_regex } from '../../setupTests';
+
+const gpxSample = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<gpx version="1.1" creator="outdooractive - http://www.outdooractive.com" xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd" xmlns:oa="http://www.outdooractive.com/GPX/Extensions/1">
+	<metadata>
+		<name>Traumpfad Bergheidenweg</name>
+		<author>
+			<name>Nicole Pfeifer - Rhein-Mosel-Eifel-Touristik</name>
+		</author>
+		<link href="https://www.outdooractive.com/r/1386783"/>
+		<time>2021-04-08T13:53:11.658</time>
+		<extensions>
+			<oa:oaCategory>hikingTourTrail</oa:oaCategory>
+		</extensions>
+	</metadata>
+	<wpt lon="7.07093" lat="50.369418">
+		<ele>423</ele>
+		<name>HausAcht - Tagungs- und Freizeithaus</name>
+		<desc></desc>
+		<src>feratel-eifel.21430.e4c23207-9b3e-47bc-a359-730147d57644</src>
+		<link href="https://www.HausAcht.de"/>
+		<type>Ferienwohnung</type>
+	</wpt>
+</gpx>`;
+
+// eslint-disable-next-line react/react-in-jsx-scope
+const testComponent = <MlGpxViewer gpxData={gpxSample} />;
+
+let sourceTestParams = [
+	'<MlGpxViewer />',
+	testComponent,
+	new RegExp('^.*"gpx-viewer-source-' + uuid_regex + '".*$'),
+	'gpx-viewer-source',
+];
+let layer1TestParams = [
+	'<MlGpxViewer />',
+	testComponent,
+	new RegExp('^.*"importer-layer-lines-' + uuid_regex + '".*$'),
+	'importer-layer-lines',
+];
+let layer2TestParams = [
+	'<MlGpxViewer />',
+	testComponent,
+	new RegExp('^.*"importer-layer-points-' + uuid_regex + '".*$'),
+	'importer-layer-points',
+];
+
+layerRemovalTest(...layer1TestParams);
+layerRemovalTest(...layer2TestParams);
+sourceRemovalTest(...sourceTestParams);

package/src/components/MlGpxViewer/MlGpxViewer.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from 'react';
+import { bbox, featureCollection, FeatureCollection } from '@turf/turf';
+import { LngLatBoundsLike } from 'maplibre-gl';
+import useMap from '../../hooks/useMap';
+import useGpx, { MetadataType } from '../../hooks/useGpx/useGpx';
+import useLayerHoverPopup from '../../hooks/useLayerHoverPopup/useLayerHoverPopup';
+import useSource from '../../hooks/useSource';
+import useLayer from '../../hooks/useLayer';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface MlGpxViewerProps {
+	/**
+	 * Id of the target MapLibre instance in mapHook
+	 */
+	mapId?: string;
+	/**
+	 * 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?: string;
+	/**
+	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+	 */
+	idPrefix?: string;
+	gpxData: string | undefined;
+	onParseGpxData: (arg0: {
+		geojson: FeatureCollection | undefined;
+		metadata: MetadataType[];
+	}) => void;
+}
+
+/**
+ * MlGpxViewer visualizes a given GPX Track on the map
+ */
+const MlGpxViewer = (props: MlGpxViewerProps) => {
+	const parsedGpx = useGpx({ data: props.gpxData });
+	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+	const sourceName = useRef('gpx-viewer-source-' + uuidv4());
+	const layerNameLines = useRef('importer-layer-lines-' + uuidv4());
+	const layerNamePoints = useRef('importer-layer-points-' + uuidv4());
+
+	useLayerHoverPopup({
+		layerId: layerNamePoints.current,
+		getPopupContent: (feature) => feature?.properties?.name,
+	});
+
+	useSource({
+		mapId: props.mapId,
+		sourceId: sourceName.current,
+		source: {
+			type: 'geojson',
+			data: parsedGpx.geojson || featureCollection([]),
+		},
+	});
+
+	useLayer({
+		layerId: layerNameLines.current,
+		source: sourceName.current,
+		options: {
+			type: 'line',
+			paint: {
+				'line-width': 4,
+				'line-color': 'rgba(212, 55, 23,0.5)',
+			},
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+	});
+
+	useLayer({
+		layerId: layerNamePoints.current,
+		source: sourceName.current,
+		options: {
+			type: 'circle',
+			paint: {
+				'circle-color': 'rgba(72, 77, 99,0.5)',
+				'circle-radius': 7,
+			},
+			filter: ['==', '$type', 'Point'],
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+	});
+
+	useEffect(() => {
+
+	    if (!mapHook.map || !parsedGpx.geojson) return;
+
+		if (typeof props.onParseGpxData === 'function') {
+			props.onParseGpxData(parsedGpx);
+		}
+		
+		// fit map view to GeoJSON bbox
+		
+		const bounds = bbox(parsedGpx.geojson);
+		mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);
+				
+	}, [parsedGpx]);
+
+	return <></>;
+};
+
+MlGpxViewer.defaultProps = {};
+
+export default MlGpxViewer;

package/src/components/MlGpxViewer/util/MetadataDrawer.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { MetadataType } from '../../../hooks/useGpx/useGpx';
+
+type Props = {
+  metadata: MetadataType[];
+  open: boolean;
+}
+
+export default function MetadataDrawer(props: Props) {
+  return (
+			<Drawer variant="persistent" anchor="left" open={props.open}>
+				<Typography
+					variant="h6"
+					style={{
+						textAlign: 'center',
+						padding: '1em',
+					}}
+					noWrap
+				>
+					Informationen zur Route
+				</Typography>
+				<Divider />
+				<List>
+					{props.metadata?.length && props.metadata.map((item, idx) => (
+						<ListItem key={`item--${idx}`}>
+							<ListItemText primary={item.value} />
+						</ListItem>
+					))}
+				</List>
+			</Drawer>
+  )
+}

package/src/components/MlGpxViewer/util/MlGpxDemoLoader.tsx

@@ -0,0 +1,128 @@
+import React, { useRef } from 'react';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import useMediaQuery from '@mui/material/useMediaQuery';
+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,
+};
+
+interface MlGpxDemoLoaderProps {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	setGpx: (gpx: string | undefined) => void;
+}
+
+const samples = [
+	{
+		name: 'mountain_trail.gpx',
+		path: 'assets/sample1.gpx',
+	},
+	{
+		name: 'bycycle_tour.gpx',
+		path: 'assets/sample2.gpx',
+	},
+	{
+		name: 'treckking.gpx',
+		path: 'assets/sample3.gpx',
+	},
+];
+/**
+ * MlGpxDemoLoader returns a button to load a Demo GPX Track into the map.
+ */
+const MlGpxDemoLoader = (props: MlGpxDemoLoaderProps) => {
+	const reader = useRef(new FileReader());
+	reader.current.onload = () => {
+		if (!reader?.current?.result) return;
+		if (typeof reader.current.result === 'string') {
+			props.setGpx(reader.current.result);
+		}
+		handleClose();
+	};
+
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+
+	const loadSample = (samplePath: string) => {
+		fetch(samplePath)
+			.then(function (response) {
+				return response.blob();
+			})
+			.then(function (gpx) {
+				reader.current.readAsText(gpx);
+			})
+			.catch((error) => console.log(error));
+	};
+
+	const handleClose = () => {
+		props.setOpen(false);
+	};
+
+	return (
+		<>
+			<Modal
+				open={props.open}
+				onClose={handleClose}
+				aria-labelledby="modal-modal-title"
+				aria-describedby="modal-modal-description"
+			>
+				<Box sx={mediaIsMobile ? mobileStyle : modalStyle}>
+					<Grid container>
+						<Grid item xs={10}>
+							<Typography id="modal-modal-title" variant="h6">
+								GPX demo files
+							</Typography>
+						</Grid>
+						<Grid item xs={2}>
+							<Button onClick={handleClose}>
+								<CloseIcon sx={{ color: 'black' }} />
+							</Button>
+						</Grid>
+					</Grid>
+					<Divider />
+
+					<List>
+						{samples.map((el, idx) => (
+							<>
+								<ListItem key={idx}>
+									<ListItemButton onClick={() => loadSample(el.path)}>
+										<ListItemText>{el.name}</ListItemText>
+									</ListItemButton>
+								</ListItem>
+								<Divider key={'div' + idx} variant="inset" component="li" />
+							</>
+						))}
+					</List>
+				</Box>
+			</Modal>
+		</>
+	);
+};
+
+export default MlGpxDemoLoader;

package/src/components/MlGpxViewer/util/MlGpxViewerInstructions.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Instructions from '../../../util/Instructions';
+
+const bubbleBottomRightStyle = {
+	bubbleRight: '-120px',
+	bubbleBottom: '-120px',
+	textMarginTop: '70px',
+	textMarginLeft: '120px',
+	iconTransform: 'rotate(180deg)',
+	iconMarginLeft: '200px',
+	zIndex: 200
+};
+
+const steps = [
+		{
+			duration: 3000,
+			props: {
+				...bubbleBottomRightStyle,
+				iconMarginTop: '43px',
+							},
+			content: (
+				<>
+					You can load your <br />
+					own GPX file <br /> here
+				</>
+			),
+		},
+		{
+			duration: 3000,
+			props: {
+				...bubbleBottomRightStyle,
+				iconMarginTop: '68px',
+			},
+			content: (
+				<>
+					You can see more <br /> information about <br />
+					the track <br />
+					here
+				</>
+			),
+		},
+		{
+			duration: 3000,
+			props: {
+				bubbleLeft: '-40px',
+				bubbleTop: '-150px',
+				textMarginTop: '230px',
+				textMarginLeft: '75px',
+				iconTransform: 'rotate(90deg)',
+				iconMarginTop: '-135px',
+				iconMarginLeft: '280px',
+				zIndex: 400
+			},
+			content: (
+				<>
+					In demo mode we <br /> provide you some <br /> GPX tracks <br /> to load.
+				</>
+			),
+		},
+	];
+export default function MlGpxViewerInstructions(props: { open: boolean}) {
+	
+	return (
+		<>
+			<Instructions steps={steps} open={props.open} />
+		</>
+	);
+}

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.tsx

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