@mapcomponents/react-maplibre 0.1.66 → 0.1.68

package/src/decorators/MultiMapContextDecorator.js

@@ -1,80 +1,80 @@
-import React from "react";
-
-import { MapComponentsProvider } from "../index";
-
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-
-const theme = createTheme({});
+import React, { useMemo } from 'react';
+import { MapComponentsProvider } from '../index';
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
+import './style.css';
+import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
-	(Story) => (
-		<div className="fullscreen_map">
-			<ThemeProvider theme={theme}>
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
 				<MapComponentsProvider>
-					<div
-						style={{
-							overflow: "hidden",
-							position: "absolute",
-							top: "0",
-							bottom: "0",
-							left: "0",
-							right: "0",
-						}}
-					>
-						<Story />
-						<div className="maps">
-							<MapLibreMap
-								mapId="map_1"
-								options={{
-									//style: "mapbox://styles/mapbox/light-v10",
-									//center: [-87.62712, 41.89033],
-									zoom: 14.5,
-									//pitch: 45,
-									//style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-									style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-									//center: [8.607, 53.1409349],
-									//zoom: 13,
-									center: [7.0851268, 50.73884],
-									//maxBounds: [
-									//	[1.40625, 43.452919],
-									//	[17.797852, 55.973798],
-									//],
-								}}
-							/>
-							<MapLibreMap
-								mapId="map_2"
-								options={{
-									//style: "mapbox://styles/mapbox/light-v10",
-									//center: [-87.62712, 41.89033],
-									zoom: 14.5,
-									//pitch: 45,
-									style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-									//style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-									//center: [8.607, 53.1409349],
-									//zoom: 13,
-									center: [7.0851268, 50.73884],
-									//maxBounds: [
-									//	[1.40625, 43.452919],
-									//	[17.797852, 55.973798],
-									//],
-								}}
-							/>
+					<MUIThemeProvider theme={theme}>
+						<div
+							style={{
+								overflow: 'hidden',
+								position: 'absolute',
+								top: '0',
+								bottom: '0',
+								left: '0',
+								right: '0',
+							}}
+						>
+							<Story />
+							<div className="maps">
+								<MapLibreMap
+									mapId="map_1"
+									options={{
+										//style: "mapbox://styles/mapbox/light-v10",
+										//center: [-87.62712, 41.89033],
+										zoom: 14.5,
+										//pitch: 45,
+										//style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+										style: 'https://wms.wheregroup.com/tileserver/style/osm-liberty.json',
+										//center: [8.607, 53.1409349],
+										//zoom: 13,
+										center: [7.0851268, 50.73884],
+										//maxBounds: [
+										//	[1.40625, 43.452919],
+										//	[17.797852, 55.973798],
+										//],
+									}}
+								/>
+								<MapLibreMap
+									mapId="map_2"
+									options={{
+										//style: "mapbox://styles/mapbox/light-v10",
+										//center: [-87.62712, 41.89033],
+										zoom: 14.5,
+										//pitch: 45,
+										style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+										//style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+										//center: [8.607, 53.1409349],
+										//zoom: 13,
+										center: [7.0851268, 50.73884],
+										//maxBounds: [
+										//	[1.40625, 43.452919],
+										//	[17.797852, 55.973798],
+										//],
+									}}
+								/>
 
-							<MlNavgiationTools
-								sx={{ top: "10px", right: "5px" }}
-								showZoomButtons={false}
-								mapId="map_1"
-							/>
+								<MlNavgiationTools
+									sx={{ top: '10px', right: '5px' }}
+									showZoomButtons={false}
+									mapId="map_1"
+								/>
+							</div>
 						</div>
-					</div>
+					</MUIThemeProvider>
 				</MapComponentsProvider>
-			</ThemeProvider>
-		</div>
-	),
+			</div>
+		);
+	},
 ];
 
 export default decorators;

package/src/decorators/NoNavToolsDecorator.js

@@ -1,31 +1,33 @@
-import React from "react";
+import React, { useMemo } from 'react';
 
-import { MapComponentsProvider } from "../index";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-
-const theme = createTheme({});
+import { MapComponentsProvider } from '../index';
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
+import './style.css';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
-	(Story) => (
-		<div className="fullscreen_map">
-			<ThemeProvider theme={theme}>
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
 				<MapComponentsProvider>
-					<Story />
-					<MapLibreMap
-						options={{
-							zoom: 14.5,
-							style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-							center: [7.0851268, 50.73884],
-						}}
-						mapId="map_1"
-					/>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							options={{
+								zoom: 14.5,
+								style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+								center: [7.0851268, 50.73884],
+							}}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
 				</MapComponentsProvider>
-			</ThemeProvider>
-		</div>
-	),
+			</div>
+		);
+	},
 ];
 
 export default decorators;

