@mapcomponents/react-maplibre 0.1.61 → 0.1.63

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -1,15 +1,20 @@
-import React from "react";
+import React from 'react';
 
-import useLayer from "../../hooks/useLayer";
+import useLayer from '../../hooks/useLayer';
 
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuidv4 } from 'uuid';
 
-import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
-import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
-import { Feature, FeatureCollection } from "@turf/turf";
+import getDefaultPaintPropsByType from './util/getDefaultPaintPropsByType';
+import getDefaulLayerTypeByGeometry from './util/getDefaultLayerTypeByGeometry';
+import { Feature, FeatureCollection } from '@turf/turf';
 
-
-import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+import {
+	LineLayerSpecification,
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	MapLayerMouseEvent,
+	LayerSpecification,
+} from 'maplibre-gl';
 
 type MlGeoJsonLayerProps = {
 	/**
@@ -19,7 +24,7 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * 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.
-	 * This layer will not be added to the maplibre-gl instance until a layer with an 
+	 * This layer will not be added to the maplibre-gl instance until a layer with an
 	 * id that matches the value of insertBeforeLayer is created.
 	 */
 	insertBeforeLayer?: string;
@@ -35,7 +40,7 @@ type MlGeoJsonLayerProps = {
 	 * Type of the layer that will be added to the MapLibre instance.
 	 * Possible values: "line", "circle", "fill"
 	 */
-	type?: "fill" | "line" | "circle";
+	type?: 'fill' | 'line' | 'circle';
 	/**
 	 * Paint property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -43,7 +48,10 @@ type MlGeoJsonLayerProps = {
 	 * 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'];
+	paint?:
+		| CircleLayerSpecification['paint']
+		| FillLayerSpecification['paint']
+		| LineLayerSpecification['paint'];
 	/**
 	 * Layout property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -51,7 +59,10 @@ type MlGeoJsonLayerProps = {
 	 * 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'];
+	layout?:
+		| CircleLayerSpecification['layout']
+		| FillLayerSpecification['layout']
+		| LineLayerSpecification['layout'];
 	/**
 	 * Javascript object that is spread into the addLayer commands first parameter.
 	 */
@@ -59,7 +70,11 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * 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'] };
+	defaultPaintOverrides?: {
+		circle?: CircleLayerSpecification['paint'];
+		fill?: FillLayerSpecification['paint'];
+		line?: LineLayerSpecification['paint'];
+	};
 	/**
 	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
 	 */
@@ -73,27 +88,23 @@ type MlGeoJsonLayerProps = {
 	 * left/unhovered.
 	 */
 	onLeave?: MapLayerMouseEvent;
-}
+};
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
  *
  * @component
  */
+
 const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
 	const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	useLayer({
 		mapId: props.mapId,
-		layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
+		layerId: props.layerId || 'MlGeoJsonLayer-' + uuidv4(),
 		geojson: props.geojson,
 		options: {
-			paint:
-				props.paint ||
-				getDefaultPaintPropsByType(
-					layerType,
-					props.defaultPaintOverrides
-				),
+			paint: props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides),
 			layout: props.layout || {},
 			...props.options,
 			type: layerType as LayerSpecification['type'],
@@ -104,8 +115,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
 		onLeave: props.onLeave,
 	});
 
-	return (<></>);
+	return <></>;
 };
 
-
 export default MlGeoJsonLayer;

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

