@mapcomponents/react-maplibre 0.1.69 → 0.1.70

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

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

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlTransitionGeoJsonLayer",
-  "title": "Transition GeoJSON layer",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "Animierte GeoJSON Ebene",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js

@@ -1,52 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import useMap from "../../hooks/useMap";
-
-import sample_geojson_1 from "./assets/sample_1.json";
-import sample_geojson_2 from "./assets/sample_2.json";
-
-
-const storyoptions = {
-	title: "MapComponents/MlTransitionGeoJsonLayer",
-	component: MlTransitionGeoJsonLayer,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const LinestringTransitionTemplate = (props) => {
-	const mapHook = useMap({mapId: 'map_1'});
-	const [geojson, setGeojson] = useState(sample_geojson_1);
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		console.log('Hello')
-		initializedRef.current = true;
-		mapHook.map.setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
-		mapHook.map.setZoom(9.5);
-
-		setTimeout(() => {
-			setGeojson(sample_geojson_2);
-		}, 4000);
-	}, [geojson, mapHook.map]);
-
-	return (
-		<>
-			<MlTransitionGeoJsonLayer type="line" geojson={geojson} transitionTime={2000} {...props} />
-		</>
-	);
-};
-
-export const Linestring = LinestringTransitionTemplate.bind({});
-Linestring.parameters = {};
-Linestring.args = {
-	paint: { "line-color": "red", "line-width": 4 },
-};

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.test.js

@@ -1,20 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
-import geojson from "./assets/sample_1.json";
-import { uuid_regex } from "../../setupTests";
-
-const testComponent = <MlTransitionGeoJsonLayer type="line" geojson={geojson} />;
-
-layerRemovalTest(
-	"<MlTransitionGeoJsonLayer />",
-	testComponent,
-	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-	"MlTransitionGeoJsonLayer-{uuid}"
-);
-sourceRemovalTest(
-	"<MlTransitionGeoJsonLayer />",
-	testComponent,
-	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-	"MlTransitionGeoJsonLayer-{uuid}"
-);

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -1,107 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import * as turf from '@turf/turf';
-import useMap from '../../hooks/useMap';
-import { _transitionToGeojson } from './util/transitionFunctions';
-import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
-import { Feature, FeatureCollection } from '@turf/turf';
-import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer/MlGeoJsonLayer';
-
-const msPerStep = 50;
-
-type MlTransitionGeoJsonLayerProps = MlGeoJsonLayerProps & {
-	transitionTime: number;
-};
-
-/**
- * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
- */
-const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
-	// ignore eslint. Only using `geojson` for destructuring
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { geojson, ...restProps } = props;
-
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-	const initializedRef = useRef(false);
-
-	// transition effect variables
-	const oldGeojsonRef = useRef<Feature | FeatureCollection>();
-	const transitionInProgressRef = useRef(false);
-	const transitionTimeoutRef = useRef(undefined);
-	const currentTransitionStepRef = useRef(false);
-	const transitionGeojsonDataRef = useRef([]);
-	const transitionGeojsonCommonDataRef = useRef([]);
-	const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
-
-	useEffect(() => {
-		return () => {
-			// This is the cleanup function, it is called when this react component is removed from react-dom
-			if (transitionTimeoutRef.current) {
-				clearTimeout(transitionTimeoutRef.current);
-			}
-		};
-	}, []);
-
-	const transitionToGeojson = useCallback(() => {
-		_transitionToGeojson(
-			props,
-			transitionGeojsonCommonDataRef,
-			transitionGeojsonDataRef,
-			transitionInProgressRef,
-			oldGeojsonRef,
-			msPerStep,
-			currentTransitionStepRef,
-			mapHook.map,
-			transitionTimeoutRef,
-			setDisplayGeojson
-		);
-	}, [props, mapHook.map]);
-
-	useEffect(() => {
-		if (!mapHook.map || !initializedRef.current) return;
-
-		if (
-			typeof props.transitionTime !== 'undefined' &&
-			props.type === 'line' &&
-			oldGeojsonRef.current
-		) {
-			transitionInProgressRef.current = false;
-			currentTransitionStepRef.current = false;
-			transitionGeojsonDataRef.current = [];
-			transitionGeojsonCommonDataRef.current = [];
-			transitionToGeojson();
-		}
-		oldGeojsonRef.current = props.geojson;
-	}, [mapHook.map, transitionToGeojson, props]);
-
-	const startTransition = useCallback(() => {
-		if (
-			props.type === 'line' &&
-			typeof props.transitionTime !== 'undefined' &&
-			props.transitionTime &&
-			typeof props.geojson !== 'undefined' &&
-			JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
-		) {
-			transitionToGeojson();
-			oldGeojsonRef.current = props.geojson;
-		}
-	}, [props, transitionToGeojson]);
-
-	useEffect(() => {
-		if (!mapHook.mapIsReady || !props.geojson) return;
-
-		initializedRef.current = true;
-
-		startTransition();
-	}, [mapHook.mapIsReady, startTransition, props]);
-
-	return (
-		<>
-			<MlGeoJsonLayer {...restProps} geojson={displayGeojson} />
-		</>
-	);
-};
-
-export default MlTransitionGeoJsonLayer;

