@mapcomponents/react-maplibre 0.1.66 → 0.1.67

package/src/decorators/NoNavToolsDecorator.js

@@ -1,31 +1,40 @@
-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 MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
+import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
 
 const decorators = [
-	(Story) => (
-		<div className="fullscreen_map">
-			<ThemeProvider theme={theme}>
-				<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"
-					/>
-				</MapComponentsProvider>
-			</ThemeProvider>
-		</div>
-	),
+	(Story, context) => {
+		const theme = useMemo(
+			() =>
+				createTheme({
+					palette: {
+						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
+					},
+				}),
+			[context?.globals?.theme]
+		);
+		return (
+			<div className="fullscreen_map">
+				<MUIThemeProvider theme={theme}>
+					<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"
+						/>
+					</MapComponentsProvider>
+				</MUIThemeProvider>
+			</div>
+		);
+	},
 ];
 
 export default decorators;

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.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/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,23 +34,34 @@ 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";

package/src/ui_components/TopToolbar.tsx

@@ -11,7 +11,7 @@ export default function TopToolbar({ toolbarProps, appBarStyle, ...props }: TopT
 		<AppBar
 			sx={{
 				minHeight: '62px',
-				backgroundColor: '#f1f1f1',
+				backgroundColor: 'background.default',
 				position: 'absolute',
 				zIndex: 120,
 				...appBarStyle

package/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": true,
 		"strict": false,
 		"types": ["node", "jest", "geojson", "cypress"],
+    "typeRoots": ["./src/@types", "./node_modules/@types"],
 		"outDir": "build/esm",
 		"module": "esnext",
 		"target": "es5",

package/src/components/MlShareMapState/MlShareMapState.stories.js

@@ -1,100 +0,0 @@
-import React, { useState } from "react";
-
-import MlShareMapState from "./MlShareMapState";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import useMapState from "../../hooks/useMapState";
-import useMap from "../../hooks/useMap";
-import Sidebar from "../../ui_components/Sidebar";
-import ListItem from "@mui/material/ListItem";
-import IconButton from "@mui/material/IconButton";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import ListItemText from "@mui/material/ListItemText";
-import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
-import sample_geojson_2 from "../MlGeoJsonLayer/assets/sample_2.json";
-import List from "@mui/material/List";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import { ToggleButton } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-
-const storyoptions = {
-	title: "MapComponents/MlShareMapState",
-	component: MlShareMapState,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => {
-	const geoJsonArray = [sample_geojson_1, sample_geojson_2];
-	const [watchState, setWatchState] = useState(true);
-	const mapHook = useMap({ mapId: "map_1" });
-	const mapState = useMapState({
-		mapId: "map_1",
-		watch: {
-			viewport: false,
-			layers: true,
-			sources: false,
-		},
-		filter: {
-			includeBaseLayers: false,
-		},
-	});
-
-	return (
-		<>
-			<MlShareMapState active={watchState} />
-			{geoJsonArray.map((el, i) => (
-				<MlGeoJsonLayer layerId={"GeoJson_" + i} type="line" geojson={el} key={"GeoJson_" + i} />
-			))}
-			<Sidebar sx={{ wordBreak: "break-word" }}>
-				<ToggleButton
-					size="small"
-					selected={watchState}
-					value={watchState}
-					onChange={() => {
-						setWatchState(!watchState);
-					}}
-				>
-					{watchState ? <CheckCircleOutlineIcon /> : <ErrorOutlineIcon />}
-
-					{watchState ? "active" : "inactive"}
-				</ToggleButton>
-				<List dense key="layers">
-					{mapState.layers?.map((el) => (
-						<ListItem
-							key={el.id}
-							secondaryAction={
-								<IconButton
-									edge="end"
-									aria-label="toggle visibility"
-									onClick={() => {
-										let currentVisibility = mapHook.map
-											?.getLayer?.(el.id)
-											?.getLayoutProperty("visibility");
-										mapHook.map
-											?.getLayer?.(el.id)
-											?.setLayoutProperty(
-												"visibility",
-												currentVisibility === "none" ? "visible" : "none"
-											);
-										mapHook.map.map.fire("zoom");
-									}}
-								>
-									{el.visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-								</IconButton>
-							}
-						>
-							<ListItemText primary={el.id} secondary={""} />
-						</ListItem>
-					))}
-				</List>
-			</Sidebar>
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/custom.d.tsx

@@ -1,26 +0,0 @@
-
-declare module "*.svg" {
-	const content: any;
-	export default content;
-	export { content as ReactComponent };
-}
-declare module "*.js" {
-	const content: any;
-	export default content;
-}
-
-//declare module '../index';
-type MapContextType= {
-	mapIds: [string?];
-	mapExists: Function;
-	maps: [];
-	map: any,
-	getMap: Function;
-	setMap: Function;
-};
-
-interface GeoJSON {
-	type: string,
-	features?: any
-	geometry?: any
-}

package/src/decorators/ThemeWrapper.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-});
-
-export default function ThemeWrapper(props: { children: unknown }) {
-	return <MUIThemeProvider theme={theme}>{props?.children}</MUIThemeProvider>;
-}