@mapcomponents/react-maplibre 0.1.63 → 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.meta.json

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

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" className='createPdfButton' 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

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

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -99,7 +99,6 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 			});
 
 			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
-
 			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
 
 			setDrawToolsReady(true);

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

@@ -4,9 +4,14 @@ 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',
@@ -65,6 +70,39 @@ const PolygonTemplate = (props: TemplateProps) => {
 	);
 };
 
+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 = {
@@ -100,3 +138,54 @@ DefaultPaintOverrides.args = {
 	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',
+};

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -7,16 +7,17 @@ import { v4 as uuidv4 } from 'uuid';
 import getDefaultPaintPropsByType from './util/getDefaultPaintPropsByType';
 import getDefaulLayerTypeByGeometry from './util/getDefaultLayerTypeByGeometry';
 import { Feature, FeatureCollection } from '@turf/turf';
+import { useLayerProps } from '../../hooks/useLayer';
 
 import {
 	LineLayerSpecification,
 	CircleLayerSpecification,
 	FillLayerSpecification,
-	MapLayerMouseEvent,
 	LayerSpecification,
+	RasterLayerSpecification,
 } from 'maplibre-gl';
 
-type MlGeoJsonLayerProps = {
+export type MlGeoJsonLayerProps = {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */
@@ -38,35 +39,41 @@ type MlGeoJsonLayerProps = {
 	geojson: Feature | FeatureCollection | undefined;
 	/**
 	 * Type of the layer that will be added to the MapLibre instance.
-	 * Possible values: "line", "circle", "fill"
+	 * All types from LayerSpecification union type are supported except the type from
+	 * RasterLayerSpecification
 	 */
-	type?: 'fill' | 'line' | 'circle';
+	type?: Exclude<LayerSpecification['type'], RasterLayerSpecification['type']>;
 	/**
 	 * Paint property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
+	 * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
+	 * Some examples are:
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 * All paint types from LayerSpecification union type are supported except the paint type from
+	 * RasterLayerSpecification
 	 */
-	paint?:
-		| CircleLayerSpecification['paint']
-		| FillLayerSpecification['paint']
-		| LineLayerSpecification['paint'];
+
+	paint?: Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']>;
 	/**
 	 * Layout property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
+	 * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
+	 * Some examples are:
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 * All layout types from LayerSpecification union type are supported except the layout type from
+	 * RasterLayerSpecification
+
 	 */
-	layout?:
-		| CircleLayerSpecification['layout']
-		| FillLayerSpecification['layout']
-		| LineLayerSpecification['layout'];
+	layout?: Exclude<LayerSpecification['layout'], RasterLayerSpecification['layout']>;
+
 	/**
 	 * Javascript object that is spread into the addLayer commands first parameter.
 	 */
-	options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
+	options?: Exclude<LayerSpecification, RasterLayerSpecification>;
 	/**
 	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
 	 */
@@ -78,20 +85,20 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
 	 */
-	onHover?: MapLayerMouseEvent;
+	onHover?: useLayerProps['onHover'];
 	/**
 	 * Click event handler that is executed whenever a geometry rendered by this component is clicked.
 	 */
-	onClick?: MapLayerMouseEvent;
+	onClick?: useLayerProps['onClick'];
 	/**
 	 * Leave event handler that is executed whenever a geometry rendered by this component is
 	 * left/unhovered.
 	 */
-	onLeave?: MapLayerMouseEvent;
+	onLeave?: useLayerProps['onLeave'];
 };
 
 /**
- * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ * Adds source and layer to display GeoJSON data on the map.
  *
  * @component
  */