@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/components/MlGpxViewer/MlGpxViewer.tsx

@@ -1,103 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { bbox, featureCollection, FeatureCollection } from '@turf/turf';
-import { LngLatBoundsLike } from 'maplibre-gl';
-import useMap from '../../hooks/useMap';
-import useGpx, { MetadataType } from '../../hooks/useGpx/useGpx';
-import useLayerHoverPopup from '../../hooks/useLayerHoverPopup/useLayerHoverPopup';
-import useSource from '../../hooks/useSource';
-import useLayer from '../../hooks/useLayer';
-import { v4 as uuidv4 } from 'uuid';
-
-export interface MlGpxViewerProps {
-	/**
-	 * Id of the target MapLibre instance in mapHook
-	 */
-	mapId?: string;
-	/**
-	 * 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;
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix?: string;
-	gpxData: string | undefined;
-	onParseGpxData: (arg0: {
-		geojson: FeatureCollection | undefined;
-		metadata: MetadataType[];
-	}) => void;
-}
-
-/**
- * MlGpxViewer visualizes a given GPX Track on the map
- */
-const MlGpxViewer = (props: MlGpxViewerProps) => {
-	const parsedGpx = useGpx({ data: props.gpxData });
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-	const sourceName = useRef('gpx-viewer-source-' + uuidv4());
-	const layerNameLines = useRef('importer-layer-lines-' + uuidv4());
-	const layerNamePoints = useRef('importer-layer-points-' + uuidv4());
-
-	useLayerHoverPopup({
-		layerId: layerNamePoints.current,
-		getPopupContent: (feature) => feature?.properties?.name,
-	});
-
-	useSource({
-		mapId: props.mapId,
-		sourceId: sourceName.current,
-		source: {
-			type: 'geojson',
-			data: parsedGpx.geojson || featureCollection([]),
-		},
-	});
-
-	useLayer({
-		layerId: layerNameLines.current,
-		source: sourceName.current,
-		options: {
-			type: 'line',
-			paint: {
-				'line-width': 4,
-				'line-color': 'rgba(212, 55, 23,0.5)',
-			},
-		},
-		insertBeforeLayer: props.insertBeforeLayer,
-	});
-
-	useLayer({
-		layerId: layerNamePoints.current,
-		source: sourceName.current,
-		options: {
-			type: 'circle',
-			paint: {
-				'circle-color': 'rgba(72, 77, 99,0.5)',
-				'circle-radius': 7,
-			},
-			filter: ['==', '$type', 'Point'],
-		},
-		insertBeforeLayer: props.insertBeforeLayer,
-	});
-
-	useEffect(() => {
-
-	    if (!mapHook.map || !parsedGpx.geojson) return;
-
-		if (typeof props.onParseGpxData === 'function') {
-			props.onParseGpxData(parsedGpx);
-		}
-		
-		// fit map view to GeoJSON bbox
-		
-		const bounds = bbox(parsedGpx.geojson);
-		mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);
-				
-	}, [parsedGpx]);
-
-	return <></>;
-};
-
-MlGpxViewer.defaultProps = {};
-
-export default MlGpxViewer;

package/src/components/MlGpxViewer/util/GeoJsonContext.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { FeatureCollection } from '@turf/turf';
-
-type ContextProps = { 
-		data: FeatureCollection,
-		setData: Function,
-		getEmptyFeatureCollection: Function
-	};
-
-const GeoJsonContext = React.createContext<Partial<ContextProps>>({});
-
-export const GeoJsonContextProvider = GeoJsonContext.Provider;
-export default GeoJsonContext;

package/src/components/MlGpxViewer/util/GeoJsonProvider.tsx

@@ -1,25 +0,0 @@
-import React, { useState } from "react";
-import { GeoJsonContextProvider } from "./GeoJsonContext";
-import { FeatureCollection } from '@turf/turf';
-
-const GeoJsonProvider = ({ children }:{children:JSX.Element}) => {
-	const [data, setData] = useState<FeatureCollection>({
-		type: "FeatureCollection",
-		features: [],
-	});
-	const getEmptyFeatureCollection = () => {
-		return {
-			type: "FeatureCollection",
-			features: [],
-		};
-	};
-	const value = {
-		data,
-		setData,
-		getEmptyFeatureCollection,
-	};
-
-	return <GeoJsonContextProvider value={value}>{children}</GeoJsonContextProvider>;
-};
-
-export default GeoJsonProvider;

package/src/components/MlGpxViewer/util/MetadataDrawer.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import Drawer from '@mui/material/Drawer';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import { MetadataType } from '../../../hooks/useGpx/useGpx';
-
-type Props = {
-  metadata: MetadataType[];
-  open: boolean;
-}
-
-export default function MetadataDrawer(props: Props) {
-  return (
-			<Drawer variant="persistent" anchor="left" open={props.open}>
-				<Typography
-					variant="h6"
-					style={{
-						textAlign: 'center',
-						padding: '1em',
-					}}
-					noWrap
-				>
-					Informationen zur Route
-				</Typography>
-				<Divider />
-				<List>
-					{props.metadata?.length && props.metadata.map((item, idx) => (
-						<ListItem key={`item--${idx}`}>
-							<ListItemText primary={item.value} />
-						</ListItem>
-					))}
-				</List>
-			</Drawer>
-  )
-}

