@mapcomponents/react-maplibre 0.1.69 → 0.1.71

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

@@ -1,188 +0,0 @@
-import React, {  useState, useMemo } from 'react';
-import Sidebar from '../../../ui_components/Sidebar';
-import { Select, Typography, Slider, Stack, MenuItem, FormControl } from '@mui/material';
-import { ColorPicker } from 'mui-color';
-import MlGeoJsonLayer from '../MlGeoJsonLayer';
-
-/*
-const FeatureNames = () => {
-	const names = ['Show all', 'Hofgarten', 'Stadtgarten', 'Opernplatz', 'Keiserplatz'];
-	return names.map((item) => {
-		console.log(item);
-		return (
-			<>
-				<MenuItem key={item} value={`"${item}"`}>
-					{item}
-				</MenuItem>
-			</>
-		);
-	});
-};
-*/
-
-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 PolygonStyler = (props) => {
-	const [color, setColor] = useState('#2485C1');
-	const [opacity, setOpacity] = useState(0.8);
-	const [featureToShow, setFeatureToShow] = useState('Show all');
-	const [geomType, setGeomType] = useState('fill');
-	const [lineWidth, setLineWidth] = useState(6);
-
-	const storyGeoJson = useMemo(() => {
-		if (featureToShow === 'Show all') {
-			return props.geojson;
-		}
-		return {
-			type: 'FeatureCollection',
-			features: props.geojson.features.filter((item) => item.properties.name === featureToShow),
-		};
-	}, [featureToShow, props.geojson]);
-
-	const handleColorChange = (e) => {
-		setColor(`#${e.hex}`);
-	};
-
-	return (
-		<>
-			<Sidebar>
-				<Stack paddingTop={5} spacing={3} direction="column" sx={{ mb: 1 }} alignItems="left">
-					<FormControl>
-						<Typography>Geometry type:</Typography>
-						<Select
-							value={geomType}
-							onChange={(e) => {
-								setGeomType(e.target.value);
-								console.log(e.target.value);
-							}}
-						>
-							<MenuItem value={'fill'} key={1}>
-								fill
-							</MenuItem>
-							<MenuItem value={'circle'} key={2}>
-								circle
-							</MenuItem>
-							<MenuItem value={'line'} key={3}>
-								line
-							</MenuItem>
-						</Select>
-					</FormControl>
-					<Typography>Feature to show:</Typography>
-					<FormControl>
-						<Select
-							value={featureToShow}
-							onChange={(e) => {
-								setFeatureToShow(e.target.value);
-								console.log(e.target.value);
-							}}
-						>
-							<MenuItem value={'Show all'} key={1}>
-								Show all
-							</MenuItem>
-							<MenuItem value={'Hofgarten'} key={2}>
-								Hofgarten
-							</MenuItem>
-							<MenuItem value={'Stadtgarten'} key={3}>
-								Stadtgarten
-							</MenuItem>
-							<MenuItem value={'Opernplatz'} key={4}>
-								Opernplatz
-							</MenuItem>
-							<MenuItem value={'Keiserplatz'} key={5}>
-								Keiserplatz
-							</MenuItem>
-						</Select>
-					</FormControl>
-					<Typography>Display color:</Typography>
-					<ColorPicker value={color} onChange={handleColorChange} />
-
-					<Typography>Opacity:</Typography>
-					<Slider
-						defaultValue={1}
-						aria-label="Default"
-						value={opacity}
-						max={1}
-						min={0}
-						step={0.01}
-						marks={marks}
-						onChange={(e) => {
-							setOpacity(e.target.value);
-							console.log(e);
-						}}
-					/>
-					<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);
-						}}
-						disabled={geomType !== 'line'}
-					/>
-				</Stack>
-			</Sidebar>
-
-			<MlGeoJsonLayer
-				geojson={storyGeoJson}
-				defaultPaintOverrides={{
-					fill: {
-						'fill-color': color,
-						'fill-opacity': opacity,
-					},
-					circle: {
-						'circle-color': color,
-						'circle-opacity': opacity,
-					},
-					line: {
-						'line-color': color,
-						'line-opacity': opacity,
-						'line-width': lineWidth,
-					},
-				}}
-				type={geomType}
-			/>
-		</>
-	);
-};
-
-export default PolygonStyler;

