@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/components/MlScaleReference/MlScaleReference.doc.de.md

@@ -1 +0,0 @@
-Standard Maßstabsleiste

package/src/components/MlScaleReference/MlScaleReference.doc.en.md

@@ -1 +0,0 @@
-Default scale bar.

package/src/components/MlScaleReference/MlScaleReference.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlScaleReference",
-  "title": "Reference scale",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "Maßstabsreferenz",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}

package/src/components/MlScaleReference/MlScaleReference.stories.js

@@ -1,51 +0,0 @@
-import React from "react";
-
-import MlScaleReference from "./MlScaleReference";
-
-import TopToolbar from "../../ui_components/TopToolbar";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-const storyoptions = {
-	title: "MapComponents/MlScaleReference",
-	component: MlScaleReference,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const ToolbarTemplate = (props) => {
-	return (
-		<TopToolbar>
-			<MlScaleReference {...props} />
-		</TopToolbar>
-	);
-};
-const OverlayTemplate = (props) => {
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-	return (
-		<div
-			style={{
-				position: "absolute",
-				zIndex: 100000,
-				bottom: mediaIsMobile ? "40px" : "20px",
-				right: "20px",
-			}}
-		>
-			<MlScaleReference {...props} />
-		</div>
-	);
-};
-
-export const Toolbar = ToolbarTemplate.bind({});
-Toolbar.args = {
-	show: "toolbar",
-};
-
-export const Overlay = OverlayTemplate.bind({});
-Overlay.args = {
-	show: "overlay",
-};

package/src/components/MlScaleReference/MlScaleReference.tsx

@@ -1,109 +0,0 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import useMap from '../../hooks/useMap';
-
-export interface MlScaleReferenceProps {
-	mapId?: string;
-	insertBeforeLayer?: string | undefined;
-	maxWidth?: number;
-	unit?: string;
-}
-
-const MlScaleReference = (props: MlScaleReferenceProps) => {
-	const zoomRef = useRef(0);
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-
-	const [pxWidth, setPxWidth] = useState(0);
-	const [text, setText] = useState('');
-
-	const updateScale = useCallback(() => {
-		if (!mapHook.map) return;
-		if (mapHook.map?.map.getZoom() === zoomRef.current) {
-			return;
-		}
-
-		zoomRef.current = mapHook.map?.map.getZoom();
-		// Calculation from MapLibre
-		// A horizontal scale is imagined to be present at center of the map
-		// Using spherical law of cosines approximation, the real distance is
-		// found between the two coordinates.
-		const maxWidth = props.maxWidth || 100;
-
-		const y = mapHook.map.map._container.clientHeight / 2;
-		const left = mapHook.map.map.unproject([0, y]);
-		const right = mapHook.map.map.unproject([maxWidth, y]);
-		const maxMeters = left.distanceTo(right);
-		// The real distance corresponding to 100px scale length is rounded off to
-		// near pretty number and the scale length for the same is found out.
-		// Default unit of the scale is based on User's locale.
-		if (props.unit === 'imperial') {
-			const maxFeet = 3.2808 * maxMeters;
-			if (maxFeet > 5280) {
-				const maxMiles = maxFeet / 5280;
-				setScale(maxWidth, maxMiles, mapHook.map.map._getUIString('ScaleControl.Miles'));
-			} else {
-				setScale(maxWidth, maxFeet, mapHook.map.map._getUIString('ScaleControl.Feet'));
-			}
-		} else if (props.unit === 'nautical') {
-			const maxNauticals = maxMeters / 1852;
-			setScale(maxWidth, maxNauticals, mapHook.map.map._getUIString('ScaleControl.NauticalMiles'));
-		} else if (maxMeters >= 1000) {
-			setScale(maxWidth, maxMeters / 1000, mapHook.map.map._getUIString('ScaleControl.Kilometers'));
-		} else {
-			setScale(maxWidth, maxMeters, mapHook.map.map._getUIString('ScaleControl.Meters'));
-		}
-	}, [mapHook.map, props.unit, props.maxWidth]);
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		const _updateScale = updateScale;
-		mapHook.map.on('move', _updateScale, mapHook.componentId);
-		updateScale();
-
-		return () => {
-			mapHook.map?.map.off('move', _updateScale);
-		};
-	}, [mapHook.map, updateScale]);
-
-	const setScale = (maxWidth: number, maxDistance: number, unit: string) => {
-		const distance = getRoundNum(maxDistance);
-		const ratio = distance / maxDistance;
-		setPxWidth(maxWidth * ratio);
-		setText(distance + ' ' + unit);
-	};
-
-	const getDecimalRoundNum = (d: number) => {
-		const multiplier = Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));
-		return Math.round(d * multiplier) / multiplier;
-	};
-
-	const getRoundNum = (num: number) => {
-		const pow10 = Math.pow(10, `${Math.floor(num)}`.length - 1);
-		let d = num / pow10;
-
-		d = d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : d >= 1 ? 1 : getDecimalRoundNum(d);
-
-		return pow10 * d;
-	};
-
-	return (
-		<>
-			<div
-				style={{
-					backgroundColor: 'hsla(0,0%,100%,.75)',
-					fontSize: '10px',
-					border: '2px solid #333',
-					borderTop: '#333',
-					padding: '0 5px',
-					color: '#333',
-					boxSizing: 'border-box',
-					width: pxWidth + 'px',
-					fontFamily: 'sans-serif',
-				}}
-				dangerouslySetInnerHTML={{ __html: text }}
-			></div>
-		</>
-	);
-};
-
-export default MlScaleReference;