package/src/components/MlTransitionGeoJsonLayer/assets/sample_1.json

@@ -1,26 +0,0 @@
-{
-  "type": "Feature",
-  "properties": {},
-  "geometry": {
-    "type": "LineString",
-    "coordinates": [
-      [7.1074676513671875, 50.74340774029213],
-      [7.0992279052734375, 50.756441089372665],
-      [7.079315185546874, 50.764693667025014],
-      [7.045669555664062, 50.77945780529241],
-      [7.030563354492187, 50.79161300845443],
-      [7.0291900634765625, 50.80940599750376],
-      [7.0236968994140625, 50.820685846099174],
-      [7.0085906982421875, 50.825891011253546],
-      [6.9879913330078125, 50.826758482363275],
-      [6.97906494140625, 50.835432306955276],
-      [6.9824981689453125, 50.84583876895451],
-      [6.9962310791015625, 50.85147463352982],
-      [7.012023925781249, 50.85710981721644],
-      [7.021636962890625, 50.86664473085768],
-      [7.0367431640625, 50.872278081520406],
-      [7.0477294921875, 50.877044231111014],
-      [7.052536010742187, 50.88397594225127]
-    ]
-  }
-}

package/src/components/MlTransitionGeoJsonLayer/assets/sample_2.json

@@ -1,22 +0,0 @@
-{
-  "type": "Feature",
-  "properties": {},
-  "geometry": {
-    "type": "LineString",
-    "coordinates": [
-      [7.0635223388671875, 50.71385204707258],
-      [7.06146240234375, 50.709721458354075],
-      [7.063865661621094, 50.70298129536074],
-      [7.064552307128906, 50.69906720767511],
-      [7.059059143066406, 50.69428287906098],
-      [7.05596923828125, 50.68797551838366],
-      [7.0580291748046875, 50.680797145321655],
-      [7.062835693359375, 50.67514068397085],
-      [7.060432434082031, 50.6686131506577],
-      [7.051849365234375, 50.659255436656736],
-      [7.044639587402344, 50.6512019574539],
-      [7.0484161376953125, 50.64271166020676],
-      [7.0566558837890625, 50.63748609931014]
-    ]
-  }
-}

package/src/components/MlTransitionGeoJsonLayer/assets/sample_polygon_1.json

