@mapcomponents/react-maplibre 0.1.66 → 0.1.68

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -1,49 +1,52 @@
 import React, { useState } from "react";
 
-import MapLibreMap from "./MapLibreMap";
-import { MapComponentsProvider } from "../../contexts/MapContext";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import { Button } from "@mui/material";
-import TopToolbar from "../../ui_components/TopToolbar";
-import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
+import MapLibreMap from './MapLibreMap';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import { Button } from '@mui/material';
+import TopToolbar from '../../ui_components/TopToolbar';
+import sample_geojson_1 from '../MlGeoJsonLayer/assets/sample_1.json';
+
+import themeDecorator from '../../decorators/ThemeDecorator';
 
 const storyoptions = {
-	title: "Core/MapLibreMap",
+	title: 'Core/MapLibreMap',
 	component: MapLibreMap,
 	argTypes: {
 		options: {
 			control: {
-				type: "object",
+				type: 'object',
 			},
 		},
 	},
+	decorators: themeDecorator,
+	parameters: {
+		sourceLink: 'components/MapLibreMap/MapLibreMap.tsx',
+	},
 };
 export default storyoptions;
 
 const Template = (args) => {
 	return (
-		<MapComponentsProvider>
-			<MapLibreMap
-				options={args.options}
-				style={{
-					position: "absolute",
-					height: "100vh",
-					width: "100vw",
-					top: 0,
-					right: 0,
-					left: 0,
-					bottom: 0,
-					zIndex: 100,
-				}}
-			/>
-		</MapComponentsProvider>
+		<MapLibreMap
+			options={{ ...args.options }}
+			style={{
+				position: 'absolute',
+				height: '100vh',
+				width: '100vw',
+				top: 0,
+				right: 0,
+				left: 0,
+				bottom: 0,
+				zIndex: 100,
+			}}
+		/>
 	);
 };
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
 	options: {
-		style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+		style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
 		center: [8.607, 53.1409349],
 		zoom: 14,
 	},