package/src/components/MlShareMapState/MlShareMapState.doc.de.md

@@ -1,3 +0,0 @@
-# Component Beschreibung
-
-Beschreibungstext

package/src/components/MlShareMapState/MlShareMapState.meta_.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlShareMapState",
-  "title": "",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}

package/src/components/MlShareMapState/MlShareMapState.stories.tsx

@@ -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={() => {
-										const 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/components/MlShareMapState/MlShareMapState.tsx

@@ -1,269 +0,0 @@
-import React, { useRef, useEffect, useContext, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-
-import MapContext from '../../contexts/MapContext';
-import { v4 as uuidv4 } from 'uuid';
-import useMapState from '../../hooks/useMapState';
-import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
-
-export interface MapState {
-	lat?: number;
-	lng?: number;
-	zoom?: number;
-	bearing?: number;
-	pitch?: number;
-	layers?: {
-		visible: boolean;
-		id: string;
-	}[];
-}
-
-const getCurrentUrlParameters = (): MapState => {
-	const currentParams = Object.fromEntries(new URLSearchParams(window.location.search));
-	currentParams.layers = JSON.parse(currentParams?.layers ? currentParams.layers : '[]');
-
-	return currentParams;
-};
-
-const initialUrlParams = getCurrentUrlParameters();
-
-/**
- * TODO: Add short & useful description
- *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- *
- * @component
- */
-
-export interface MlShareMapStateProps {
-	//
-	mapId?: string;
-	idPrefix?: string;
-	active?: boolean;
-}
-
-export interface LayerStatesInterface {
-	//
-	[key: string]: boolean;
-}
-
-const MlShareMapState = (props: MlShareMapStateProps) => {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const mapContext = useContext(MapContext);
-	const initializedRef = useRef(false);
-	const mapRef = useRef<MapLibreGlWrapper | undefined>();
-	const [map, setMap] = useState<MapLibreGlWrapper | undefined>(undefined);
-	const layersFromUrlParamsRef = useRef({});
-	const componentId = useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + uuidv4());
-	const mapState = useMapState({
-		watch: {
-			viewport: false,
-			layers: true,
-			sources: false,
-		},
-		filter: {
-			includeBaseLayers: false,
-		},
-	});
-
-	const allStatesRestoredRef = useRef(false);
-	const layerStatesRestored = useRef<LayerStatesInterface>();
-	const restoredStatesRef = useRef({
-		viewport: {
-			center: false,
-			bearing: false,
-			pitch: false,
-			zoom: false,
-		},
-		layers: {
-			...layersFromUrlParamsRef,
-		},
-	});
-
-	// initial URL-Params
-	const mapStateRef = useRef<MapState>({});
-
-	const refreshUrlParameters = useCallback(() => {
-		if (!props.active) return;
-
-		const mapLayers = [];
-		for (const x in mapState.layers) {
-			mapLayers.push({
-				id: mapState.layers[x]?.id,
-				type: mapState.layers[x]?.type,
-				visible: mapState.layers[x]?.visible,
-			});
-		}
-		refreshMapState();
-		const urlParams = new URLSearchParams({
-			...(getCurrentUrlParameters() as Record<string, string>),
-			...(mapStateRef.current as Record<string, string>),
-			layers: JSON.stringify(mapLayers),
-		});
-		JSON.parse(Object.fromEntries(urlParams).layers).forEach((el: { id: number }) => {
-			// is iD a number?
-			layersFromUrlParamsRef.current[el.id] = false;
-		});
-
-		const currentParams = new URLSearchParams(window.location.search);
-		if (urlParams.toString() !== currentParams.toString()) {
-			window.history.pushState(
-				{ ...mapStateRef.current },
-				document.title,
-				'?' + urlParams.toString()
-			);
-		}
-	}, [mapState.layers, props.active]);
-
-	useEffect(() => {
-		const _componentId = componentId.current;
-
-		mapStateRef.current = getCurrentUrlParameters();
-
-		return () => {
-			// This is the cleanup function, it is called when this react component is removed from react-dom
-			// try to remove anything this component has added to the MapLibre-gl instance
-			// e.g.: remove the layer
-			// mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-			// check for the existence of map.style before calling getLayer or getSource
-
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-				mapRef.current = undefined;
-			}
-			initializedRef.current = false;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapRef.current) return;
-
-		refreshUrlParameters();
-	}, [refreshUrlParameters]);
-
-	useEffect(() => {
-		if (!mapRef.current) return;
-
-		const _refreshUrlParameters = refreshUrlParameters;
-
-		mapRef.current.on('moveend', _refreshUrlParameters, componentId.current);
-
-		return () => {
-			mapRef.current?.map.off('moveend', _refreshUrlParameters);
-		};
-	}, [refreshUrlParameters, map]);
-
-	useEffect(() => {
-		if (!mapContext?.mapExists?.(props.mapId) || initializedRef.current) return;
-		// the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-		setMap(mapRef.current);
-		if (mapStateRef.current.lat && mapStateRef.current.lng) {
-			restoreViewportState();
-		}
-	}, [mapContext.mapIds, mapContext, props.mapId, props.active]);
-
-	useEffect(() => {
-		if (!mapState?.layers?.length) return;
-
-		if (typeof layerStatesRestored.current === 'undefined') {
-			layerStatesRestored.current = undefined;
-			initialUrlParams?.layers?.forEach((layer: { id: string }) => {
-				if (layerStatesRestored.current?.[layer.id]) {
-					layerStatesRestored.current[layer.id] = false;
-				}
-			});
-		}
-
-		for (const key in layerStatesRestored.current) {
-			let _allDone = true;
-			if (layerStatesRestored.current[key] === false) {
-				_allDone = false;
-			}
-			if (_allDone) {
-				return;
-			}
-		}
-
-		if (initialUrlParams.layers) {
-			initialUrlParams.layers.forEach((layer) => {
-				if (
-					mapRef.current?.map.getLayer(layer.id) && //number oder str?
-					layerStatesRestored.current?.[layer.id] === false
-				) {
-					layerStatesRestored.current[layer.id] = true;
-					mapRef.current.map
-						?.getLayer(layer.id)
-						?.setLayoutProperty('visibility', layer.visible ? 'visible' : 'none');
-				}
-			});
-		}
-	}, [mapState.layers, props.mapId, props.active]);
-
-	useEffect(() => {
-		if (!map) return;
-		if (!mapState.layers) return;
-
-		if (!props.active) {
-			map.cleanup(componentId.current);
-		}
-	}, [props.active, map, mapState.layers]);
-
-	//ist .current?.map. richtig?
-
-	const refreshMapState = () => {
-		mapStateRef.current.lat = mapRef.current?.map.getCenter().lat;
-		mapStateRef.current.lng = mapRef.current?.map.getCenter().lng;
-		mapStateRef.current.zoom = mapRef.current?.map.getZoom();
-		mapStateRef.current.bearing = mapRef.current?.map.getBearing();
-		mapStateRef.current.pitch = mapRef.current?.map.getPitch();
-	};
-
-	const restoreViewportState = () => {
-		if (!restoredStatesRef.current.viewport.center) {
-			restoredStatesRef.current.viewport.center = true;
-
-			if (mapStateRef.current.lng && mapStateRef.current.lat) {
-				mapRef.current?.map.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
-			}
-			if (mapStateRef.current.zoom) {
-				mapRef.current?.map.setZoom(mapStateRef.current.zoom);
-			}
-			if (mapStateRef.current.bearing) {
-				mapRef.current?.map.setBearing(mapStateRef.current.bearing);
-			}
-			if (mapStateRef.current.pitch) {
-				mapRef.current?.map.setPitch(mapStateRef.current.pitch);
-			}
-		}
-
-		allStatesRestoredRef.current = true;
-	};
-
-	window.onpopstate = (event) => {
-		if (event.state && event.state.lng && event.state.lat && event.state.zoom) {
-			mapRef.current?.map.easeTo({
-				// so möglich?
-				zoom: event.state.zoom,
-				center: [event.state.lng, event.state.lat],
-			});
-		}
-	};
-
-	return <></>;
-};;
-
-MlShareMapState.defaultProps = {
-	mapId: undefined,
-};
-
-MlShareMapState.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-};
-export default MlShareMapState;