package/src/components/MlGpxViewer/util/MlGpxDemoLoader.tsx

@@ -1,130 +0,0 @@
-import React, { useRef } from 'react';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Modal from '@mui/material/Modal';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Grid from '@mui/material/Grid';
-import { ListItemButton } from '@mui/material';
-
-const modalStyle = {
-	position: 'absolute',
-	top: '50%',
-	left: '60%',
-	width: 350,
-	height: 280,
-	bgcolor: 'background.paper',
-	color: 'text.primary',
-	boxShadow: 24,
-	p: 4,
-};
-
-const mobileStyle = {
-	position: 'absolute',
-	top: '30%',
-	left: '20%',
-	width: 200,
-	height: 300,
-	bgcolor: 'background.paper',
-	color: 'text.primary',
-	boxShadow: 24,
-	p: 4,
-};
-
-interface MlGpxDemoLoaderProps {
-	open: boolean;
-	setOpen: (open: boolean) => void;
-	setGpx: (gpx: string | undefined) => void;
-}
-
-const samples = [
-	{
-		name: 'mountain_trail.gpx',
-		path: 'assets/sample1.gpx',
-	},
-	{
-		name: 'bycycle_tour.gpx',
-		path: 'assets/sample2.gpx',
-	},
-	{
-		name: 'treckking.gpx',
-		path: 'assets/sample3.gpx',
-	},
-];
-/**
- * MlGpxDemoLoader returns a button to load a Demo GPX Track into the map.
- */
-const MlGpxDemoLoader = (props: MlGpxDemoLoaderProps) => {
-	const reader = useRef(new FileReader());
-	reader.current.onload = () => {
-		if (!reader?.current?.result) return;
-		if (typeof reader.current.result === 'string') {
-			props.setGpx(reader.current.result);
-		}
-		handleClose();
-	};
-
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-
-	const loadSample = (samplePath: string) => {
-		fetch(samplePath)
-			.then(function (response) {
-				return response.blob();
-			})
-			.then(function (gpx) {
-				reader.current.readAsText(gpx);
-			})
-			.catch((error) => console.log(error));
-	};
-
-	const handleClose = () => {
-		props.setOpen(false);
-	};
-
-	return (
-		<>
-			<Modal
-				open={props.open}
-				onClose={handleClose}
-				aria-labelledby="modal-modal-title"
-				aria-describedby="modal-modal-description"
-			>
-				<Box sx={mediaIsMobile ? mobileStyle : modalStyle}>
-					<Grid container>
-						<Grid item xs={10}>
-							<Typography id="modal-modal-title" variant="h6">
-								GPX demo files
-							</Typography>
-						</Grid>
-						<Grid item xs={2}>
-							<Button onClick={handleClose}>
-								<CloseIcon sx={{ color: 'text.primary' }} />
-							</Button>
-						</Grid>
-					</Grid>
-					<Divider />
-
-					<List>
-						{samples.map((el, idx) => (
-							<>
-								<ListItem key={idx}>
-									<ListItemButton onClick={() => loadSample(el.path)}>
-										<ListItemText>{el.name}</ListItemText>
-									</ListItemButton>
-								</ListItem>
-								<Divider key={'div' + idx} variant="inset" component="li" />
-							</>
-						))}
-					</List>
-				</Box>
-			</Modal>
-		</>
-	);
-};
-
-export default MlGpxDemoLoader;

