@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlCenterPosition/MlCenterPosition.meta_.json

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

package/src/components/MlCenterPosition/MlCenterPosition.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import MlCenterPosition from './MlCenterPosition';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+
+const storyoptions = {
+	title: 'MapComponents/MlCenterPosition',
+	component: MlCenterPosition,
+	argTypes: {},
+	decorators: mapContextDecorator,
+	parameters: { docs: { source: { type: 'code' } } },
+};
+export default storyoptions;
+
+const Template = () => <MlCenterPosition />;
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
-import { Button } from "@mui/material";
+import { Button, SxProps, Theme } from "@mui/material";
 import	GpsFixedIcon	from "@mui/icons-material/GpsFixed";
 
-interface MlCenterPositionProps {
+export interface MlCenterPositionProps {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */
@@ -24,7 +24,7 @@ interface MlCenterPositionProps {
 	/**
 	 * CSS style object that is applied to the button component
 	 */
-	style?: any;
+	style?: SxProps<Theme> | undefined;
 }
 
 /**
@@ -58,7 +58,7 @@ const MlCenterPosition = (props: MlCenterPositionProps) => {
 					...props.style,
 				}}
 			 onClick={centerCurrentLocation} disabled={locationAccessDenied}>
-				<GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
+				<GpsFixedIcon sx={{ ...(props.style?.['fontSize']?{fontSize: props.style?.['fontSize']}:{}) }} />{" "}
 			</Button>
 	</>;
 

package/src/components/MlComponentTemplate/MlComponentTemplate.meta_.json

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

package/src/components/MlComponentTemplate/{MlComponentTemplate.stories.js → MlComponentTemplate.stories.tsx}

@@ -13,8 +13,8 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => <MlComponentTemplate />;
+const Template = () => <MlComponentTemplate />;
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+ExampleConfig.args = {};

package/src/components/MlComponentTemplate/MlComponentTemplate.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from "react";
 import useMap from "../../hooks/useMap";
 
-interface MlComponentTemplateProps {
+export interface MlComponentTemplateProps {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */

package/src/components/MlCreatePdfButton/MlCreatePdfButton.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlCreatePdfButton/{MlCreatePdfButton.stories.js → MlCreatePdfButton.stories.tsx}

@@ -15,7 +15,7 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => (
+const Template = () => (
 	<TopToolbar>
 		<MlCreatePdfButton />
 	</TopToolbar>

package/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx

@@ -6,7 +6,7 @@ import createPdf from "./lib/createPdf";
 import PrinterIcon from "@mui/icons-material/Print";
 import Button from "@mui/material/Button";
 
-interface MlCreatePdfButtonProps {
+export interface MlCreatePdfButtonProps {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */

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.meta.json

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

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

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useCallback } from 'react';
+import React, { useContext, useMemo, useCallback, useState } from 'react';
 import PdfContext from './PdfContext';
 import PdfPreview from './PdfPreview';
 import {
@@ -11,6 +11,7 @@ import {
 	FormControlLabel,
 	Radio,
 	RadioGroup,
+	CircularProgress,
 } from '@mui/material';
 
 import useMap from '../../../hooks/useMap';
@@ -84,6 +85,7 @@ interface PdfFormProps {
 }
 
 export default function PdfForm(props: PdfFormProps) {
+	const [loading, setLoading] = useState(false);
 	const pdfContext = useContext(PdfContext);
 	const mapHook = useMap({
 		// eslint-disable-next-line react/prop-types
@@ -101,6 +103,7 @@ export default function PdfForm(props: PdfFormProps) {
 			pdfContext.geojsonRef?.current?.bbox &&
 			pdfContext.geojsonRef?.current
 		) {
+			setLoading(true);
 			const bbox = turf.bbox(pdfContext.geojsonRef.current);
 
 			mapExporter
@@ -118,10 +121,12 @@ export default function PdfForm(props: PdfFormProps) {
 					if (typeof props.onCreatePdf === 'function') {
 						props.onCreatePdf(res);
 					}
+					setLoading(false);
 					return res.downloadPdf();
 				})
 				.catch((error) => {
 					console.log(error);
+					setLoading(false);
 				});
 		}
 	}, [mapHook.map, pdfContext]);
@@ -218,9 +223,27 @@ export default function PdfForm(props: PdfFormProps) {
 				</Select>
 			</FormControl>
 			<FormControl fullWidth sx={formControlStyles}>
-				<Button variant="contained" onClick={createPdfHandler}>
+				<Button
+					variant="contained"
+					className="createPdfButton"
+					onClick={createPdfHandler}
+					disabled={loading}
+				>
 					PDF erstellen
 				</Button>
+				{loading && (
+          <CircularProgress
+            size={24}
+            sx={{
+              color: 'primary.main',
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginTop: '-12px',
+              marginLeft: '-12px',
+            }}
+          />
+        )}
 			</FormControl>
 			{pdfContext.options && pdfContext.setOptions && (
 				<PdfPreview

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": {
@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

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,8 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 				),
 			});
 
-			mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
-
-
-			mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
+			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
+			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
 
 			setDrawToolsReady(true);
 		}
@@ -100,35 +111,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/MlFillExtrusionLayer/MlFillExtrusionLayer.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlFollowGps/MlFollowGps.meta.json

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

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

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

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.tsx

@@ -0,0 +1,191 @@
+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 HeatMapStyler from './story_utils/MlGeojsonLayerHeatMapStyler';
+import sample_geojson_1 from './assets/sample_1.json';
+import sample_geojson_2 from './assets/sample_2.json';
+import earthquakes from './assets/earthquake.json';
+import wg_locations from './assets/wg_locations.json';
+import { GeoJSONObject } from '@turf/turf';
+import { MlGeoJsonLayerProps } from './MlGeoJsonLayer';
+import CircleMapStyler from './story_utils/MlGeojsonLayerCircleStyler';
+
+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} />
+		</>
+	);
+};
+
+const HeatmapTemplate = (props: MlGeoJsonLayerProps) => {
+	const mapHook = useMap({
+		mapId: undefined,
+	});
+
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapHook.map.map.flyTo({ center: [-150.4048, 63.1224], zoom: 3 });
+	}, [mapHook.map]);
+
+	return <HeatMapStyler {...props} />;
+};
+const CircleTemplate = (props: MlGeoJsonLayerProps) => {
+	const mapHook = useMap({
+		mapId: undefined,
+	});
+
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapHook.map.map.flyTo({ center: [10.251805123900311, 51.11826171422632], zoom: 5 });
+	}, [mapHook.map]);
+
+	return <CircleMapStyler {...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: '',
+};
+
+export const HeatMapEarthquakes = HeatmapTemplate.bind({});
+HeatMapEarthquakes.parameters = {};
+HeatMapEarthquakes.args = {
+	geojson: earthquakes,
+	options: {
+		// paint examples copied from https://maplibre.org/maplibre-gl-js-docs/example/heatmap-layer/
+		paint: {
+			// Increase the heatmap weight based on frequency and property magnitude
+			'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
+			// Increase the heatmap color weight by zoom level
+			// heatmap-intensity is a multiplier on top of heatmap-weight
+			'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
+			// Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+			// Begin color ramp at 0-stop with a 0-transparancy color
+			// to create a blur-like effect.
+			'heatmap-color': [
+				'interpolate',
+				['linear'],
+				['heatmap-density'],
+				0,
+				'rgba(33,102,172,0)',
+				0.2,
+				'rgb(103,169,207)',
+				0.4,
+				'rgb(209,229,240)',
+				0.6,
+				'rgb(253,219,199)',
+				0.8,
+				'rgb(239,138,98)',
+				1,
+				'rgb(178,24,43)',
+			],
+			// Adjust the heatmap radius by zoom level
+			'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
+			// Transition from heatmap to circle layer by zoom level
+			'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0],
+		},
+	},
+	type: 'heatmap',
+};
+export const CircleMapWheregroupLocations = CircleTemplate.bind({});
+CircleMapWheregroupLocations.parameters = {};
+CircleMapWheregroupLocations.args = {
+	geojson: wg_locations,
+	paint: {
+		'circle-radius': ['/', ['get', 'Mitarbeitende'], 1.2],
+		'circle-color': '#B11E40',
+	},
+	type: 'circle',
+};