@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.test.js

@@ -2,8 +2,37 @@ import { layerRemovalTest, sourceRemovalTest } from "../../util";
 
 import MlSpatialElevationProfile from "./MlSpatialElevationProfile";
 import { uuid_regex } from "../../setupTests";
+const sampleGeojson = {
+	"type": "FeatureCollection",
+	"features": [
+			{
+					"type": "Feature",
+					"properties": {
+							"name": "Rundwanderung auf dem Wiedweg zwischen Seelbach und Oberlahr",
+							"desc": "Diese Rundtour gibt mir viele historische Einblicke und zeigt mir einzigartige und mir bisher verborgene Kultur- und Naturschönheiten. Eine rundum spannende und erlebnisreiche Tour.",
+							"type": "hikingTourTrail"
+					},
+					"geometry": {
+							"type": "LineString",
+							"coordinates": [
+									[
+											7.526536,
+											50.647383,
+											267.71535
+									],
+									[
+											7.526617,
+											50.647247,
+											267.83347
+									],
+							]
+					}
+			}
+	]
+}
 
-const testComponent = <MlSpatialElevationProfile />;
+// eslint-disable-next-line react/react-in-jsx-scope
+const testComponent = <MlSpatialElevationProfile geojson={sampleGeojson} />;
 
 layerRemovalTest(
 	"<MlSpatialElevationProfile />",

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.tsx

@@ -0,0 +1,143 @@
+import React, { useRef, useMemo } from 'react';
+import { featureCollection } from '@turf/helpers';
+import { Feature, FeatureCollection } from '@turf/turf';
+import { v4 as uuidv4 } from 'uuid';
+import useSource from '../../hooks/useSource';
+import useLayer from '../../hooks/useLayer';
+import getElevationData from './util/getElevationData';
+import { Coordinates, DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+
+const defaultFillExtrusionColor: (string | number | string[])[] = [
+	'interpolate',
+	['linear'],
+	['get', 'height'],
+	0,
+	'rgba(0, 0, 255, 0)',
+	0.1,
+	'royalblue',
+	0.3,
+	'cyan',
+	0.5,
+	'lime',
+	0.7,
+	'yellow',
+	1,
+	'yellow',
+];
+/**
+ * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
+ *
+ * @component
+ */
+
+interface geojson {
+	features: Feature | FeatureCollection | undefined;
+}
+
+export interface MlSpatialElevationProfileProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * GeoJSON data that is supposed to be rendered by this component.
+	 */
+	//geojson: {features: Feature | FeatureCollection | undefined };
+	geojson: geojson | FeatureCollection | undefined;
+	/**
+	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+	 */
+	idPrefix?: string;
+	/**
+	 * Number describes the factor of the height of the elevation
+	 */
+	elevationFactor?: number;
+	/**
+	 * The layerId of an existing layer this layer should be rendered visually beneath
+	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+	 */
+	insertBeforeLayer?: string;
+}
+
+const MlSpatialElevationProfile = (props: MlSpatialElevationProfileProps) => {
+	const sourceName = useRef('elevationprofile-' + uuidv4());
+	const layerName = useRef('elevationprofile-layer-' + uuidv4());
+	const elevationFactor =
+		props.elevationFactor || MlSpatialElevationProfile.defaultProps.elevationFactor;
+
+	const _geojsonInfo = useMemo(() => {
+		if (!props?.geojson?.features) return;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const line = props.geojson.features?.find((element: Feature) => {
+			return element.geometry.type === 'LineString';
+		});
+
+		if (!line || !line.geometry) return;
+
+		const heights = line.geometry.coordinates.map((coordinate: Coordinates) => {
+			return coordinate[2];
+		});
+
+		const min = Math.min(...heights);
+
+		let max = Math.max(...heights) - min;
+
+		max = max === 0 ? 1 : max;
+
+		return { max, min, line };
+	}, [props.geojson]);
+
+	const _fillExtrusionColor: (string | number | string[])[] = useMemo(() => {
+		if (!_geojsonInfo) return defaultFillExtrusionColor;
+
+		return [
+			'interpolate',
+			['linear'],
+			['get', 'height'],
+			0,
+			'rgb(0,255,55)',
+			_geojsonInfo.max * elevationFactor,
+			'rgb(255,0,0)',
+		];
+	}, [_geojsonInfo, props.elevationFactor]);
+
+	const _geojson = useMemo(() => {
+		if (!props.geojson?.features || !_geojsonInfo) return;
+
+		const newData = getElevationData(_geojsonInfo, elevationFactor);
+		return newData;
+	}, [_geojsonInfo, elevationFactor]);
+
+	useSource({
+		mapId: props.mapId,
+		sourceId: sourceName.current,
+		source: {
+			type: 'geojson',
+			data: _geojson || featureCollection([]),
+		},
+	});
+
+	useLayer({
+		layerId: layerName.current,
+		source: sourceName.current,
+
+		options: {
+			type: 'fill-extrusion',
+			paint: {
+				'fill-extrusion-height': ['get', 'height'],
+				'fill-extrusion-opacity': 0.9,
+				'fill-extrusion-color': (_fillExtrusionColor || defaultFillExtrusionColor) as (DataDrivenPropertyValueSpecification<string>),
+			},
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+	});
+
+	return <></>;
+};
+
+MlSpatialElevationProfile.defaultProps = {
+	elevationFactor: 1,
+};
+
+export default MlSpatialElevationProfile;

package/src/components/MlSpatialElevationProfile/util/getElevationData.tsx

@@ -0,0 +1,103 @@
+import { distance, lineOffset } from '@turf/turf';
+import { polygon, lineString, featureCollection} from '@turf/helpers';
+import { GeoJSONFeature } from 'maplibre-gl';
+
+interface geometry{
+coordinates: Array<number>
+}
+interface line {
+geometry: geometry
+}
+interface _geojsonInfo {
+line: line, 
+min: number
+}
+
+
+
+export default function getElevationData(_geojsonInfo: _geojsonInfo, elevationFactor: number) {
+
+    const createStep =  (x: number, y: number, z: number, x2: number, y2: number) => {
+            //const summand = 0.0002;
+            const line = lineString([
+                [x, y],
+                [x2, y2],
+            ]);
+            const offsetLine = lineOffset(line, 5, { units: 'meters' });
+            const x3 = offsetLine.geometry.coordinates[0][0];
+            const y3 = offsetLine.geometry.coordinates[0][1];
+            const x4 = offsetLine.geometry.coordinates[1][0];
+            const y4 = offsetLine.geometry.coordinates[1][1];
+    
+            return polygon(
+                [
+                    [
+                        [x, y],
+                        [x2, y2],
+    
+                        [x4, y4],
+                        [x3, y3],
+                        [x, y],
+                    ],
+                ],
+                { height: z * elevationFactor }
+            );
+        };
+    
+        const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+		const points: GeoJSONFeature[] = [];
+
+		_geojsonInfo.line.geometry.coordinates.forEach((coordinate: number, index: number) => {
+			//const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
+			//points.push(point);
+			if (_geojsonInfo.line.geometry.coordinates[index + 1]) {
+				const wayLength = distance(
+					[coordinate[0], coordinate[1]],
+					[
+						_geojsonInfo.line.geometry.coordinates[index + 1][0],
+						_geojsonInfo.line.geometry.coordinates[index + 1][1],
+					],
+					{ units: 'kilometers' }
+				);
+				let listLength = ~~((wayLength * 1000) / 10);
+				listLength = listLength < 1 ? 1 : listLength;
+				for (let i = 0; i < listLength; i++) {
+					const x = lerp(
+						_geojsonInfo.line.geometry.coordinates[index][0],
+						_geojsonInfo.line.geometry.coordinates[index + 1][0],
+						i / listLength
+					);
+					const y = lerp(
+						_geojsonInfo.line.geometry.coordinates[index][1],
+						_geojsonInfo.line.geometry.coordinates[index + 1][1],
+						i / listLength
+					);
+					const z = lerp(
+						_geojsonInfo.line.geometry.coordinates[index][2] - _geojsonInfo.min,
+						_geojsonInfo.line.geometry.coordinates[index + 1][2] - _geojsonInfo.min,
+						i / listLength
+					);
+
+					const x2 = lerp(
+						_geojsonInfo.line.geometry.coordinates[index][0],
+						_geojsonInfo.line.geometry.coordinates[index + 1][0],
+						(i + 1) / listLength
+					);
+					const y2 = lerp(
+						_geojsonInfo.line.geometry.coordinates[index][1],
+						_geojsonInfo.line.geometry.coordinates[index + 1][1],
+						(i + 1) / listLength
+					);
+
+					const point = createStep(x, y, z, x2, y2);
+					points.push(point as unknown as GeoJSONFeature);
+				}
+			}
+		});
+
+		const output = featureCollection(points);
+
+		return output;
+  
+}
+

package/src/components/MlThreeJsLayer/MlThreeJsLayer.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [ "Map layer" ],
   "category": "layer",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
 
@@ -7,9 +7,8 @@ import useMap from "../../hooks/useMap";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
-import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
-console.log(sample_polygon_geojson_1);
+
 const storyoptions = {
 	title: "MapComponents/MlTransitionGeoJsonLayer",
 	component: MlTransitionGeoJsonLayer,

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -1,83 +1,23 @@
-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 { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
+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;
 
-interface MlTransitionGeoJsonLayerProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: string;
-	/**
-	 * GeoJSON data that is supposed to be rendered by this component.
-	 */
-	geojson: Feature | FeatureCollection | undefined;
-	/**
-	 * Type of the layer that will be added to the MapLibre instance.
-	 * Possible values: "line", "circle", "fill"
-	 */
-	type?: "fill" | "line" | "circle";
-	/**
-	 * Paint property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
-	/**
-	 * Layout property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
-	/**
-	 * Javascript object that is spread into the addLayer commands first parameter.
-	 */
-	options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
-	/**
-	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-	 */
-	defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
-	/**
-	 * 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;
-	/**
-	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-	 */
-	onHover?: MapLayerMouseEvent;
-	/**
-	 * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-	 */
-	onClick?: MapLayerMouseEvent;
-	/**
-	 * Leave event handler that is executed whenever a geometry rendered by this component is
-	 * left/unhovered.
-	 */
-	onLeave?: MapLayerMouseEvent;
-	/**
-	 * Creates transition animation whenever the geojson prop changes.
-	 * Only works with layer type "line" and LineString GeoJSON data.
-	 */
+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({
@@ -93,9 +33,7 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 	const currentTransitionStepRef = useRef(false);
 	const transitionGeojsonDataRef = useRef([]);
 	const transitionGeojsonCommonDataRef = useRef([]);
-	const [displayGeojson, setDisplayGeojson] = useState(
-		turf.featureCollection([])
-	);
+	const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
 
 	useEffect(() => {
 		return () => {
@@ -125,8 +63,8 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 		if (!mapHook.map || !initializedRef.current) return;
 
 		if (
-			typeof props.transitionTime !== "undefined" &&
-			props.type === "line" &&
+			typeof props.transitionTime !== 'undefined' &&
+			props.type === 'line' &&
 			oldGeojsonRef.current
 		) {
 			transitionInProgressRef.current = false;
@@ -140,10 +78,10 @@ const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
 
 	const startTransition = useCallback(() => {
 		if (
-			props.type === "line" &&
-			typeof props.transitionTime !== "undefined" &&
+			props.type === 'line' &&
+			typeof props.transitionTime !== 'undefined' &&
 			props.transitionTime &&
-			typeof props.geojson !== "undefined" &&
+			typeof props.geojson !== 'undefined' &&
 			JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
 		) {
 			transitionToGeojson();

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

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

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

@@ -10,6 +10,5 @@
   },
   "tags": ["Map layer"],
   "category": "layer",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -43,8 +43,7 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 			layerId.current,
 			{
 				type: 'vector',
-				tiles: [props.url],
-				tileSize: 512,
+				tiles: [props.url || ""],
 				attribution: '',
 				...props.sourceOptions,
 			},
@@ -60,6 +59,8 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 					maxzoom: 22,
 					layout: {},
 					paint: {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
 						'line-opacity': 0.5,
 						'line-color': 'rgb(80, 80, 80)',
 						'line-width': 2,

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }