@mapcomponents/react-maplibre 0.1.62 → 0.1.63

package/public/index.html

@@ -5,10 +5,6 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

package/src/components/MlCreatePdfForm/MlCreatePdfForm.cy.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { composeStories } from '@storybook/testing-react';
+import { mount } from '@cypress/react';
+import * as stories from "./MlCreatePdfForm.stories";
+
+// compile the "Primary" story with the library
+const {ExampleConfig } = composeStories(stories);
+
+describe('MlCreatePdfForm Tests', () => {
+	it('Should generate and download a PDF export of the current map preview', () => {
+		// and mount the story using @cypress/react library
+		mount(<ExampleConfig />);
+
+    cy.get(".pdfFormButton").click();
+ 
+		cy.wait(1000)
+    cy.get(".createPdfButton").click();
+		cy.wait(2000)
+    cy.readFile("./cypress/downloads/Map.pdf").should('contain', 'WhereGroup')
+	});
+});

package/src/components/MlCreatePdfForm/MlCreatePdfForm.stories.tsx

@@ -51,14 +51,12 @@ export default storyoptions;
 
 const Template = () => {
 	const [showCreatePdfForm, setShowCreatePdfForm] = useState(false);
-	const targetRef = React.useRef<HTMLDivElement>(null);
-	const containerRef = React.useRef<HTMLDivElement>(document.querySelector('.map_container'));
 
 	// <MlWmsLayer url='https://geo.stat.fi/geoserver/vaestoruutu/wms' urlParameters={{layers:'vaki2005_1km_kp'}}/>
 	return (
 		<>
 			<TopToolbar>
-				<Button variant="contained" onClick={() => setShowCreatePdfForm(!showCreatePdfForm)}>
+				<Button variant="contained" className='pdfFormButton' onClick={() => setShowCreatePdfForm(!showCreatePdfForm)}>
 					PDF
 				</Button>
 			</TopToolbar>

package/src/components/MlCreatePdfForm/lib/PdfForm.tsx

@@ -218,7 +218,7 @@ export default function PdfForm(props: PdfFormProps) {
 				</Select>
 			</FormControl>
 			<FormControl fullWidth sx={formControlStyles}>
-				<Button variant="contained" onClick={createPdfHandler}>
+				<Button variant="contained" className='createPdfButton' onClick={createPdfHandler}>
 					PDF erstellen
 				</Button>
 			</FormControl>

package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlFeatureEditor",
-  "title": "Sketch tools",
+  "title": "Feature editor",
   "description": "Enables the editing of Point, Linestring and Polygon GeoJSON Files.",
   "i18n": {
     "de": {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useRef } from "react";
-import "./MlFeatureEditor.css";
+import React, { useState, useEffect, useRef } from 'react';
+import './MlFeatureEditor.css';
 
-import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import CustomPolygonMode from "./custom-polygon-mode.js";
-import CustomSelectMode from "./custom-select-mode.js";
-import CustomDirectSelectMode from "./custom-direct-select-mode.js";
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import CustomPolygonMode from './custom-polygon-mode.js';
+import CustomSelectMode from './custom-select-mode.js';
+import CustomDirectSelectMode from './custom-direct-select-mode.js';
 
-import useMap from "../../hooks/useMap";
+import useMap from '../../hooks/useMap';
+import { GeoJSONObject, Feature } from '@turf/turf';
 
 interface MlFeatureEditorProps {
 	/**
@@ -22,12 +23,17 @@ interface MlFeatureEditorProps {
 	/**
 	 * Input GeoJson data at initialization
 	 */
-	geojson?: any;
+	geojson?: Feature;
 	/**
 	 * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
 	 * First parameter is the new GeoJson feature.
 	 */
-	onChange?: Function;
+	onChange?: (para: GeoJSONObject[]) => void;
+	/**
+	 * Callback function that is called each time the GeoJson data within has been finished within MlFeatureEditor.
+	 * First parameter is the new GeoJson feature.
+	 */
+	onFinish?: () => void;
 	/**
 	 * Feature editor mode:
 	 * - "custom_select" edit features
@@ -51,10 +57,15 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 	const drawToolsInitialized = useRef(false);
 	const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-
 	const modeChangeHandler = (e: any) => {
-		console.log("MlFeatureEditor mode change to " + e.mode);
+		console.log('MlFeatureEditor mode change to ' + e.mode);
 		//setDrawMode(e.mode);
+		if (
+			typeof props.onFinish === 'function' &&
+			(e.mode === 'custom_select' || e.mode === 'simple_select')
+		) {
+			props.onFinish();
+		}
 	};
 
 	useEffect(() => {
@@ -63,17 +74,19 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 
 			if (
 				mapHook.map.map.style &&
-				mapHook.map.map.getSource("mapbox-gl-draw-cold") &&
+				mapHook.map.map.getSource('mapbox-gl-draw-cold') &&
 				draw.current
 			) {
 				// remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				draw.current?.remove();
 			}
 
 			draw.current = new MapboxDraw({
 				displayControlsDefault: false,
-				defaultMode: props.mode || "custom_select",
+				defaultMode: props.mode || 'custom_select',
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				modes: Object.assign(
 					{
@@ -85,10 +98,9 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 				),
 			});
 
-			mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
+			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
 
-
-			mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
+			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
 
 			setDrawToolsReady(true);
 		}
@@ -100,35 +112,34 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 		const changeHandler = () => {
 			if (draw.current) {
 				// update drawnFeatures state object
-				if (typeof props.onChange === "function") {
-					let currentFeatureCollection = draw.current.getAll?.();
+				if (typeof props.onChange === 'function') {
+					const currentFeatureCollection = draw.current.getAll?.();
 					props.onChange(currentFeatureCollection?.features);
 				}
 			}
 		};
 
-		mapHook.map.on("mouseup", changeHandler);
+		mapHook.map.on('mouseup', changeHandler);
 
-		mapHook.map.on("touchend", changeHandler);
+		mapHook.map.on('touchend', changeHandler);
 
 		return () => {
 			if (!mapHook.map) return;
 
-			mapHook.map.map.off("mouseup", changeHandler);
-
-			mapHook.map.map.off("touchend", changeHandler);
-		}
-
-	}, [drawToolsReady, mapHook.map])
+			mapHook.map.map.off('mouseup', changeHandler);
+			mapHook.map.map.off('touchend', changeHandler);
+		};
+	}, [drawToolsReady, mapHook.map]);
 
 	useEffect(() => {
 		if (draw.current && props.geojson?.geometry) {
-			draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+			draw.current.set({ type: 'FeatureCollection', features: [props.geojson as any] });
 		}
 	}, [props.geojson, drawToolsReady]);
 
 	useEffect(() => {
 		if (props.mode && draw.current) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			draw.current.changeMode(props.mode);
 		}

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 @@
+
+