package/src/decorators/ThemeDecorator.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+
+import { MapComponentsProvider } from '../index';
+import './style.css';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
+
+const decorators = [
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
+];
+
+export default decorators;

package/src/decorators/style.css

@@ -25,8 +25,6 @@
 }
 .fullscreen_map .mapContainer {
   position: absolute;
-  height: 100vh;
-  width: 100vw;
   top: 0;
   right: 0;
   left: 0;

package/src/hooks/useCameraFollowPath/useCameraFollowPath.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import useCameraFollowPath from './useCameraFollowPath';
 import TopToolbar from '../../ui_components/TopToolbar';
 import mapContextDecorator from '../../decorators/MapContextDecorator';
-import { Button, Slider, Typography } from '@mui/material';
+import { MenuItem, Slider, Typography } from '@mui/material';
 import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
 import { Feature } from '@turf/turf';
 
@@ -78,9 +78,9 @@ const Template = () => {
 	return (
 		<>
 			<TopToolbar>
-				<Button onClick={() => setShowComponent(!showComponent)}>
+				<MenuItem onClick={() => setShowComponent(!showComponent)}>
 					{showComponent ? 'Route ausblenden' : 'Route einblenden'}
-				</Button>
+				</MenuItem>
 				{showComponent ? (
 					<MlGeoJsonLayer
 						geojson={routeJson}
@@ -91,7 +91,7 @@ const Template = () => {
 						}}
 					/>
 				) : null}
-				<Button
+				<MenuItem
 					disabled={!state.pause}
 					onClick={() =>
 						setState((current) => {
@@ -100,8 +100,8 @@ const Template = () => {
 					}
 				>
 					Start
-				</Button>
-				<Button
+				</MenuItem>
+				<MenuItem
 					disabled={state.pause}
 					onClick={() =>
 						setState((current) => {
@@ -110,8 +110,8 @@ const Template = () => {
 					}
 				>
 					Pause
-				</Button>
-				<Button
+				</MenuItem>
+				<MenuItem
 					onClick={() => {
 						CameraFollowPath.reset();
 						setState((current) => {
@@ -120,11 +120,8 @@ const Template = () => {
 					}}
 				>
 					Reset
-				</Button>
-				<Typography
-					id="discrete-slider"
-					style={{ color: '#121212', marginLeft: '10px', marginRight: '10px' }}
-				>
+				</MenuItem>
+				<Typography id="discrete-slider" style={{ marginLeft: '10px', marginRight: '10px' }}>
 					Zoom:
 				</Typography>
 				<Slider
@@ -148,10 +145,7 @@ const Template = () => {
 						maxWidth: '200px',
 					}}
 				/>
-				<Typography
-					id="discrete-slider2"
-					style={{ color: '#121212', marginLeft: '10px', marginRight: '10px' }}
-				>
+				<Typography id="discrete-slider2" style={{ marginLeft: '10px', marginRight: '10px' }}>
 					Speed:
 				</Typography>
 				<Slider
@@ -173,7 +167,7 @@ const Template = () => {
 						maxWidth: '200px',
 					}}
 				/>
-				<Button
+				<MenuItem
 					onClick={() => {
 						if (state.pitch === 0) {
 							setState((current) => {
@@ -187,7 +181,7 @@ const Template = () => {
 					}}
 				>
 					{state.pitch === 0 ? '3D' : '2D'}
-				</Button>
+				</MenuItem>
 			</TopToolbar>
 		</>
 	);

package/src/hooks/useExportMap/lib.ts

@@ -1,4 +1,4 @@
-import { Map } from '!maplibre-gl';
+import { Map } from 'maplibre-gl';
 import jsPDF from 'jspdf';
 import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
 

package/src/hooks/useGpx/useGpx.stories.js

@@ -5,7 +5,7 @@ import useGpx from "./useGpx";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-	title: "MapComponents/useGpx",
+	title: "Hooks/useGpx",
 	component: useGpx,
 	argTypes: {
 	},

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.stories.js

@@ -5,7 +5,7 @@ import useLayerHoverPopup from "./useLayerHoverPopup";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-	title: "MapComponents/useLayerHoverPopup",
+	title: "Hooks/useLayerHoverPopup",
 	component: useLayerHoverPopup,
 	argTypes: {
 	},

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.tsx

@@ -1,7 +1,8 @@
 import React, { useRef, useEffect } from 'react';
 import useMap from '../../hooks/useMap';
+import { GeoJSONFeature } from 'maplibre-gl';
 import {
-	GeoJSONFeature,
+	LngLatLike,
 	Popup,
 	MapEventType,
 } from 'maplibre-gl';
@@ -41,7 +42,7 @@ const useLayerHoverPopup = (props: useLayerHoverPopupProps) => {
 			props.layerId,
 			(
 				e: MapEventType & {
-					features?: GeoJSONFeature[] | undefined;
+					features?: ({[key:string]:string} & { geometry:{coordinates:[number,number]}})[] | undefined;
 					lngLat: { lng: number; lat: number };
 				}
 			) => {
@@ -52,7 +53,7 @@ const useLayerHoverPopup = (props: useLayerHoverPopupProps) => {
 				//const description = e.features[0].properties.desc;
 				let content = '';
 				if (e?.features?.[0] && typeof props.getPopupContent === 'function') {
-					content = props.getPopupContent(e.features[0]);
+					content = props.getPopupContent(e.features[0] as unknown as GeoJSONFeature);
 				}
 
 				if (coordinates?.[0]) {
@@ -66,7 +67,7 @@ const useLayerHoverPopup = (props: useLayerHoverPopupProps) => {
 					// Populate the popup and set its coordinates
 
 					// based on the feature found.
-					popup.current.setLngLat(coordinates).setHTML(content).addTo(mapHook.map.map);
+					popup.current.setLngLat(coordinates as LngLatLike).setHTML(content).addTo(mapHook.map.map);
 				}
 			},
 			mapHook.componentId

package/src/hooks/useMap.ts

@@ -1,6 +1,6 @@
 import { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
-import MapContext from "../contexts/MapContext";
+import MapContext, { MapContextType } from "../contexts/MapContext";
 import useMapState from "./useMapState";
 import MapLibreGlWrapper, { LayerState } from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 

package/src/hooks/useMapState.stories.js

@@ -5,7 +5,7 @@ import useMapState from "./useMapState";
 import mapContextDecoratorHooks from "../decorators/MapContextDecoratorHooks";
 
 const storyoptions = {
-	title: "Hooks/UseMapState",
+	title: "Hooks/useMapState",
 	component: useMapState,
 	argTypes: {},
 	decorators: mapContextDecoratorHooks,

package/src/hooks/useMapState.ts

@@ -1,7 +1,7 @@
 import { useContext, useCallback, useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
-import MapContext from "../contexts/MapContext";
+import MapContext, { MapContextType } from "../contexts/MapContext";
 import MapLibreGlWrapper, {
 	LayerState,
 	ViewportState,
@@ -11,13 +11,6 @@ type useMapStateType = {
 	layers: (LayerState | undefined)[];
 	viewport: ViewportState | undefined;
 };
-type MapContext = {
-	mapIds: [string?];
-	mapExists: Function;
-	maps: [];
-	getMap: Function;
-	setMap: Function;
-};
 
 /**
  * React hook that allows subscribing to map state changes
@@ -58,8 +51,8 @@ function useMapState(props: {
 	 * @param {object} layer
 	 */
 	const layerIdFilter = useCallback(
-		(layer) => {
-			if (!props?.filter?.includeBaseLayers && layer.baseLayer) {
+		(layer:LayerState) => {
+			if (!props?.filter?.includeBaseLayers && layer?.baseLayer) {
 				return false;
 			}
 
@@ -79,8 +72,8 @@ function useMapState(props: {
 	const refreshLayerState = useCallback(() => {
 		if (!mapRef.current) return;
 
-		let _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
-		let _layerStateString = JSON.stringify(_layerState);
+		const _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
+		const _layerStateString = JSON.stringify(_layerState);
 		if (layersRef.current !== _layerStateString) {
 			layersRef.current = _layerStateString;
 			setLayers(_layerState);
@@ -88,7 +81,7 @@ function useMapState(props: {
 	}, [layerIdFilter]);
 
 	useEffect(() => {
-		let _componentId = componentId.current;
+		const _componentId = componentId.current;
 
 		return () => {
 			// cleanup all event listeners

package/src/hooks/useSource.ts

@@ -61,7 +61,7 @@ function useSource(props: useSourceProps): useSourceType {
 	useEffect(() => {
 		return () => {
 			initializedRef.current = false;
-			if (mapHook.map) {
+			if (mapHook.map && mapHook.map?.map?.style?._layers) {
 				for (const [layerId, layer] of Object.entries(mapHook.map.map.style._layers)) {
 					if (layer.source === sourceId.current) {
 						mapHook.map.map.removeLayer(layerId);

package/src/hooks/useSources.stories.js

@@ -13,7 +13,7 @@ const vectorUrl =
 	'https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf';
 
 const storyoptions = {
-	title: 'Hooks/UseSource',
+	title: 'Hooks/useSource',
 	component: useSource,
 	argTypes: {},
 	decorators: mapContextDecoratorHooks,

package/src/index.ts

@@ -1,19 +1,31 @@
+export { default as MapLibreGlWrapper} from './components/MapLibreMap/lib/MapLibreGlWrapper';
 export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
+
+export { default as MlCenterPosition } from "./components/MlCenterPosition/MlCenterPosition";
+
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
+
 export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
+
 export { default as MlCreatePdfForm } from "./components/MlCreatePdfForm/MlCreatePdfForm";
 export { default as MlPdfPreview } from "./components/MlCreatePdfForm/lib/PdfPreview";
+export { default as PdfContext } from "./components/MlCreatePdfForm/lib/PdfContext";
+export { default as PdfForm } from "./components/MlCreatePdfForm/lib/PdfForm";
+
 export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
+
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
+
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
+
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
+
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
+
 export { default as MlMeasureTool } from "./components/MlMeasureTool/MlMeasureTool";
 export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
 export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
 export { default as MlLayer } from "./components/MlLayer/MlLayer";
-export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
-export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
 export { default as MlScaleReference } from "./components/MlScaleReference/MlScaleReference";
 
 export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
@@ -22,25 +34,45 @@ export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe"
 export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
 export { default as MlMarker } from "./components/MlMarker/MlMarker";
 
+export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
+
 export { default as MlGpxViewer } from "./components/MlGpxViewer/MlGpxViewer";
 export { default as GeoJsonProvider } from "./components/MlGpxViewer/util/GeoJsonProvider";
 export { default as GeoJsonContext } from "./components/MlGpxViewer/util/GeoJsonContext";
 
+export { default as MlShareMapState } from "./components/MlShareMapState/MlShareMapState";
+
 export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
+export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
+
+export { default as MlWmsFeatureInfoPopup } from "./components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup";
+export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
+export { default as MlWmsLoader } from "./components/MlWmsLoader/MlWmsLoader"
 
-export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
 export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
 
+export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
+export { default as useExportMap } from "./hooks/useExportMap";
+export { default as useGpx } from "./hooks/useGpx/useGpx";
+export { default as useLayerFilter } from "./hooks/useLayerFilter/useLayerFilter";
+export { default as useLayerHoverPopup } from "./hooks/useLayerHoverPopup/useLayerHoverPopup";
 export { default as useLayer } from "./hooks/useLayer";
-export { default as useMapState } from "./hooks/useMapState";
+export { default as useLayerEvent } from "./hooks/useLayerEvent";
 export { default as useMap } from "./hooks/useMap";
-export { default as useWms } from "./hooks/useWms";
+export { default as useMapState } from "./hooks/useMapState";
 export { default as useSource } from "./hooks/useSource";
-export { default as useExportMap } from "./hooks/useExportMap";
-export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
-export { default as useLayerFilter } from "./hooks/useLayerFilter/useLayerFilter";
+export { default as useWms } from "./hooks/useWms";
 
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";
 export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";
 export { default as SimpleDataContext } from "./contexts/SimpleDataContext";
+
+export { default as getTheme } from './ui_components/MapcomponentsTheme';
+
+export { default as LayerList } from './ui_components/LayerList/LayerList';
+export { default as LayerListItem } from './ui_components/LayerList/LayerListItem';
+export { default as LayerListFolder } from './ui_components/LayerList/LayerListFolder';
+export { default as LayerPropertyForm } from './ui_components/LayerList/util/LayerPropertyForm';
+export { default as LayerListItemVectorLayer } from './ui_components/LayerList/util/LayerListItemVectorLayer';
+export { default as ColorPicker } from './ui_components/LayerList/util/input/ColorPicker';