@@ -51,23 +54,26 @@ ExampleConfig.args = {
 
 const StyleChangeTemplate = (args) => {
 	const [activeStyle, setActiveStyle] = useState(
-		"https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json"
+		'https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json'
 	);
 
 	return (
-		<MapComponentsProvider>
+		<>
 			<TopToolbar>
 				<Button
 					onClick={() =>
-						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
+						setActiveStyle('https://wms.wheregroup.com/tileserver/style/osm-bright.json')
 					}
+					variant="contained"
+					sx={{ marginRight: '5px' }}
 				>
 					OSM-Bright
 				</Button>
 				<Button
 					onClick={() =>
-						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
+						setActiveStyle('https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json')
 					}
+					variant="contained"
 				>
 					OSM-Fiord-Color
 				</Button>
@@ -75,9 +81,9 @@ const StyleChangeTemplate = (args) => {
 			<MapLibreMap
 				options={{ ...args.options, style: activeStyle }}
 				style={{
-					position: "absolute",
-					height: "100vh",
-					width: "100vw",
+					position: 'absolute',
+					height: '100vh',
+					width: '100vw',
 					top: 0,
 					right: 0,
 					left: 0,
@@ -86,7 +92,7 @@ const StyleChangeTemplate = (args) => {
 				}}
 			/>
 			<MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
-		</MapComponentsProvider>
+		</>
 	);
 };
 

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useEffect, useContext, FC,	RefObject } from "react";
+import React, { useRef, useEffect, useContext, FC, RefObject } from 'react';
 
-import MapContext from "../../contexts/MapContext";
-import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
+import MapContext, { MapContextType } from '../../contexts/MapContext';
+import MapLibreGlWrapper from './lib/MapLibreGlWrapper';
 
-import { MapOptions as MapOptionsType } from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
+import { MapOptions as MapOptionsType, Map } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 type MapLibreMapProps = {
 	/**
@@ -31,16 +31,18 @@ const defaultProps: MapLibreMapProps = {
 		container: '',
 		style: {
 			version: 8,
-			name: "blank",
+			name: 'blank',
 			center: [0, 0],
 			zoom: 0,
 			sources: {},
+			sprite: 'https://wms.wheregroup.com/tileserver/sprites/osm-bright',
+			glyphs: 'https://wms.wheregroup.com/tileserver/fonts/{fontstack}/{range}.pbf',
 			layers: [
 				{
-					id: "background",
-					type: "background",
+					id: '_background',
+					type: 'background',
 					paint: {
-						"background-color": "rgba(0,0,0,0)",
+						'background-color': 'rgba(0,0,0,0)',
 					},
 				},
 			],
@@ -59,22 +61,22 @@ const defaultProps: MapLibreMapProps = {
  * @category Map components
  */
 const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
-	const map: any = useRef<MapLibreGlWrapper>(null);
+	const map = useRef<MapLibreGlWrapper>();
 	const mapContainer = useRef<HTMLDivElement>();
 
-	const mapContext: any = useContext<MapContextType>(MapContext);
+	const mapContext = useContext<MapContextType>(MapContext);
 
 	const mapIdRef = useRef(props.mapId);
 	const initializedRef = useRef(false);
 	const currentStyle = useRef(props.options?.style);
 
 	useEffect(() => {
-		let mapId = mapIdRef.current;
+		const mapId = mapIdRef.current;
 
 		return () => {
 			mapContext.removeMap(mapId);
-			map.current?.remove?.();
-			map.current = null;
+			map.current?.map?.remove?.();
+			map.current = undefined;
 		};
 	}, []);
 
@@ -86,11 +88,12 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 			map.current = new MapLibreGlWrapper({
 				mapOptions: {
 					style: '',
-					container: mapContainer.current,
 					...props.options,
+					...(props?.options?.style ? {} : { style: defaultProps?.options?.style }),
+					container: mapContainer.current,
 				},
-				onReady: (map: any, wrapper: any) => {
-					map.once("load", () => {
+				onReady: (map: Map, wrapper: MapLibreGlWrapper) => {
+					map.once('load', () => {
 						if (props.mapId) {
 							mapContext.registerMap(props.mapId, wrapper);
 						} else {
@@ -104,14 +107,19 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 
 	useEffect(() => {
 		if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
-			console.log("set style");
+			console.log('set style');
 			currentStyle.current = props.options.style;
 			map.current.map.setStyle(props.options.style);
 		}
-		// @ts-ignore: props.options is either passed or populated with default values
-	}, [props.options.style])
+	}, [props?.options?.style]);
 
-	return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
+	return (
+		<div
+			ref={mapContainer as RefObject<HTMLDivElement>}
+			className="mapContainer"
+			style={props.style}
+		/>
+	);
 };
 
 MapLibreMap.defaultProps = defaultProps;

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -9,7 +9,8 @@ import {
 	CustomLayerInterface,
 	SourceSpecification,
 	ControlPosition,
-} from '!maplibre-gl';
+	StyleImageMetadata,
+} from 'maplibre-gl';
 import { Map as MapType, Style } from 'maplibre-gl';
 
 type WrapperEventArgArray = [string, (arg0: unknown) => void];
@@ -39,6 +40,34 @@ type ViewportState = {
  * @class
  */
 
+interface MapLibreGlWrapper extends MapType {
+	addImage: (
+		id: string,
+		image:
+			| HTMLImageElement
+			| ImageBitmap
+			| ImageData
+			| {
+					width: number;
+					height: number;
+					data: Uint8Array | Uint8ClampedArray;
+			  }
+			| StyleImageInterface,
+		key?: Partial<StyleImageMetadata> | string | undefined,
+		componentId?: string | undefined
+	) => this;
+	addLayer: (
+		layer:
+			| (LayerSpecification & {
+					source?: string | SourceSpecification | undefined;
+			  })
+			| (CustomLayerInterface & {
+					source?: string | SourceSpecification | undefined;
+			  }),
+		beforeId?: string | undefined,
+		componentId?: string | undefined
+	) => this;
+}
 class MapLibreGlWrapper {
 	registeredElements: {
 		[key: string]: {
@@ -90,42 +119,21 @@ class MapLibreGlWrapper {
 	initRegisteredElements: (componentId: string, force?: boolean | undefined) => void;
 	addNativeMaplibreFunctionsAndProps: () => void;
 	map: MapType;
-	style: object;
+	style: Style;
 
 	styleJson: object;
-	addLayer: (
-		layer:
-			| (LayerSpecification & {
-					source?: string | SourceSpecification | undefined;
-			  })
-			| (CustomLayerInterface & {
-					source?: string | SourceSpecification | undefined;
-			  }),
-		beforeId?: string | undefined,
-		componentId?: string | undefined
-	) => Map | undefined;
-	addSource: (id: string, source: SourceSpecification,componentId?: string | undefined) => Map | undefined;
-	addControl: (control: IControl | unknown, position?: ControlPosition | undefined,componentId?: string | undefined) => Map | undefined;
-	addImage: (
-		id: string,
-		image:
-			| HTMLImageElement
-			| ImageBitmap
-			| ImageData
-			| {
-					width: number;
-					height: number;
-					data: Uint8Array | Uint8ClampedArray;
-			  }
-			| StyleImageInterface,
+	addSource: (id: string, source: SourceSpecification, componentId?: string | undefined) => this;
+	addControl: (
+		control: IControl | unknown,
+		position?: ControlPosition | undefined,
 		componentId?: string | undefined
-	) => void;
+	) => this;
 	on: (
 		type: keyof MapLayerEventType | keyof MapEventType | string,
 		layerId: string | ((ev: unknown) => void),
 		handler?: ((ev: MapEventType & unknown) => Map | void) | string,
 		componentId?: string | undefined
-	) => Map | undefined;
+	) => this;
 	cleanup: (componentId: string) => void;
 
 	constructor(props: {
@@ -367,7 +375,7 @@ class MapLibreGlWrapper {
 		 */
 		this.addLayer = (layer, beforeId, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
 			}
 			if (componentId && typeof componentId === 'string' && typeof layer.id !== 'undefined') {
 				self.initRegisteredElements(componentId);
@@ -379,7 +387,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addLayer(layer, beforeId);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -393,7 +401,7 @@ class MapLibreGlWrapper {
 		 */
 		this.addSource = (sourceId, source, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
 			}
 			if (componentId && typeof componentId === 'string' && typeof sourceId !== 'undefined') {
 				self.initRegisteredElements(componentId);
@@ -401,7 +409,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addSource(sourceId, source);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -411,18 +419,21 @@ class MapLibreGlWrapper {
 		 * @param {*} image
 		 * @param {*} ref
 		 * @param {string} componentId
-		 * @returns {undefined}
 		 */
-		this.addImage = (id, image, componentId) => {
+		this.addImage = (id, image, meta, componentId) => {
 			if (!self.map.style) {
-				return;
+				return this;
+			}
+			if (typeof meta === 'string' && typeof componentId === 'undefined') {
+				return self.addImage(id, image, undefined, meta);
 			}
 			if (componentId && typeof componentId === 'string' && typeof id !== 'undefined') {
 				self.initRegisteredElements(componentId);
 				self.registeredElements[componentId].images.push(id);
 			}
 
-			self.map.addImage(id, image);
+			self.map.addImage(id, image, meta as Partial<StyleImageMetadata> | undefined);
+			return this;
 		};
 
 		/**
@@ -456,7 +467,7 @@ class MapLibreGlWrapper {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			self.map.on(..._arguments);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -473,7 +484,7 @@ class MapLibreGlWrapper {
 			}
 
 			self.map.addControl(control as IControl, position);
-			return self.map;
+			return this;
 		};
 
 		/**
@@ -675,7 +686,6 @@ class MapLibreGlWrapper {
 		initializeMapLibre();
 	}
 }
-
 export default MapLibreGlWrapper;
 
 export type { LayerState, ViewportState };

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
-import { Button, SxProps, Theme } from "@mui/material";
-import	GpsFixedIcon	from "@mui/icons-material/GpsFixed";
+import { Button, SxProps, Theme } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 
 export interface MlCenterPositionProps {
 	/**
@@ -36,51 +36,44 @@ const MlCenterPosition = (props: MlCenterPositionProps) => {
 		mapId: props.mapId,
 		waitForLayer: props.insertBeforeLayer,
 	});
+
 	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
 
 	const centerCurrentLocation = () => {
 		navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
 	};
 
-	const getLocationSuccess = useCallback((location) => {
-		mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
-	}, [mapHook.map]);
+	const getLocationSuccess = useCallback(
+		(location: GeolocationPosition) => {
+			mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
+		},
+		[mapHook.map]
+	);
 
 	const getLocationError = () => {
-		console.log("Access of user location denied");
+		console.log('Access of user location denied');
 		setLocationAccessDenied(true);
 	};
-	return <>
-			<Button 
+	return (
+		<>
+			<Button
+				variant="navtools"
 				sx={{
 					zIndex: 1002,
 					color: !locationAccessDenied ? props.onColor : props.offColor,
-					...props.style,
 				}}
-			 onClick={centerCurrentLocation} disabled={locationAccessDenied}>
-				<GpsFixedIcon sx={{ ...(props.style?.['fontSize']?{fontSize: props.style?.['fontSize']}:{}) }} />{" "}
+				onClick={centerCurrentLocation}
+				disabled={locationAccessDenied}
+			>
+				<GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 			</Button>
-	</>;
-
+		</>
+	);
 };
 
 MlCenterPosition.defaultProps = {
 	mapId: undefined,
-	style: {
-		minWidth: "30px",
-		minHeight: "30px",
-		width: "30px",
-		height: "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		margin: 0.15,
-		fontSize: "1.3em",
-		":hover": {
-			backgroundColor: "#515151",
-			color: "#ececec",
-		},
-	},
-	onColor: "#ececec",
-	offColor: "#666",
+	onColor: '#ececec',
+	offColor: '#666',
 };
 export default MlCenterPosition;

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

@@ -188,7 +188,7 @@ export default function PdfForm(props: PdfFormProps) {
 				<Select
 					labelId="quality-select-label"
 					id="quality-select"
-					label="Qualität"
+					label="Quality"
 					value={pdfContext.quality}
 					onChange={(event) => {
 						pdfContext.setQuality?.(event.target.value);
@@ -202,11 +202,11 @@ export default function PdfForm(props: PdfFormProps) {
 				</Select>
 			</FormControl>
 			<FormControl fullWidth sx={formControlStyles}>
-				<InputLabel id="quality-select-label">Scale</InputLabel>
+				<InputLabel id="scale-select-label">Scale</InputLabel>
 				<Select
-					labelId="quality-select-label"
-					id="quality-select"
-					label="Qualität"
+					labelId="scale-select-label"
+					id="scale-select"
+					label="Scale"
 					value={pdfContext?.options?.fixedScale}
 					onChange={(event) => {
 						pdfContext.setOptions?.((val) => ({
@@ -229,7 +229,7 @@ export default function PdfForm(props: PdfFormProps) {
 					onClick={createPdfHandler}
 					disabled={loading}
 				>
-					PDF erstellen
+					create PDF
 				</Button>
 				{loading && (
           <CircularProgress

package/src/components/MlFollowGps/MlFollowGps.stories.js

@@ -1,22 +1,40 @@
-import React from "react";
+import React from 'react';
 
-import MlFollowGps from "./MlFollowGps";
+import MlFollowGps from './MlFollowGps';
 
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+import noNavToolsDecorator from '../../decorators/NoNavToolsDecorator';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const storyoptions = {
-	title: "MapComponents/MlFollowGps",
+	title: 'MapComponents/MlFollowGps',
 	component: MlFollowGps,
-	argTypes: {
-	},
-	decorators: mapContextDecorator,
+	argTypes: {},
+	decorators: noNavToolsDecorator,
 };
 export default storyoptions;
 
-const Template = (props) => <MlFollowGps {...props}/>;
-
+const Template = (props) => {
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	return (
+		<>
+			<div
+				style={{
+					position: 'fixed',
+					right: '11px',
+					bottom: mediaIsMobile ? '130px' : '45px',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '5px',
+					zIndex: 1000,
+				}}
+			>
+				<MlFollowGps {...props} />
+			</div>
+		</>
+	);
+};
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {
-	followUserPosition: false
+	followUserPosition: false,
 };