@@ -1,33 +0,0 @@
-{
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "coordinates": [
-          [
-            [7.08646747303149, 50.74485058672653],
-            [7.084287513691095, 50.74371917250187],
-            [7.084437772332876, 50.743610683782215],
-            [7.084640903561933, 50.743721758552354],
-            [7.085805654941254, 50.74293993704128],
-            [7.087023278906713, 50.74218320888983],
-            [7.087791368229503, 50.74258090834434],
-            [7.088796806075749, 50.743261830692745],
-            [7.089275088452752, 50.743701110992674],
-            [7.088087117762917, 50.74409411011173],
-            [7.087662548338368, 50.743784963165815],
-            [7.087184330538875, 50.7440368518605],
-            [7.087233860417484, 50.744077781245316],
-            [7.08714938625954, 50.744122118772154],
-            [7.087057544749172, 50.74427276821896],
-            [7.087104984084277, 50.744509715654885],
-            [7.08646747303149, 50.74485058672653]
-          ]
-        ],
-        "type": "Polygon"
-      }
-    }
-  ]
-}

package/src/components/MlTransitionGeoJsonLayer/util/transitionFunctions.js

@@ -1,221 +0,0 @@
-import * as turf from "@turf/turf";
-
-const _showNextTransitionSegment = function (
-	props,
-	map,
-	transitionInProgressRef,
-	transitionGeojsonDataRef,
-	transitionGeojsonCommonDataRef,
-	currentTransitionStepRef,
-	msPerStep,
-	transitionTimeoutRef,
-	setDisplayGeojson
-) {
-	if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
-		// if at last transition step set to target geojson
-		// else to an assembled LineString from common geometry and the current transition step geometry
-		let newData =
-			currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length
-				? props.geojson
-				: turf.lineString([
-						...transitionGeojsonCommonDataRef.current,
-						...transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry
-							.coordinates,
-					]);
-
-		setDisplayGeojson(newData);
-
-		if (typeof props.onTransitionFrame === "function") {
-			props.onTransitionFrame(newData);
-		}
-
-		currentTransitionStepRef.current++;
-		if (
-			transitionInProgressRef.current &&
-			currentTransitionStepRef.current < transitionGeojsonDataRef.current.length
-		) {
-			transitionTimeoutRef.current = setTimeout(
-				() => _showNextTransitionSegment(...arguments),
-				msPerStep
-			);
-		} else {
-			if (typeof props.onTransitionEnd === "function") {
-				props.onTransitionEnd(props.geojson);
-			}
-			transitionInProgressRef.current = false;
-		}
-	}
-};
-
-const _transitionToGeojson = (
-	props,
-	transitionGeojsonCommonDataRef,
-	transitionGeojsonDataRef,
-	transitionInProgressRef,
-	oldGeojsonRef,
-	msPerStep,
-	currentTransitionStepRef,
-	map,
-	transitionTimeoutRef,
-	setDisplayGeojson
-) => {
-	// create the transition geojson between oldGeojsonRef.current and props.geojson
-
-	// create a geojson that contains no common point between the two line features
-	let transitionCoordinatesShort = [];
-	let transitionCoordinatesLong = [];
-	let targetCoordinates = [];
-	let srcCoordinates = [];
-	transitionGeojsonCommonDataRef.current = [];
-	let sourceGeojson = oldGeojsonRef.current || {
-		geometry: {
-			type: "LineString",
-			coordinates: [],
-		},
-		properties: {},
-		type: "Feature",
-	};
-
-	let targetGeojson = props.geojson;
-
-	let longerGeojson = targetGeojson;
-	let shorterGeojson = sourceGeojson;
-	let reverseOrder = false;
-	// In case one geojson is missing completely use the first two coordinates of the other geojson
-	if (
-		typeof longerGeojson.geometry === "undefined" &&
-		typeof shorterGeojson.geometry !== "undefined" &&
-		shorterGeojson.geometry.coordinates.length > 1
-	) {
-		longerGeojson = turf.lineString(shorterGeojson.geometry.coordinates.slice(0, 2));
-	} else if (
-		typeof shorterGeojson.geometry === "undefined" &&
-		typeof longerGeojson.geometry !== "undefined" &&
-		longerGeojson.geometry.coordinates.length > 1
-	) {
-		shorterGeojson = turf.lineString(longerGeojson.geometry.coordinates.slice(0, 2));
-	} else if (
-		typeof shorterGeojson.geometry === "undefined" &&
-		typeof longerGeojson.geometry === "undefined"
-	) {
-		return;
-	}
-
-	if (longerGeojson.geometry.coordinates.length < shorterGeojson.geometry.coordinates.length) {
-		longerGeojson = sourceGeojson;
-		shorterGeojson = targetGeojson;
-		reverseOrder = true;
-	}
-
-	if (longerGeojson && shorterGeojson) {
-		for (var i = 0, len = longerGeojson.geometry.coordinates.length; i < len; i++) {
-			if (
-				typeof shorterGeojson.geometry.coordinates[i] !== "undefined" &&
-				longerGeojson.geometry.coordinates[i][0] === shorterGeojson.geometry.coordinates[i][0] &&
-				longerGeojson.geometry.coordinates[i][1] === shorterGeojson.geometry.coordinates[i][1]
-			) {
-				// if coordinates are equal
-				transitionGeojsonCommonDataRef.current.push(longerGeojson.geometry.coordinates[i]);
-			} else {
-				if (typeof longerGeojson.geometry.coordinates[i] !== "undefined") {
-					transitionCoordinatesLong.push(longerGeojson.geometry.coordinates[i]);
-				}
-				if (typeof shorterGeojson.geometry.coordinates[i] !== "undefined") {
-					transitionCoordinatesShort.push(shorterGeojson.geometry.coordinates[i]);
-				}
-			}
-		}
-	}
-
-	if (reverseOrder) {
-		targetCoordinates = transitionCoordinatesShort;
-		srcCoordinates = transitionCoordinatesLong;
-	} else {
-		targetCoordinates = transitionCoordinatesLong;
-		srcCoordinates = transitionCoordinatesShort;
-	}
-
-	if (targetCoordinates.length < 2 && srcCoordinates < 2) return;
-	// create props.transitionTime / msPerStep (=: transitionSteps) Versions of transitionGeojsonCommonDataRef.current + transitionCoordinates making the transitionCoordinates transitionCoordinatesDistance / transitionSteps longer on each step
-
-	let transitionSteps = props.transitionTime / msPerStep;
-	let srcCoordinatesDistance =
-		srcCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(srcCoordinates))) : 0;
-	let targetCoordinatesDistance =
-		targetCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(targetCoordinates))) : 0;
-	let transitionDistance = targetCoordinatesDistance + srcCoordinatesDistance;
-
-	let srcCoordinatesShare = srcCoordinatesDistance / transitionDistance;
-	let srcTransitionSteps = Math.round(transitionSteps * srcCoordinatesShare);
-	let srcPerStepDistance = Math.round((srcCoordinatesDistance / srcTransitionSteps) * 100) / 100;
-
-	let targetCoordinatesShare = targetCoordinatesDistance / transitionDistance;
-	let targetTransitionSteps = Math.round(transitionSteps * targetCoordinatesShare);
-	let targetPerStepDistance =
-		Math.round((targetCoordinatesDistance / targetTransitionSteps) * 100) / 100;
-
-	// use srcPerStepDistance as src coordinates are always animated backwards
-	let loopStepDistance = srcCoordinatesDistance;
-	if (loopStepDistance <= 0) {
-		loopStepDistance = 0.1;
-	}
-
-	// create transition step data as an array of all required FeatureCollection states until the transition is complete
-	let transitionStepData;
-
-	transitionStepData = [
-		...createTransitionSteps(srcCoordinates, srcPerStepDistance, srcTransitionSteps),
-	];
-	transitionStepData.reverse();
-
-	transitionStepData = [
-		...transitionStepData,
-		...createTransitionSteps(targetCoordinates, targetPerStepDistance, targetTransitionSteps),
-	];
-
-	transitionStepData.push(targetGeojson);
-
-	transitionGeojsonDataRef.current = transitionStepData;
-
-	currentTransitionStepRef.current = 1;
-	transitionInProgressRef.current = true;
-	transitionTimeoutRef.current = setTimeout(
-		() =>
-			_showNextTransitionSegment(
-				props,
-				map,
-				transitionInProgressRef,
-				transitionGeojsonDataRef,
-				transitionGeojsonCommonDataRef,
-				currentTransitionStepRef,
-				msPerStep,
-				transitionTimeoutRef,
-				setDisplayGeojson
-			),
-		msPerStep
-	);
-};
-
-let createTransitionSteps = (linestringCoordinates, perStepDistance, stepCnt) => {
-	let transitionSteps = [];
-
-	if (linestringCoordinates.length > 1) {
-		let tmpChunks = turf.lineChunk(turf.lineString(linestringCoordinates), perStepDistance);
-		// tmpLineString contains all coordinates of all previous plus current loop iteration
-		let tmpLinestring = tmpChunks.features[0];
-		for (let i = 0; i < stepCnt; i++) {
-			transitionSteps.push(tmpLinestring);
-			if (typeof tmpChunks.features[i] !== "undefined") {
-				tmpLinestring = turf.lineString([
-					...tmpLinestring.geometry.coordinates,
-					...tmpChunks.features[i].geometry.coordinates,
-				]);
-			} else {
-				break;
-			}
-		}
-	}
-	return transitionSteps;
-};
-
-export { _showNextTransitionSegment, _transitionToGeojson };

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

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