package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import MlGeoJsonLayer from '../MlGeoJsonLayer';
-import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
-
-const CircleMapStyler = (props: MlGeoJsonLayerProps) => {
-	return <MlGeoJsonLayer {...props} />;
-};
-
-export default CircleMapStyler;

package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import MlGeoJsonLayer from '../MlGeoJsonLayer';
-import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
-
-const HeatMapStyler = (props: MlGeoJsonLayerProps) => {
-
-	return <MlGeoJsonLayer {...props} />;
-};
-
-export default HeatMapStyler;

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.ts

@@ -1,31 +0,0 @@
-import { Feature, FeatureCollection } from "@turf/turf";
-import { LayerSpecification } from "maplibre-gl";
-
-const mapGeometryTypesToLayerTypes = {
-	Position: "circle",
-	Point: "circle",
-	MultiPoint: "circle",
-	LineString: "line",
-	MultiLineString: "line",
-	Polygon: "fill",
-	MultiPolygon: "fill",
-	GeometryCollection: "circle",
-};
-
-const getDefaulLayerTypeByGeometry: Function = (
-	geojson: Feature | FeatureCollection
-): LayerSpecification['type'] => {
-	if (geojson?.type === "Feature") {
-		return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
-			? mapGeometryTypesToLayerTypes[geojson.geometry.type]
-			: "circle";
-	}
-	if (geojson?.type === "FeatureCollection") {
-		if (geojson.features.length) {
-			return getDefaulLayerTypeByGeometry(geojson.features[0]);
-		}
-		return "circle";
-	}
-	return "fill";
-};
-export default getDefaulLayerTypeByGeometry;

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts

@@ -1,37 +0,0 @@
-import { LayerSpecification, RasterLayerSpecification } from 'maplibre-gl';
-
-const getDefaultPaintPropsByType = (
-	type: string,
-	defaultPaintOverrides?: { [key: string]: unknown }
-): Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']> => {
-	switch (type) {
-		case 'fill':
-			if (defaultPaintOverrides?.fill) {
-				return defaultPaintOverrides.fill;
-			}
-			return {
-				'fill-color': 'rgba(10,240,256,0.6)',
-			};
-		case 'line':
-			if (defaultPaintOverrides?.line) {
-				return defaultPaintOverrides.line;
-			}
-			return {
-				'line-color': 'rgb(203,211,2)',
-				'line-width': 5,
-				'line-blur': 0,
-			};
-		case 'circle':
-		default:
-			if (defaultPaintOverrides?.circle) {
-				return defaultPaintOverrides.circle;
-			}
-			return {
-				'circle-color': 'rgba(10,240,256,0.8)',
-				'circle-stroke-color': '#fff',
-				'circle-stroke-width': 2,
-			};
-	}
-};
-
-export default getDefaultPaintPropsByType;

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

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

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.meta_.json

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

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.stories.tsx

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

package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.tsx

