@mapcomponents/react-maplibre 0.1.68 → 0.1.70

package/src/decorators/MultiMapContextDecorator.js

@@ -1,80 +0,0 @@
-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}>
-						<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"
-								/>
-							</div>
-						</div>
-					</MUIThemeProvider>
-				</MapComponentsProvider>
-			</div>
-		);
-	},
-];
-
-export default decorators;

package/src/decorators/NoNavToolsDecorator.js

@@ -1,33 +0,0 @@
-import React, { useMemo } from 'react';
-
-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, context) => {
-		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
-
-		return (
-			<div className="fullscreen_map">
-				<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"
-						/>
-					</MUIThemeProvider>
-				</MapComponentsProvider>
-			</div>
-		);
-	},
-];
-
-export default decorators;

package/src/decorators/ThemeDecorator.js

@@ -1,24 +0,0 @@
-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

@@ -1,34 +0,0 @@
-#root {
-  background-color: #000;
-  position: absolute;
-  min-height: 400px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.docs-story {
-  min-height: 400px;
-  display: flex;
-  align-items: stretch;
-}
-.docs-story > div:first-child {
-  width: 100%;
-}
-
-.App {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.fullscreen_map .mapContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-}
-

package/src/hooks/assets/pointWG.json

@@ -1,13 +0,0 @@
-{
-	"type": "Feature",
-	"geometry": {
-		"type": "Point",
-		"coordinates": [
-			7.0851268,
-			50.73884
-		],
-		"properties": {
-			"title": "Bonn"
-		}
-	}
-}

package/src/hooks/useCameraFollowPath/useCameraFollowPath.doc.de.md

@@ -1,4 +0,0 @@
-# Kamerafahrt entlang eines Pfades
-
-Das Component akzeptiert einen Array bestehend aus Koordinaten und fährt diese Strecke mit der Kamera ab.
-Einstellungsmöglichkeiten für Geschwindigkeit, Initiale Zoomstufe und End-Zoomstufe sind ebenfalls vorhanden.

package/src/hooks/useCameraFollowPath/useCameraFollowPath.doc.en.md

@@ -1 +0,0 @@
-This Component accepts an array consisting of coordinates and travels this route with the camera. Options for speed, initial zoom level and final zoom level are also available.

package/src/hooks/useCameraFollowPath/useCameraFollowPath.meta.json

@@ -1,14 +0,0 @@
-{
-	"name": "useCameraFollowPath",
-	"title": "Move camera along linestring",
-	"description": "",
-	"i18n": {
-		"de": {
-			"title": "Kamerafahrt entlang eines Linestrings",
-			"description": ""
-		}
-	},
-	"tags": [],
-	"category": "",
-	"type": "component"
-}

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