package/src/components/MlUseMapDebugger/MlUseMapDebugger.js

@@ -1,75 +0,0 @@
-import React, { useRef } from "react";
-import PropTypes from "prop-types";
-
-import useMapState from "../../hooks/useMapState";
-
-/**
- * Renders a collapsable top-drawer containing live map debug information
- *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- *
- * @component
- */
-const MlUseMapDebugger = (props) => {
-	const map = useMapState({
-		mapId: props.mapId,
-		watch: {
-			layers: true,
-			sources: false, // not yet provided
-			viewport: false,
-			...props.watch,
-		},
-		filter: {
-			...props.filter,
-		},
-	});
-	const renderCounter = useRef(0);
-	renderCounter.current = renderCounter.current + 1;
-
-	return (
-		<>
-			{/*
-			<IconButton
-				sx={{ zIndex: 10000 }}
-				aria-label="delete"
-				size="small"
-				onClick={() => setDebuggerOpen(!debuggerOpen)}
-			>
-				<CodeIcon fontSize="inherit" />
-			</IconButton>
-			<Drawer
-				anchor="top"
-				open={debuggerOpen}
-				onClose={() => setDebuggerOpen(!debuggerOpen)}
-				PaperProps={{
-					sx: {
-						opacity: 0.85,
-						maxHeight: "100px",
-						position: "relative",
-					},
-				}}
-				hideBackdrop={true}
-				variant="persistent"
-			></Drawer>
-			*/}
-			<div style={{ overflow: "hidden", width: "100px", height: "20px" }}>
-				Render: {renderCounter.current}
-				<br />
-				<pre>{JSON.stringify(map, null, " ")}</pre>
-			</div>
-		</>
-	);
-};
-
-MlUseMapDebugger.defaultProps = {
-	mapId: undefined,
-};
-
-MlUseMapDebugger.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-};
-export default MlUseMapDebugger;

package/src/components/MlUseMapDebugger/MlUseMapDebugger.meta_.json

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

package/src/components/MlUseMapDebugger/MlUseMapDebugger.stories.js

@@ -1,30 +0,0 @@
-import React from "react";
-
-import MlUseMapDebugger from "./MlUseMapDebugger";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlUseMapDebugger",
-	component: MlUseMapDebugger,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	return (
-		<>
-			<MlUseMapDebugger {...props} />
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	mapId: "map_1",
-};

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

@@ -1 +0,0 @@
-Darstellung von Vector Tiles

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

@@ -1 +0,0 @@
-Presentation of vector tiles.

package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlVectorTileLayer",
-  "title": "Vector tile layer",
-  "description": "Adds a vector tile layer to the map",
-  "i18n": {
-    "de": {
-      "title": "Vector Tiles",
-      "description": "Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"
-    }
-  },
-  "tags": ["Map layer"],
-  "category": "layer",
-  "type": "component"
-}