@mapcomponents/react-maplibre 0.1.63 → 0.1.64

package/dist/components/MlGPXViewer/util/MlGPXViewerInstructions.d.ts

@@ -1 +0,0 @@
-export default function MlGPXViewerInstructions(props: any): JSX.Element;

package/dist/components/MlGPXViewer/util/demoViewer.d.ts

@@ -1,5 +0,0 @@
-export default MlGPXDemoLoader;
-/**
- * MlSpatialElevationProfileDemoViewer returns a button to load a Demo GPX Track into the map.
- */
-declare function MlGPXDemoLoader(props: any): JSX.Element;

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

@@ -1,91 +0,0 @@
-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',
-	component: MlGPXViewer,
-	argTypes: {
-		options: {
-			control: {
-				type: 'object',
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-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.test.js

@@ -1,28 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlGPXViewer from "./MlGPXViewer";
-
-const testComponent = <MlGPXViewer />;
-
-let sourceTestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"import\-source\".*$/,
-	"import-source",
-];
-let layer1TestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"importer\-layer\-lines\".*$/,
-	"importer-layer-lines",
-];
-let layer2TestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"importer\-layer\-points\".*$/,
-	"importer-layer-points",
-];
-
-layerRemovalTest(...layer1TestParams);
-layerRemovalTest(...layer2TestParams);
-sourceRemovalTest(...sourceTestParams);

package/src/components/MlGPXViewer/MlGPXViewer.tsx