@@ -1,26 +1,140 @@
 {
-  "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]
-    ]
-  }
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"id": "1",
+			"type": "Feature",
+			"properties": { "name": "Hofgarten" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.104246282215286, 50.734109601136055],
+						[7.10209443365315, 50.732370465826534],
+						[7.104720792410859, 50.73113417375197],
+						[7.1049635650692835, 50.73112718895845],
+						[7.105724988405626, 50.73137864087451],
+						[7.107071273146147, 50.73179073970729],
+						[7.107060238024758, 50.73190249469832],
+						[7.106629868312979, 50.732552065303736],
+						[7.104246282215286, 50.734109601136055]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "2",
+			"type": "Feature",
+			"properties": { "name": "Stadtgarten" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.105893155288783, 50.73444907786518],
+						[7.106402034397206, 50.733582900352985],
+						[7.106897536862704, 50.73369549309848],
+						[7.107111352729277, 50.7336105803617],
+						[7.107157469878132, 50.733549549237495],
+						[7.108406816456494, 50.733927190803854],
+						[7.1084747528756225, 50.73402627417772],
+						[7.10853382802236, 50.734039360645426],
+						[7.1083093424639685, 50.73448242889327],
+						[7.108247313560071, 50.73447868993853],
+						[7.108226637258156, 50.734508601570155],
+						[7.107907631465423, 50.734559077405464],
+						[7.107694960936584, 50.73457777214577],
+						[7.107597486944087, 50.734575902671935],
+						[7.107576810643138, 50.73462077001935],
+						[7.108185284655264, 50.734633856320954],
+						[7.108087810663733, 50.73492362349066],
+						[7.107910600755304, 50.734888120981594],
+						[7.107875467179866, 50.734952050517165],
+						[7.107778849851883, 50.73496038914578],
+						[7.107682232521427, 50.734963168688125],
+						[7.10769979930771, 50.7350132004259],
+						[7.107339680163761, 50.73499652318577],
+						[7.107221104348952, 50.73497706639833],
+						[7.107278196408828, 50.73488534143442],
+						[7.107019086291899, 50.73484364820982],
+						[7.106988344414447, 50.734927034622416],
+						[7.106514041150831, 50.73484364820982],
+						[7.106606266786173, 50.734604606338195],
+						[7.105893155288783, 50.73444907786518]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "3",
+			"type": "Feature",
+			"properties": { "name": "Opernplatz" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.104632320011916, 50.736606042555366],
+						[7.104779316251751, 50.736422797521044],
+						[7.104817178920001, 50.7363283555695],
+						[7.104868404882268, 50.736319898072],
+						[7.105434117684382, 50.73653415420432],
+						[7.105596704435243, 50.736569393605805],
+						[7.105797153853388, 50.73659758510803],
+						[7.105725882948974, 50.73684848872955],
+						[7.105338347406786, 50.736800563422435],
+						[7.1051824423039704, 50.73677237204271],
+						[7.104863950451204, 50.73668356908482],
+						[7.104632320011916, 50.736606042555366]
+					]
+				],
+				"type": "Polygon"
+			}
+		},
+		{
+			"id": "2c3972ac51f4350582ecc9de57d47c75",
+			"type": "Feature",
+			"properties": { "name": "Keiserplatz" },
+			"geometry": {
+				"coordinates": [
+					[
+						[7.100878520474112, 50.73167947463554],
+						[7.100876728417518, 50.731653654340704],
+						[7.100857282327439, 50.731633541894354],
+						[7.10079841102764, 50.73157086579248],
+						[7.100757419228046, 50.731538946883745],
+						[7.100606042670478, 50.73140800018959],
+						[7.100525308506718, 50.73136967425927],
+						[7.10037393194915, 50.731331348297005],
+						[7.100313381326117, 50.731308991470826],
+						[7.100267968358821, 50.73127226237719],
+						[7.100184711252609, 50.73119561026192],
+						[7.099690214497514, 50.73138724031432],
+						[7.099691475969678, 50.73140400766788],
+						[7.099861143861631, 50.73141398829278],
+						[7.0998571229209375, 50.73145675554436],
+						[7.099832918440285, 50.73150591044205],
+						[7.099780384599569, 50.73155556557083],
+						[7.099892082101547, 50.73155547486934],
+						[7.099882074627317, 50.73158758317477],
+						[7.0999202108099695, 50.73158998765363],
+						[7.099912858928455, 50.73159899760262],
+						[7.0999207681442975, 50.73160353227202],
+						[7.099921690047621, 50.7316057996082],
+						[7.099930036031913, 50.73160923675198],
+						[7.100091909667459, 50.731627463555895],
+						[7.100165737828326, 50.731649680201066],
+						[7.1003014331650665, 50.731709520224214],
+						[7.100316426855426, 50.73173557596814],
+						[7.100384577793838, 50.73178469147469],
+						[7.100415620558475, 50.731796580130755],
+						[7.100494222199336, 50.7318078992016],
+						[7.100585685541193, 50.731804728779615],
+						[7.100677188738862, 50.73177247244158],
+						[7.100842140282873, 50.73170978389162],
+						[7.100873170896176, 50.73169013008063],
+						[7.100878520474112, 50.73167947463554]
+					]
+				],
+				"type": "Polygon"
+			}
+		}
+	]
 }

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