package/src/components/MlGpxViewer/util/MlGpxViewerInstructions.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import Instructions from '../../../util/Instructions';
-import { useMediaQuery } from '@mui/material';
-
-const bubbleBottomRightStyle = {
-	bubbleRight: '-120px',
-	textMarginTop: '70px',
-	textMarginLeft: '120px',
-	iconTransform: 'rotate(180deg)',
-	iconMarginLeft: '200px',
-	zIndex: 200,
-};
-
-const getSteps = (mediaIsMobile:boolean) => [
-	{
-		duration: 3000,
-		props: {
-			...bubbleBottomRightStyle,
-			iconMarginTop: '43px',
-			bubbleBottom: mediaIsMobile ? '90px' : 0,
-		},
-		content: (
-			<>
-				You can load your <br />
-				own GPX file <br /> here
-			</>
-		),
-	},
-	{
-		duration: 3000,
-		props: {
-			...bubbleBottomRightStyle,
-			iconMarginTop: '68px',
-			bubbleBottom: mediaIsMobile ? '90px' : 0,
-		},
-		content: (
-			<>
-				You can see more <br /> information about <br />
-				the track <br />
-				here
-			</>
-		),
-	},
-	{
-		duration: 3000,
-		props: {
-			bubbleLeft: '-40px',
-			bubbleTop: '-150px',
-			textMarginTop: '230px',
-			textMarginLeft: '75px',
-			iconTransform: 'rotate(90deg)',
-			iconMarginTop: '-135px',
-			iconMarginLeft: '280px',
-			zIndex: 400,
-		},
-		content: (
-			<>
-				In demo mode we <br /> provide you some <br /> GPX tracks <br /> to load.
-			</>
-		),
-	},
-];
-export default function MlGpxViewerInstructions(props: { open: boolean }) {
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-
-	return (
-		<>
-			<Instructions steps={getSteps(mediaIsMobile)} open={props.open} />
-		</>
-	);
-}

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

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

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.meta_.json

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

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import MlImageMarkerLayer from './MlImageMarkerLayer';
-
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-
-const storyoptions = {
-	title: 'MapComponents/MlImageMarkerLayer',
-	component: MlImageMarkerLayer,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => (
-	<MlImageMarkerLayer
-		options={{
-			source: {
-				type: 'geojson',
-				data: {
-					type: 'Feature',
-					geometry: {
-						type: 'Point',
-						coordinates: [7.0847929969609424, 50.73855193187643],
-					},
-					properties: { id: 'test' },
-				},
-			},
-			layout: {
-				'icon-allow-overlap': true,
-				'icon-size': 0.14,
-				'icon-offset': [0, -180],
-			},
-		}}
-		imgSrc={'/assets/wg-marker.png'}
-	/>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js

@@ -1,38 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from '../../util';
-import { uuid_regex } from '../../setupTests';
-
-import MlImageMarkerLayer from './MlImageMarkerLayer';
-
-const testComponent = (
-	// eslint-disable-next-line react/react-in-jsx-scope
-	<MlImageMarkerLayer
-		options={{
-			source: {
-				type: 'geojson',
-				data: {
-					type: 'Feature',
-					properties: {
-						id: 'test',
-					},
-					geometry: {
-						type: 'Point',
-						coordinates: [7.0847929969609424, 50.73855193187643],
-					},
-				},
-			},
-		}}
-	/>
-);
-
-layerRemovalTest(
-	'<MlImageMarkerLayer />',
-	testComponent,
-	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-	'MlImageMarkerLayer-{uuid}'
-);
-sourceRemovalTest(
-	'<MlImageMarkerLayer />',
-	testComponent,
-	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-	'MlImageMarkerLayer-{uuid}'
-);

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx

@@ -1,100 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-
-import { v4 as uuidv4 } from 'uuid';
-
-import useLayer from '../../hooks/useLayer';
-import useMap from '../../hooks/useMap';
-import { SymbolLayerSpecification } from 'maplibre-gl';
-import { Feature, FeatureCollection } from '@turf/turf';
-
-export interface MlImageMarkerLayerProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * 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;
-	/**
-	 * Id of the layer that will be added by this component to the maplibre-gl instance
-	 */
-	layerId?: string;
-	/**
-	 * Id of the image that will be added by this component to the maplibre-gl instance
-	 */
-	imageId?: string;
-	/**
-	 * Path or URL to a supported raster image
-	 */
-	imgSrc?: string;
-	/**
-	 * Javascript object that is passed the addLayer command as first parameter.
-	 */
-	options?: {
-		source?: { type?: string | undefined; data: Feature | FeatureCollection | undefined };
-		layout?: SymbolLayerSpecification['layout'];
-		paint?: SymbolLayerSpecification['paint'];
-	};
-}
-
-const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const [imageId, setImageId] = useState<string>();
-	const imageIdRef = useRef(props.imageId || 'img_' + uuidv4());
-	const layerId = useRef(props.layerId || 'MlImageMarkerLayer-' + mapHook.componentId);
-
-	useLayer({
-		geojson: props.options?.source?.data,
-		layerId: layerId.current,
-		options: {
-			type: 'symbol',
-			layout: {
-				...props.options?.layout,
-				'icon-image': imageId || imageIdRef.current,
-			},
-			paint: {
-				...props.options?.paint,
-			},
-		},
-	});
-
-	const createImage = (mapHook: ReturnType<typeof useMap>, props: MlImageMarkerLayerProps) => {
-		if (!mapHook.map) {
-			return;
-		}
-
-		if (props.imgSrc && !mapHook.map.map.hasImage(imageIdRef.current)) {
-			mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
-				if (error) throw error;
-
-				if (!mapHook.map || mapHook.map.map.hasImage(imageIdRef.current)) return;
-
-				mapHook.map.addImage(
-					imageIdRef.current,
-					image as unknown as ImageData,
-					mapHook.componentId
-				);
-
-				setImageId(imageIdRef.current);
-			});
-		}
-	};
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		if (props.imgSrc) {
-			createImage(mapHook, props);
-		}
-	}, [props, mapHook]);
-
-	return <></>;
-};
-
-export default MlImageMarkerLayer;

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

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

package/src/components/MlLayer/MlLayer.meta_.json

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