package/src/components/MlSketchTool/LayerList/ColorPicker.tsx

@@ -1,43 +0,0 @@
-import { ColorPicker } from 'mui-color';
-import React from 'react';
-import { paintPropsType } from './LayerPropertyForm';
-
-type Props = {
-	key: string;
-	value: string;
-	propKey: string;
-	setPaintProps: (
-		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
-	) => void;
-};
-
-export default function PaintPropsColorPicker({ propKey, value, setPaintProps }: Props) {
-	return (
-		<ColorPicker
-			value={value}
-			onChange={(value: any) => {
-				setPaintProps((current: paintPropsType): paintPropsType => {
-					if (!value?.rgb?.[0]) {
-						return current;
-					}
-
-					const newProps = {
-						...current,
-						[propKey]:
-							'rgba(' +
-							value.rgb[0] +
-							',' +
-							value.rgb[1] +
-							',' +
-							value.rgb[2] +
-							',' +
-							value.alpha +
-							')',
-					};
-
-					return newProps;
-				});
-			}}
-		/>
-	);
-}

package/src/components/MlSketchTool/LayerList/LayerList.tsx

@@ -1,12 +0,0 @@
-import { List } from '@mui/material';
-import React from 'react';
-
-type Props = {
-	children: JSX.Element;
-};
-
-function LayerList({ children }: Props) {
-	return <List>{children}</List>;
-}
-
-export default LayerList;