@@ -1,128 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import useMap from "../../hooks/useMap";
-import useLayer from "../../hooks/useLayer";
-import useSource from "../../hooks/useSource";
-
-export interface MlGeojsonLayerWithSourceProps {
-  /**
-   * 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;
-}
-
-/**
- * MlGeojsonLayerWithSource
- *
- */
-const MlGeojsonLayerWithSource = (props: MlGeojsonLayerWithSourceProps) => {
-  const Spiekeroog = {
-    type: "Feature",
-    geometry: {
-      type: "Polygon",
-      coordinates: [
-        [
-          [7.678070068359375, 53.77276133960687],
-          [7.665367126464845, 53.76190478322587],
-          [7.66794204711914, 53.75439486837337],
-          [7.682018280029297, 53.75104541932613],
-          [7.683563232421874, 53.752567929273795],
-          [7.6895713806152335, 53.75784553654847],
-          [7.694721221923828, 53.765253366367],
-          [7.697296142578124, 53.76555776977467],
-          [7.696952819824219, 53.76190478322587],
-          [7.702102661132812, 53.7634268995759],
-          [7.74038314819336, 53.760179651329416],
-          [7.7458763122558585, 53.7626151110553],
-          [7.76956558227539, 53.76413720165758],
-          [7.796001434326172, 53.77002209954434],
-          [7.801666259765624, 53.77113810781356],
-          [7.801666259765624, 53.77235553754314],
-          [7.806129455566406, 53.77306568858016],
-          [7.815742492675781, 53.775703287246394],
-          [7.819690704345703, 53.77752921999979],
-          [7.81951904296875, 53.77955794100295],
-          [7.8172874450683585, 53.78026797018521],
-          [7.785530090332031, 53.780166538180396],
-          [7.756175994873047, 53.78067369575275],
-          [7.754802703857421, 53.7819922767562],
-          [7.7398681640625, 53.78189084891923],
-          [7.725791931152345, 53.78168799250984],
-          [7.71686553955078, 53.77986224069494],
-          [7.709827423095702, 53.78087655706549],
-          [7.695751190185547, 53.78036940194483],
-          [7.687854766845703, 53.778340720169446],
-          [7.678070068359375, 53.77276133960687],
-        ],
-      ],
-    },
-  };
-
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const initializedRef = useRef(false);
-
-  const sourceId = "geojson-source-island";
-  useSource({
-    mapId: props.mapId,
-    sourceId: sourceId,
-    source: {
-      type: "geojson",
-      data: Spiekeroog,
-    },
-  });
-
-  useLayer({
-    mapId: props.mapId,
-    layerId: "Spiekeroog-area",
-    source: sourceId,
-    options: {
-      id: "layer1",
-      source: sourceId,
-      type: "fill",
-      paint: {
-        "fill-color": "green",
-        "fill-opacity": 0.5,
-      },
-    },
-  });
-
-  useLayer({
-    mapId: props.mapId,
-    layerId: "Spiekeroog-points",
-    source: sourceId,
-    options: {
-      id: "Spiekeroog-points",
-      source: sourceId,
-      type: "circle",
-      paint: {
-        "circle-radius": 4,
-        "circle-color": "green",
-      },
-    },
-  });
-
-  useEffect(() => {
-    if (!mapHook.map || initializedRef.current) return;
-    // the MapLibre-gl instance (mapHook.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    initializedRef.current = true;
-
-    mapHook.map.map.setCenter([7.7388381958, 53.7732685866]);
-    mapHook.map.map.setZoom(11);
-  }, [mapHook.map, props.mapId]);
-
-  return <></>;
-};
-
-MlGeojsonLayerWithSource.defaultProps = {
-  mapId: "map_1",
-};
-export default MlGeojsonLayerWithSource;

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

@@ -1 +0,0 @@
-Upload und Darstellung von GPX Tracks 

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

@@ -1 +0,0 @@
-Upload and presentation of GPX tracks.

package/src/components/MlGpxViewer/MlGpxViewer.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlGpxViewer",
-  "title": "GPX viewer",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "GPX Darstellung",
-      "description": ""
-    }
-  },
-  "tags": ["Map add-on"],
-  "category": "add-ons",
-  "type": "component"
-}

package/src/components/MlGpxViewer/MlGpxViewer.stories.tsx