@@ -1,22 +1,142 @@
 {
-  "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]
-    ]
-  }
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"id": "af85dc8aa961efd66cfcf74213b7ef57",
+			"type": "Feature",
+			"properties": { "name": "Mauspfad" },
+			"geometry": {
+				"coordinates": [
+					[7.100862609363844, 50.7344404792787],
+					[7.100561470141059, 50.73464673993831],
+					[7.100435651698547, 50.73473812095355],
+					[7.1003510852035845, 50.73478772771537],
+					[7.100264456112427, 50.73485561056759],
+					[7.100087072734084, 50.734958740096886],
+					[7.099971567278942, 50.73501487379605],
+					[7.09977149532881, 50.735103643229735],
+					[7.099688991431805, 50.7351166975437]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "7498f72ced719c8385232abc8e5c5df8",
+			"type": "Feature",
+			"properties": { "name": "Windeckstraße" },
+			"geometry": {
+				"coordinates": [
+					[7.0985272716624195, 50.73420515798543],
+					[7.097871372036735, 50.73446815229278],
+					[7.097802428041831, 50.73450471192254],
+					[7.097748390856651, 50.73456485834811]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "70dd65167a084220c36e4d7a345610f0",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.09894081766015, 50.73432444924248],
+					[7.098486102002624, 50.734163776827444],
+					[7.098957555660746, 50.73453808973156]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "1f6aead42b46810c75898899823be3b2",
+			"type": "Feature",
+			"properties": { "name": "Poststraße" },
+			"geometry": {
+				"coordinates": [
+					[7.098527916107116, 50.73420653271353],
+					[7.098053194441377, 50.733712281883356],
+					[7.0978593731692, 50.73351315777262],
+					[7.0975330642553445, 50.7331307848207],
+					[7.097445985132765, 50.73302944371906]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "5cf9f0c4a8faf5abe1ddb87e1a6ffb39",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.099941299919607, 50.73368573357055],
+					[7.099819174531035, 50.73374711589318],
+					[7.099592883371059, 50.73406084651026],
+					[7.098939153351864, 50.734320013695765],
+					[7.09900021604534, 50.73444050321487],
+					[7.098964296814302, 50.73454735215134],
+					[7.099327081054895, 50.734774689503496],
+					[7.0994384306740415, 50.73483834376472],
+					[7.099686332909442, 50.735125016962115],
+					[7.099847969462104, 50.73530006466575]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "d3317ba30229f1abd8bfb1b91264a366",
+			"type": "Feature",
+			"properties": { "name": "In der Sürst" },
+			"geometry": {
+				"coordinates": [
+					[7.099398298122509, 50.7338345667178],
+					[7.099134563357126, 50.73366617816262],
+					[7.09898418827251, 50.73359735831775],
+					[7.098873142055368, 50.733547573686366],
+					[7.098732020821615, 50.73351828858421],
+					[7.09853537647993, 50.7334963247454],
+					[7.0981860435900614, 50.733547573686366],
+					[7.0979315626756545, 50.7335944298116]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "b493531ab87539db3b5b70b397a9391f",
+			"type": "Feature",
+			"properties": { "name": "Remiglustraße" },
+			"geometry": {
+				"coordinates": [
+					[7.101445198112543, 50.735019714263245],
+					[7.101169850280485, 50.734715034478285],
+					[7.100892127092777, 50.7344711021496],
+					[7.100591732624622, 50.73421281947634],
+					[7.100295116692507, 50.73395333960934],
+					[7.099399601108104, 50.73383376315303]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "52212dad7a1cc396e34cb6d89c40bdd8",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.100582376610475, 50.73329792502423],
+					[7.10032965928491, 50.733507640237804],
+					[7.100032014435698, 50.73363915607925],
+					[7.09986353621963, 50.73369958215281],
+					[7.099672594239564, 50.733728017925586],
+					[7.099588355131516, 50.73373512686561],
+					[7.099397436366161, 50.733829782653686],
+					[7.099276521129809, 50.73390228483311],
+					[7.099158787873421, 50.73396471717578],
+					[7.098942413240309, 50.73405131673837],
+					[7.098811952064125, 50.73409562342968],
+					[7.098519209913093, 50.734202362104526]
+				],
+				"type": "LineString"
+			}
+		}
+	]
 }

package/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.lineStyler.js

@@ -0,0 +1,189 @@
+import React, {  useEffect, useState, useMemo } from 'react';
+import Sidebar from '../../../ui_components/Sidebar';
+import {
+	Select,
+	Typography,
+	Slider,
+	Stack,
+	FormControl,
+	MenuItem,
+	Checkbox,
+	ListItemText,
+} from '@mui/material';
+import { ColorPicker } from 'mui-color';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+import useMap from '../../../hooks/useMap';
+
+const streetNames = [
+	'Show all',
+	'In der Sürst',
+	'Münsterplatz',
+	'Poststraße',
+	'Mauspfad',
+	'Remiglustraße',
+	'Windeckstraße',
+];
+const marks = [
+	{
+		value: 0,
+		label: '0%',
+	},
+	{
+		value: 0.25,
+		label: '25%',
+	},
+	{
+		value: 0.5,
+		label: '50%',
+	},
+	{
+		value: 0.75,
+		label: '75%',
+	},
+	{
+		value: 1,
+		label: '100%',
+	},
+];
+const widthMarks = [
+	{
+		value: 0,
+		label: '0',
+	},
+	{
+		value: 5,
+		label: '5',
+	},
+	{
+		value: 10,
+		label: '10',
+	},
+];
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+	PaperProps: {
+		style: {
+			maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+			width: 250,
+		},
+	},
+};
+
+const LineStyler = (props) => {
+	const [color, setColor] = useState('#2485C1');
+	const [opacity, setOpacity] = useState(0.8);
+	const [featuresToShow, setFeaturesToShow] = useState(['Show all']);
+	const [lineWidth, setLineWidth] = useState(5);
+
+	const storyGeoJson = useMemo(() => {
+		if (featuresToShow[0] === 'Show all') {
+			return props.geojson;
+		}
+		return {
+			type: 'FeatureCollection',
+			features: props.geojson.features.filter((item) => {
+				for (var i = 0; i < featuresToShow.length; i++) {
+					if (item.properties.name === featuresToShow[i]) {
+						return item;
+					}
+				}
+			}),
+		};
+	}, [featuresToShow, props.geojson]);
+
+	const mapHook = useMap({ mapId: "map_1", waitForLayer: "Linestring" });
+
+	const handleChange = (event) => {
+		const {
+			target: { value },
+		} = event;
+		setFeaturesToShow(
+			// On autofill we get a stringified value.
+			typeof value === 'string' ? value.split(',') : value
+		);
+		console.log(featuresToShow);
+	};
+
+	const handleColorChange = (e) => {
+		setColor(`#${e.hex}`);
+	};
+
+	useEffect(() => {
+		mapHook.map?.map.setCenter([7.099301807798469, 50.734214410085684]);
+		mapHook.map?.map.setZoom(16.5);
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<Sidebar>
+				<Stack paddingTop={5} spacing={3} direction="column" sx={{ mb: 1 }} alignItems="left">
+					<Typography>Feature to show:</Typography>
+
+					<FormControl>
+						<Select
+							id="demo-multiple-checkbox"
+							multiple
+							native={false}
+							value={featuresToShow}
+							onChange={handleChange}
+							renderValue={(selected) => selected.join(', ')}
+							MenuProps={MenuProps}
+						>
+							{streetNames?.map((name) => (
+								<MenuItem key={name} value={name}>
+									<Checkbox checked={featuresToShow.indexOf(name || 'Show All') > -1} />
+									<ListItemText primary={name} />
+								</MenuItem>
+							))}
+						</Select>
+					</FormControl>
+
+					<Typography>Display color:</Typography>
+					<ColorPicker value={color} onChange={handleColorChange} />
+
+					<Typography>Opacity:</Typography>
+					<Slider
+						value={opacity}
+						aria-label="Default"
+						max={1}
+						min={0}
+						step={0.1}
+						marks={marks}
+						onChange={(e) => {
+							setOpacity(e.target.value);
+						}}
+					/>
+					<Typography paddingTop={4}>Stroke:</Typography>
+					<Slider
+						value={lineWidth}
+						aria-label="Default"
+						max={10}
+						min={0}
+						step={1}
+						marks={widthMarks}
+						onChange={(e) => {
+							setLineWidth(e.target.value);
+						}}
+					/>
+				</Stack>
+			</Sidebar>
+
+			<MlGeoJsonLayer
+				geojson={storyGeoJson}
+				layerId={'Linestring'}
+				type="line"
+				defaultPaintOverrides={{
+					line: {
+						'line-color': color,
+						'line-opacity': opacity,
+						'line-width': lineWidth,
+					},
+				}}
+			/>
+		</>
+	);
+};
+
+export default LineStyler;