@@ -1,192 +0,0 @@
-import React, { useState } from 'react';
-import useCameraFollowPath from './useCameraFollowPath';
-import TopToolbar from '../../ui_components/TopToolbar';
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-import { MenuItem, Slider, Typography } from '@mui/material';
-import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
-import { Feature } from '@turf/turf';
-
-const storyoptions = {
-	title: 'Hooks/useCameraFollowPath',
-	component: useCameraFollowPath,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const routeJson: Feature = {
-	type: 'Feature',
-	properties: {},
-	geometry: {
-		type: 'LineString',
-		coordinates: [
-			[7.10942788610961, 50.708209240168],
-			[7.10966149846967, 50.7088867160122],
-			[7.10910082880551, 50.7108256986007],
-			[7.10856352037736, 50.7126945974813],
-			[7.1083532692533, 50.7142598002937],
-			[7.10814301812924, 50.7160118929942],
-			[7.10793276700518, 50.7169463424345],
-			[7.10776923835314, 50.7176004570426],
-			[7.10713848498096, 50.718838602551],
-			[7.10699831756492, 50.7199599418793],
-			[7.106900786313568, 50.72118132611057],
-		],
-	},
-};
-
-const marks = [
-	{
-		value: 15,
-		label: '15',
-	},
-	{
-		value: 16,
-		label: '16',
-	},
-	{
-		value: 17,
-		label: '17',
-	},
-	{
-		value: 18,
-		label: '18',
-	},
-	{
-		value: 19,
-		label: '19',
-	},
-	{
-		value: 20,
-		label: '20',
-	},
-];
-
-const Template = () => {
-	const [state, setState] = useState({ pause: true, zoom: 18, speed: 1, pitch: 60 });
-
-	const CameraFollowPath = useCameraFollowPath({
-		route: routeJson,
-		pause: state.pause,
-		pitch: state.pitch,
-		zoom: state.zoom,
-		speed: state.speed,
-	});
-
-	const [showComponent, setShowComponent] = useState(true);
-
-	return (
-		<>
-			<TopToolbar>
-				<MenuItem onClick={() => setShowComponent(!showComponent)}>
-					{showComponent ? 'Route ausblenden' : 'Route einblenden'}
-				</MenuItem>
-				{showComponent ? (
-					<MlGeoJsonLayer
-						geojson={routeJson}
-						type="line"
-						paint={{
-							'line-width': 2,
-							'line-color': 'blue',
-						}}
-					/>
-				) : null}
-				<MenuItem
-					disabled={!state.pause}
-					onClick={() =>
-						setState((current) => {
-							return { ...current, pause: false };
-						})
-					}
-				>
-					Start
-				</MenuItem>
-				<MenuItem
-					disabled={state.pause}
-					onClick={() =>
-						setState((current) => {
-							return { ...current, pause: true };
-						})
-					}
-				>
-					Pause
-				</MenuItem>
-				<MenuItem
-					onClick={() => {
-						CameraFollowPath.reset();
-						setState((current) => {
-							return { ...current, pause: true, pitch: 60, zoom: 18, speed: 1 };
-						});
-					}}
-				>
-					Reset
-				</MenuItem>
-				<Typography id="discrete-slider" style={{ marginLeft: '10px', marginRight: '10px' }}>
-					Zoom:
-				</Typography>
-				<Slider
-					value={state.zoom}
-					onChange={(ev, value) => {
-						setState((current) => {
-							return { ...current, zoom: Number(value) };
-						});
-					}}
-					getAriaValueText={(value) => value.toString()}
-					aria-labelledby="discrete-slider"
-					//valueLabelDisplay="auto"
-					step={1}
-					marks={marks}
-					min={15}
-					max={20}
-					sx={{
-						marginTop: '20px',
-						paddingBottom: '20px',
-						marginRight: '10px',
-						maxWidth: '200px',
-					}}
-				/>
-				<Typography id="discrete-slider2" style={{ marginLeft: '10px', marginRight: '10px' }}>
-					Speed:
-				</Typography>
-				<Slider
-					value={state.speed}
-					onChange={(ev, value) => {
-						setState((current) => {
-							return { ...current, speed: Number(value) };
-						});
-					}}
-					getAriaValueText={(value) => value.toString()}
-					aria-labelledby="discrete-slider2"
-					//valueLabelDisplay="auto"
-					step={0.1}
-					marks
-					min={0.1}
-					max={2}
-					sx={{
-						marginRight: '10px',
-						maxWidth: '200px',
-					}}
-				/>
-				<MenuItem
-					onClick={() => {
-						if (state.pitch === 0) {
-							setState((current) => {
-								return { ...current, pitch: 60 };
-							});
-						} else {
-							setState((current) => {
-								return { ...current, pitch: 0 };
-							});
-						}
-					}}
-				>
-					{state.pitch === 0 ? '3D' : '2D'}
-				</MenuItem>
-			</TopToolbar>
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/hooks/useCameraFollowPath/useCameraFollowPath.tsx

@@ -1,192 +0,0 @@
-import { useEffect, useCallback, useRef } from 'react';
-
-import * as turf from '@turf/turf';
-import useMap from '../useMap';
-import { LngLatBoundsLike, LngLatLike } from 'maplibre-gl';
-
-interface useCameraFollowPathProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * Id of an existing layer in the mapLibre instance to help specify the layer order
-	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-	 */
-	insertBeforeLayer?: string;
-	/* pause is an useRef const and is triggerd in the storie */
-	pause?: boolean;
-	/* zoom is an useRef const and is triggerd in the storie */
-	zoom?: number;
-	/* pitch is an useRef const and is triggerd in the storie */
-	pitch?: number;
-	/* speed is an useRef const and is triggerd in the storie */
-	speed?: number;
-	/* kmPerStep is an useRef const */
-	kmPerStep?: number;
-	/* route is a json file, which is defined loaded in the storie */
-	route?: any;
-	/* stepDuration is a const */
-	stepDuration?: number;
-	/* timeoutId is an useRef const */
-	timeoutId?: number;
-}
-export type { useCameraFollowPathProps };
-
-/**
- * Component template
- *
- */
-const useCameraFollowPath = (props: useCameraFollowPathProps) => {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	// without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
-	const initializedRef = useRef(false);
-	const pause = useRef<boolean | undefined>(props.pause);
-	const zoom = useRef<number | undefined>(props.zoom);
-	const pitch = useRef<number | undefined>(props.pitch);
-	const step = useRef(1);
-	const speed = useRef<number | undefined>(props.speed);
-	const timeoutId = useRef();
-
-	const kmPerStep = props.kmPerStep || 0.01;
-	const routeDistance = turf.lineDistance(props.route);
-	const stepDuration = props.stepDuration || 70;
-
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	useEffect(() => {
-		pause.current = props.pause;
-		if (!pause.current) {
-			play();
-		}
-	}, [props.pause]);
-	useEffect(() => {
-		if (!mapHook.map) return;
-		zoom.current = props.zoom;
-		if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
-			mapHook.map.map.setZoom(zoom.current);
-		}
-	}, [mapHook.map, props.zoom]);
-	useEffect(() => {
-		if (!mapHook.map) return;
-		pitch.current = props.pitch;
-		if (typeof pitch.current !== 'undefined' && pitch.current !== mapHook.map.map.getPitch()) {
-			mapHook.map.map.setPitch(pitch.current);
-		}
-	}, [mapHook.map, props.pitch]);
-	useEffect(() => {
-		speed.current = props.speed;
-	}, [props.speed]);
-
-	const disableInteractivity = useCallback(() => {
-		if (!mapHook.map) return;
-		mapHook.map.map['scrollZoom'].disable();
-		mapHook.map.map['boxZoom'].disable();
-		mapHook.map.map['dragRotate'].disable();
-		mapHook.map.map['dragPan'].disable();
-		mapHook.map.map['keyboard'].disable();
-		mapHook.map.map['doubleClickZoom'].disable();
-		mapHook.map.map['touchZoomRotate'].disable();
-	}, [mapHook.map]);
-	const enableInteractivity = useCallback(() => {
-		if (!mapHook.map) return;
-		mapHook.map.map['scrollZoom'].enable();
-		mapHook.map.map['boxZoom'].enable();
-		mapHook.map.map['dragRotate'].enable();
-		mapHook.map.map['dragPan'].enable();
-		mapHook.map.map['keyboard'].enable();
-		mapHook.map.map['doubleClickZoom'].enable();
-		mapHook.map.map['touchZoomRotate'].enable();
-	}, [mapHook.map]);
-
-	function centerRoute() {
-		if (!mapHook.map || !props.route) return;
-		const bbox = turf.bbox(props.route);
-		let bounds: LngLatBoundsLike;
-		if (bbox && bbox.length > 3) {
-			bounds = [
-				[bbox[0], bbox[1]],
-				[bbox[2], bbox[3]],
-			];
-			mapHook.map.map.fitBounds(bounds, { padding: 100 });
-		}
-	}
-	function play() {
-		if (!mapHook.map) return;
-
-		if (!pause.current) {
-			disableInteractivity();
-			if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
-				mapHook.map.map.setZoom(zoom.current);
-			}
-
-			const alongRoutelati: number[] = turf.along(props.route, step.current * kmPerStep).geometry
-				.coordinates;
-
-			if (step.current * kmPerStep < routeDistance) {
-				mapHook.map.map.easeTo({
-					center: alongRoutelati as LngLatLike,
-					bearing: turf.bearing(
-						turf.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]),
-						turf.point(alongRoutelati)
-					),
-					duration: stepDuration,
-					essential: true,
-				});
-				if (typeof speed.current !== 'undefined') {
-					step.current = step.current + speed.current;
-				} else {
-					step.current++;
-				}
-				console.log('PAN MOVE');
-				setTimeout(() => {
-					play();
-				}, 100);
-			} else {
-				mapHook.map.map.setPitch(0);
-				centerRoute();
-				enableInteractivity();
-				console.log('ENABLE CONTROLS');
-				step.current = 1;
-			}
-		} else {
-			enableInteractivity();
-		}
-	}
-
-	function reset() {
-		if (!mapHook.map) return;
-		centerRoute();
-		enableInteractivity();
-		step.current = 1;
-	}
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-		initializedRef.current = true;
-		centerRoute();
-	}, [mapHook.map]);
-
-	useEffect(() => {
-		return () => {
-			if (timeoutId.current) {
-				clearTimeout(timeoutId.current);
-			}
-		};
-	}, []);
-
-	return {
-		play: play,
-		reset: reset,
-	};
-};
-
-useCameraFollowPath.defaultProps = {
-	mapId: undefined,
-	zoom: 18,
-};
-
-export default useCameraFollowPath;

package/src/hooks/useExportMap/index.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import useMap from '../useMap';
-import { createExport, createExportOptions } from './lib';
-import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
-
-interface exportMapProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-}
-
-export default function useExportMap(props: exportMapProps) {
-	const mapHook = useMap({ mapId: props.mapId });
-
-	const _createExport = useMemo(() => {
-		if (mapHook.map) {
-			return (
-				options: Omit<createExportOptions, 'map'> & Partial<Pick<createExportOptions, 'map'>>
-			) => {
-				return createExport({ map: mapHook.map as MapLibreGlWrapper, ...options });
-			};
-		}
-		return;
-	}, [mapHook.map]);
-
-	return {
-		createExport: _createExport,
-	};
-}