@mapcomponents/react-maplibre 0.1.67 → 0.1.68

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React, { useRef, useEffect, useCallback } from 'react';
 import useMap from '../../hooks/useMap';
 import { LayerSpecification } from 'maplibre-gl';
 import { VectorSourceSpecification } from 'maplibre-gl';
 
-interface MlVectorTileLayerProps {
+export type MlVectorTileLayerProps = {
 	mapId?: string;
 	insertBeforeLayer?: string;
 	layerId?: string;
@@ -29,6 +29,8 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 	const layerLayoutConfsRef = useRef({});
 	const initializedRef = useRef(false);
 
+	console.log('render vt')
+	console.log(props.layers)
 	const createLayers = useCallback(() => {
 		if (!mapHook.map) return;
 
@@ -43,8 +45,10 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 			layerId.current,
 			{
 				type: 'vector',
-				tiles: [props.url || ""],
+				tiles: [props.url || ''],
 				attribution: '',
+				minzoom: 0,
+				maxzoom: 14,
 				...props.sourceOptions,
 			},
 			mapHook.componentId

package/src/components/MlWmsLoader/MlWmsLoader.stories.tsx

@@ -46,25 +46,17 @@ const Template = (props: MlWmsLoaderStoryProps) => {
 			<MlWmsLoaderInstructions open={guide} />
 			<WMSLinks open={demoMode} close={() => setDemoMode(false)} load={loader} />
 			<TopToolbar appBarStyle={{ zIndex: 1220 }}>
-				<Button
-					variant="contained"
-					onClick={openGuide}
-					sx={{ marginRight: '10px' }}
-				>
+				<Button variant="contained" onClick={openGuide} sx={{ marginRight: '10px' }}>
 					Guide me through
 				</Button>
-				<Button
-					variant="contained"
-					onClick={() => setDemoMode(!demoMode)}
-					
-				>
+				<Button variant="contained" onClick={() => setDemoMode(!demoMode)}>
 					Demo WMS
 				</Button>
 			</TopToolbar>
 
 			{!mediaIsMobile || (mediaIsMobile && !demoMode) ? (
 				<Sidebar
-					drawerPaperProps={{ sx: { top: '65px', maxWidth: '20%', padding: '40px' } }}
+					drawerPaperProps={{ sx: { top: '64px', maxWidth: '20%', padding: '40px' } }}
 					drawerButtonStyle={{ top: '65px' }}
 					sx={{ wordBreak: 'break-word' }}
 				>

package/src/components/MlWmsLoader/utils/MlWmsLoaderInstructions.tsx

@@ -12,7 +12,7 @@ const steps = [
 			iconTransform: 'rotate(90deg)',
 			iconMarginTop: '-210px',
 			iconMarginLeft: '200px',
-			zIndex: 1210
+			zIndex: 1210,
 		},
 		content: (
 			<>
@@ -31,7 +31,7 @@ const steps = [
 			iconTransform: 'rotate(90deg)',
 			iconMarginTop: '-125px',
 			iconMarginLeft: '280px',
-			zIndex: 1210
+			zIndex: 1210,
 		},
 		content: (
 			<>

package/src/components/MlWmsLoader/utils/WMSLinks.tsx

@@ -111,7 +111,7 @@ export default function WMSLinks(props: wmsLinksProps) {
 								</Grid>
 								<Grid item xs={2}>
 									<Button onClick={props.close}>
-										<CloseIcon sx={{ color: 'black' }} />
+										<CloseIcon sx={{ color: 'text.primary' }} />
 									</Button>
 								</Grid>
 							</Grid>

package/src/contexts/MapContext.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useRef, ReactNode } from 'react';
 import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
+
 export interface MapContextType {
 	mapIds: string[];
 	mapExists: (map_id: string | undefined) => boolean;
@@ -92,7 +95,11 @@ const MapComponentsProvider = ({ children }: { children: ReactNode }) => {
 		},
 	} as unknown as MapContextType;
 
-	return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
+	return (
+		<MapContext.Provider value={value}>
+			<MUIThemeProvider theme={getTheme('light')}>{children}</MUIThemeProvider>
+		</MapContext.Provider>
+	);
 };
 
 export { MapComponentsProvider };

package/src/custom.d.ts

@@ -1,5 +1,4 @@
-export interface GeoJSON {
-	type: string,
-	features?: any
-	geometry?: any
-}
+import { GeoJSONFeature } from "maplibre-gl";
+import { GeoJSONObject } from '@turf/turf';
+
+export type GeoJSON = (GeoJSONFeature & GeoJSONObject);

package/src/decorators/EmptyMapDecorator.js

@@ -0,0 +1,38 @@
+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, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							mapId="map_1"
+							options={{
+								zoom: 12.5,
+								center: [7.0851268, 50.73884],
+							}}
+						/>
+						<MlNavgiationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
+];
+
+export default decorators;

package/src/decorators/MapContextDecorator.js

@@ -1,26 +1,20 @@
-import React, {  useMemo } from 'react';
+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, createTheme } from '@mui/material/styles';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
 	(Story, context) => {
-		const theme = useMemo(
-			() =>
-				createTheme({
-					palette: {
-						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
-					},
-				}),
-			[context?.globals?.theme]
-		);
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
 		return (
 			<div className="fullscreen_map">
-				<MUIThemeProvider theme={theme}>
-					<MapComponentsProvider>
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
 						<Story />
 						<MapLibreMap
 							options={{
@@ -31,12 +25,12 @@ const decorators = [
 							mapId="map_1"
 						/>
 						<MlNavgiationTools
-							sx={{ bottom: '25px', right: 0 }}
+							sx={{ bottom: '25px', right: '5px' }}
 							showZoomButtons={false}
 							mapId="map_1"
 						/>
-					</MapComponentsProvider>
-				</MUIThemeProvider>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
 			</div>
 		);
 	},

package/src/decorators/MapContextDecoratorHooks.js

@@ -4,41 +4,36 @@ 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';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
 	(Story, context) => {
-		const theme = useMemo(
-			() =>
-				createTheme({
-					palette: {
-						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
-					},
-				}),
-			[context?.globals?.theme]
-		);
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [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"
-          />
-          <MlNavgiationTools
-						sx={{ bottom: "25px", right: 0 }}
-            showZoomButtons={false}
-            mapId="map_1"
-          />
-        </MapComponentsProvider>
-      </MUIThemeProvider>
-    </div>)
-  },
+				<MapComponentsProvider>
+					<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"
+						/>
+						<MlNavgiationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
 ];
 
 export default decorators;

package/src/decorators/MultiMapContextDecorator.js

@@ -1,29 +1,19 @@
 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, createTheme } from '@mui/material/styles';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
 	(Story, context) => {
-		const theme = useMemo(
-			() =>
-				createTheme({
-					palette: {
-						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
-					},
-				}),
-			[context?.globals?.theme]
-		);
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
 		return (
 			<div className="fullscreen_map">
-				<MUIThemeProvider theme={theme}>
-					<MapComponentsProvider>
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
 						<div
 							style={{
 								overflow: 'hidden',
@@ -80,8 +70,8 @@ const decorators = [
 								/>
 							</div>
 						</div>
-					</MapComponentsProvider>
-				</MUIThemeProvider>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
 			</div>
 		);
 	},

package/src/decorators/NoNavToolsDecorator.js

@@ -3,24 +3,17 @@ 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, createTheme } from '@mui/material/styles';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
 	(Story, context) => {
-		const theme = useMemo(
-			() =>
-				createTheme({
-					palette: {
-						mode: context?.globals?.theme ? context?.globals?.theme : 'light',
-					},
-				}),
-			[context?.globals?.theme]
-		);
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
 		return (
 			<div className="fullscreen_map">
-				<MUIThemeProvider theme={theme}>
-					<MapComponentsProvider>
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
 						<Story />
 						<MapLibreMap
 							options={{
@@ -30,8 +23,8 @@ const decorators = [
 							}}
 							mapId="map_1"
 						/>
-					</MapComponentsProvider>
-				</MUIThemeProvider>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
 			</div>
 		);
 	},

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/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/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

@@ -67,3 +67,12 @@ 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';