@@ -1,379 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
-import { bbox } from '@turf/turf';
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import InfoIcon from "@mui/icons-material/Info";
-import FileCopy from "@mui/icons-material/FileCopy";
-import { Popup, LngLatBoundsLike, GeoJSONSource } from "maplibre-gl";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import GeoJsonContext from "./util/GeoJsonContext";
-import toGeoJSON from "./gpxConverter";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import useMap from "../../hooks/useMap";
-
-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,
-	/**
-	 * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-	 */
-	visible?: boolean,
-}
-
-/**
- * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
- */
-const MlGPXViewer = (props:MlGPXViewerProps) => {
-	const dataSource = useContext(GeoJsonContext);
-	const initializedRef = useRef(false);
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-	const sourceName = "import-source";
-	const layerNameLines = "importer-layer-lines";
-	const layerNamePoints = "importer-layer-points";
-
-	const [open, setIsOpen] = useState(false);
-	const dropZone = useRef<HTMLDivElement>(null);
-	const [zIndex, setZIndex] = useState(0);
-	const [metaData, setMetaData] = useState<{ title: string; value: string; id: number; }[]>([]);
-	const fileupload = useRef<HTMLInputElement>(null);
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-
-	const popup = useRef(
-		new Popup({
-			closeButton: false,
-			closeOnClick: true,
-		})
-	);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-
-		mapHook.map.addSource(
-			sourceName,
-			{
-				type: "geojson",
-				data: dataSource.data,
-			},
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNameLines,
-				source: sourceName,
-				type: "line",
-				paint: {
-					"line-width": 4,
-					"line-color": "rgba(212, 55, 23,0.5)",
-				},
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNamePoints,
-				source: sourceName,
-				type: "circle",
-				paint: {
-					"circle-color": "rgba(72, 77, 99,0.5)",
-					"circle-radius": 7,
-				},
-				filter: ["==", "$type", "Point"],
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-
-		[layerNameLines, layerNamePoints].forEach((layerName) => {
-			if(!mapHook.map)return;
-
-			mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
-		});
-		mapHook.map.on(
-			"mouseenter",
-			layerNamePoints,
-			(e:any) => {
-				if(!mapHook.map)return;
-				// Change the cursor style as a UI indicator.
-
-				const coordinates = e.features[0].geometry.coordinates.slice();
-				//const description = e.features[0].properties.desc;
-				const name = e.features[0].properties.name;
-
-				// Ensure that if the map is zoomed out such that multiple
-				// copies of the feature are visible, the popup appears
-				// over the copy being pointed to.
-				while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-					coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-				}
-
-				// Populate the popup and set its coordinates
-
-				// based on the feature found.
-				popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);
-			},
-			mapHook.componentId
-		);
-
-		mapHook.map.on(
-			"mouseleave",
-			"places",
-			function () {
-				if(!mapHook.map)return;
-
-				mapHook.map.map.getCanvas().style.cursor = "";
-				popup.current.remove();
-			},
-			mapHook.componentId
-		);
-
-		mapHook.map.map.setZoom(10);
-	}, [mapHook.map]);
-
-	useEffect(() => {
-		const _dropZone = dropZone.current;
-		const raiseDropZoneAndStopDefault = (event:any) => {
-			setZIndex(1000);
-			stopDefault(event);
-		};
-		const lowerDropZone = () => {
-			setZIndex(0);
-		};
-		const lowerDropZoneAndStopDefault = (event:any) => {
-			setZIndex(0);
-			stopDefault(event);
-		};
-
-		window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
-		window.addEventListener("dragover", stopDefault);
-
-		_dropZone?.addEventListener("dragleave", lowerDropZone);
-
-		window.addEventListener("drop", lowerDropZoneAndStopDefault);
-
-		return () => {
-			window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
-			window.removeEventListener("dragover", stopDefault);
-			_dropZone?.removeEventListener("dragleave", lowerDropZone);
-			window.removeEventListener("drop", lowerDropZoneAndStopDefault);
-		};
-	});
-
-	const stopDefault = (event:any) => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		const visibility = props.visible ? "visible" : "none";
-
-		[layerNameLines, layerNamePoints].forEach((layerName) => {
-			if(!mapHook.map)return;
-
-			mapHook.map.map.setLayoutProperty(layerName, "visibility", visibility);
-		});
-	}, [props.visible]);
-
-	const dropHandler = (event:any) => {
-		event.preventDefault();
-
-		if (event.dataTransfer.items) {
-			if (event.dataTransfer.items.length > 1) {
-				return false;
-			}
-			// If dropped items aren't files, reject them
-			if (event.dataTransfer.items[0].kind === "file") {
-				const reader = new FileReader();
-				reader.onload = (payload:any) => {
-					if(!payload?.currentTarget?.result)return;
-
-					addGPXToMap(payload.currentTarget.result);
-				};
-				const file = event.dataTransfer.items[0].getAsFile();
-				reader.readAsText(file);
-			}
-		} else {
-			// Use DataTransfer interface to access the file(s)
-		}
-		return;
-	};
-
-	const addGPXToMap = (gpxAsString:string) => {
-		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:Element) => {
-				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) as GeoJSONSource).setData(data as GeoJSON);
-			const bounds = bbox(data);
-			mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-
-	const toogleDrawer = () => {
-		setIsOpen((prevState) => !prevState);
-	};
-
-	const fileUploadOnChange = () => {
-		if(!fileupload.current)return false;
-
-		const file = fileupload.current?.files?.[0];
-		if (!file) return false;
-		const reader = new FileReader();
-		reader.onload = (payload:any) => {
-			if(!payload)return;
-
-			addGPXToMap(payload.currentTarget.result);
-		};
-
-		reader.readAsText(file);
-
-		return;
-	};
-
-	const manualUpload = () => {
-		if(!fileupload.current)return;
-
-		fileupload.current.click();
-	};
-
-		
-	return (
-		<>
-			<div
-				style={{
-					position: "fixed",
-					right: "5px",
-					bottom: mediaIsMobile ? "40px" : "25px",
-					display: "flex",
-					flexDirection: "column",
-					gap: "5px",
-					zIndex: 1000,
-				}}
-			>
-				<IconButton
-					onClick={manualUpload}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
-					}}
-					size="large"
-				>
-					<input
-						ref={fileupload}
-						onChange={fileUploadOnChange}
-						type="file"
-						id="input"
-						multiple
-						style={{ display: "none" }}
-					></input>
-					<FileCopy />
-				</IconButton>
-				<IconButton
-					onClick={toogleDrawer}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
-					}}
-					size="large"
-				>
-					<InfoIcon />
-				</IconButton>
-			</div>
-			<Drawer variant="persistent" anchor="left" open={open}>
-				<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>
-			<div
-				onDrop={dropHandler}
-				ref={dropZone}
-				style={{
-					position: "absolute",
-					left: "0",
-					top: "0",
-					backgroundColor: "rgba(255,255,255,0.5)",
-					width: "100%",
-					height: "100%",
-					zIndex: zIndex,
-				}}
-			>
-				<Typography
-					variant="h6"
-					style={{
-						top: "50%",
-						position: "absolute",
-						left: "50%",
-						msTransform: "translate(-50%, -50%)",
-						transform: " translate(-50%, -50%)",
-					}}
-					noWrap
-				>
-					Gpx-Datei ablegen
-				</Typography>
-			</div>
-		</>
-	);
-};
-
-MlGPXViewer.defaultProps = {
-	visible: true,
-};
-
-
-export default MlGPXViewer;

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

@@ -1,145 +0,0 @@
-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

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