@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import MlGpxViewer from './MlGpxViewer';
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-import MlGpxViewerInstructions from './util/MlGpxViewerInstructions';
-import TopToolbar from '../../ui_components/TopToolbar';
-import { Button, IconButton } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import MlGpxDemoLoader from './util/MlGpxDemoLoader';
-import FileCopy from '@mui/icons-material/FileCopy';
-import InfoIcon from '@mui/icons-material/Info';
-import Dropzone from '../../ui_components/Dropzone';
-import UploadButton from '../../ui_components/UploadButton';
-import MetadataDrawer from './util/MetadataDrawer';
-import { MetadataType } from '../../hooks/useGpx/useGpx';
-
-const storyoptions = {
-	title: 'MapComponents/MlGpxViewer',
-	component: MlGpxViewer,
-	argTypes: {
-		options: {
-			control: {
-				type: 'object',
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => {
-	const [gpxData, setGpxData] = useState<string | ArrayBuffer | undefined>();
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-	const [demoLoaderOpen, setDemoLoaderOpen] = useState(false);
-	const [guide, setGuide] = useState(false);
-	const [metadataDrawerOpen, setMetadataDrawerOpen] = useState(false);
-	const [metadata, setMetadata] = useState<MetadataType[]>([]);
-
-	const handleClick1 = () => {
-		setDemoLoaderOpen(!demoLoaderOpen);
-	};
-	const handleClick2 = () => {
-		setGuide(true);
-		setTimeout(() => {
-			setGuide(false);
-		}, 9000);
-	};
-
-	return (
-		<>
-			<MlGpxViewerInstructions open={guide} />
-			<MlGpxDemoLoader open={demoLoaderOpen} setOpen={setDemoLoaderOpen} setGpx={setGpxData} />
-			<TopToolbar appBarStyle={{ zIndex: 500 }}>
-				<Button variant="contained" onClick={handleClick2} sx={{ marginRight: '10px' }}>
-					Guide me through
-				</Button>
-				<Button variant="contained" onClick={handleClick1}>
-					Demo Mode
-				</Button>
-			</TopToolbar>
-
-			<div
-				style={{
-					position: 'fixed',
-					right: '11px',
-					bottom: mediaIsMobile ? '230px' : '145px',
-					display: 'flex',
-					flexDirection: 'column',
-					gap: '5px',
-					zIndex: 1000,
-				}}
-			>
-				<UploadButton
-					setData={setGpxData}
-					buttonComponent={
-						<IconButton size="large">
-							<FileCopy />
-						</IconButton>
-					}
-				/>
-				<IconButton
-					onClick={() => {
-						setMetadataDrawerOpen((prevState) => !prevState);
-					}}
-					size="large"
-				>
-					<InfoIcon />
-				</IconButton>
-			</div>
-			<MetadataDrawer metadata={metadata} open={metadataDrawerOpen} />
-			<Dropzone setData={(data) => setGpxData(data)} />
-			<MlGpxViewer
-				gpxData={gpxData as string | undefined}
-				onParseGpxData={(parsedGpx) => setMetadata(parsedGpx.metadata ? parsedGpx.metadata : [])}
-			/>
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlGpxViewer/MlGpxViewer.test.js

@@ -1,53 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from '../../util';
-
-import MlGpxViewer from './MlGpxViewer';
-import { uuid_regex } from '../../setupTests';
-
-const gpxSample = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<gpx version="1.1" creator="outdooractive - http://www.outdooractive.com" xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd" xmlns:oa="http://www.outdooractive.com/GPX/Extensions/1">
-	<metadata>
-		<name>Traumpfad Bergheidenweg</name>
-		<author>
-			<name>Nicole Pfeifer - Rhein-Mosel-Eifel-Touristik</name>
-		</author>
-		<link href="https://www.outdooractive.com/r/1386783"/>
-		<time>2021-04-08T13:53:11.658</time>
-		<extensions>
-			<oa:oaCategory>hikingTourTrail</oa:oaCategory>
-		</extensions>
-	</metadata>
-	<wpt lon="7.07093" lat="50.369418">
-		<ele>423</ele>
-		<name>HausAcht - Tagungs- und Freizeithaus</name>
-		<desc></desc>
-		<src>feratel-eifel.21430.e4c23207-9b3e-47bc-a359-730147d57644</src>
-		<link href="https://www.HausAcht.de"/>
-		<type>Ferienwohnung</type>
-	</wpt>
-</gpx>`;
-
-// eslint-disable-next-line react/react-in-jsx-scope
-const testComponent = <MlGpxViewer gpxData={gpxSample} />;
-
-let sourceTestParams = [
-	'<MlGpxViewer />',
-	testComponent,
-	new RegExp('^.*"gpx-viewer-source-' + uuid_regex + '".*$'),
-	'gpx-viewer-source',
-];
-let layer1TestParams = [
-	'<MlGpxViewer />',
-	testComponent,
-	new RegExp('^.*"importer-layer-lines-' + uuid_regex + '".*$'),
-	'importer-layer-lines',
-];
-let layer2TestParams = [
-	'<MlGpxViewer />',
-	testComponent,
-	new RegExp('^.*"importer-layer-points-' + uuid_regex + '".*$'),
-	'importer-layer-points',
-];
-
-layerRemovalTest(...layer1TestParams);
-layerRemovalTest(...layer2TestParams);
-sourceRemovalTest(...sourceTestParams);