@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlLayerMagnify/MlLayerMagnify.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-
-import MlLayerMagnify from "./MlLayerMagnify";
-import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
-
-import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlLayerMagnify",
-	component: MlLayerMagnify,
-	argTypes: {
-	},
-	decorators: multiMapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<>
-		<MlWmsLayer
-			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-			urlParameters={{
-				layers: "nw_uraufnahme_rw",
-			}}
-			sourceOptions={{
-				minzoom: 13,
-				maxzoom: 20,
-			}}
-			mapId={args.wmsLayerMapId}
-		/>
-		<MlLayerMagnify map1Id="map_1" map2Id="map_2" magnifierRadius={args.magnifierRadius} />
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {
-
-};
-ExampleConfig.args = {
-	wmsLayerMapId: "map_2",
-	magnifierRadius: 200,
-};

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js

@@ -1,224 +0,0 @@
-import React, { useCallback, useRef, useContext, useEffect } from "react";
-import MapContext from "../../contexts/MapContext";
-import GeoJsonContext from "../MlGPXViewer/util/GeoJsonContext";
-import { polygon, lineString } from "@turf/helpers";
-import { distance, lineOffset } from "@turf/turf";
-import { v4 as uuidv4 } from "uuid";
-import PropTypes from "prop-types";
-
-/**
- * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
- *
- * @component
- */
-const MlSpatialElevationProfile = (props) => {
-	const mapContext = useContext(MapContext);
-
-	const componentId = useRef(
-		(props.idPrefix ? props.idPrefix : "MlSpatialElevationProfile-") + uuidv4()
-	);
-	const mapRef = useRef(null);
-	const initializedRef = useRef(false);
-
-	const dataSource = useContext(GeoJsonContext);
-	const sourceName = useRef("elevationprofile-" + uuidv4());
-	const layerName = useRef("elevationprofile-layer-" + uuidv4());
-
-	const createStep = useCallback(
-		(x, y, z, x2, y2) => {
-			//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 * props.elevationFactor }
-			);
-		},
-		[props.elevationFactor]
-	);
-
-	useEffect(() => {
-		let _componentId = componentId.current;
-		return () => {
-			// This is the cleanup function, it is called when this react component is removed from react-dom
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-
-				mapRef.current = null;
-			}
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-
-		mapRef.current.addSource(
-			sourceName.current,
-			{
-				type: "geojson",
-				data: dataSource.data,
-			},
-			componentId.current
-		);
-		mapRef.current.addLayer(
-			{
-				id: layerName.current,
-				source: sourceName.current,
-				type: "fill-extrusion",
-				paint: {
-					"fill-extrusion-height": ["get", "height"],
-					"fill-extrusion-opacity": 0.9,
-					"fill-extrusion-color": [
-						"interpolate",
-						["linear"],
-						["get", "height"],
-						0,
-						"rgba(0, 0, 255, 0)",
-						0.1,
-						"royalblue",
-						0.3,
-						"cyan",
-						0.5,
-						"lime",
-						0.7,
-						"yellow",
-						1,
-						"yellow",
-					],
-				},
-			},
-			props.insertBeforeLayer,
-			componentId.current
-		);
-	}, [mapContext.mapIds, props.insertBeforeLayer, props.mapId, dataSource, mapContext]);
-
-	useEffect(() => {
-		if (!mapRef.current || !mapRef.current.getLayer(layerName.current)) return;
-		const { data } = dataSource;
-		if (!data || !data.features) return;
-
-		const line = data.features.find((element) => {
-			return element.geometry.type === "LineString";
-		});
-		if (!line || !line.geometry) return;
-		const heights = line.geometry.coordinates.map((coordinate, index) => {
-			return coordinate[2];
-		});
-
-		const min = Math.min(...heights);
-
-		let max = Math.max(...heights) - min;
-
-		max = max === 0 ? 1 : max;
-
-		mapRef.current.setPaintProperty(layerName.current, "fill-extrusion-color", [
-			"interpolate",
-			["linear"],
-			["get", "height"],
-			0,
-			"rgb(0,255,55)",
-			max * props.elevationFactor,
-			"rgb(255,0,0)",
-		]);
-		const lerp = (x, y, a) => x * (1 - a) + y * a;
-		const points = [];
-
-		line.geometry.coordinates.forEach((coordinate, index) => {
-			//const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
-			//points.push(point);
-			if (line.geometry.coordinates[index + 1]) {
-				const wayLength = distance(
-					[coordinate[0], coordinate[1]],
-					[line.geometry.coordinates[index + 1][0], 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(
-						line.geometry.coordinates[index][0],
-						line.geometry.coordinates[index + 1][0],
-						i / listLength
-					);
-					const y = lerp(
-						line.geometry.coordinates[index][1],
-						line.geometry.coordinates[index + 1][1],
-						i / listLength
-					);
-					const z = lerp(
-						line.geometry.coordinates[index][2] - min,
-						line.geometry.coordinates[index + 1][2] - min,
-						i / listLength
-					);
-
-					const x2 = lerp(
-						line.geometry.coordinates[index][0],
-						line.geometry.coordinates[index + 1][0],
-						(i + 1) / listLength
-					);
-					const y2 = lerp(
-						line.geometry.coordinates[index][1],
-						line.geometry.coordinates[index + 1][1],
-						(i + 1) / listLength
-					);
-
-					const point = createStep(x, y, z, x2, y2);
-					points.push(point);
-				}
-			}
-		});
-
-		const newData = dataSource.getEmptyFeatureCollection();
-		newData.features = points;
-
-		mapRef.current.getSource(sourceName.current)?.setData(newData);
-	}, [dataSource.data, createStep, dataSource, props.elevationFactor, mapContext]);
-
-	return <></>;
-};
-
-MlSpatialElevationProfile.defaultProps = {
-	elevationFactor: 1,
-};
-
-MlSpatialElevationProfile.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix: PropTypes.string,
-	/**
-	 * Number describes the factor of the height of the elevation
-	 */
-	elevationFactor: PropTypes.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: PropTypes.string,
-};
-
-export default MlSpatialElevationProfile;

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js

@@ -1,57 +0,0 @@
-import React from "react";
-
-import MlSpatialElevationProfile from "./MlSpatialElevationProfile";
-import MlGPXViewer from "../MlGPXViewer/MlGPXViewer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import GeoJsonProvider from "../MlGPXViewer/util/GeoJsonProvider";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import IconButton from "@mui/material/IconButton";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-const storyoptions = {
-	title: "MapComponents/MlSpatialElevationProfile",
-	component: MlSpatialElevationProfile,
-	argTypes: {
-		options: {
-			control: {
-				type: "object",
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => {
-
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-
-	return(
-	<>
-		<IconButton
-			style={{
-				position: "absolute",
-				right: "5px",
-				bottom: mediaIsMobile ? "145px" : "125px",
-				backgroundColor: "rgba(255,255,255,1)",
-
-				zIndex: 1000,
-			}}
-			title="Download sample-data"
-			size="large"
-			href="assets/sample.gpx"
-			target="blank"
-		>
-			<FileDownloadIcon />
-		</IconButton>
-		<GeoJsonProvider>
-			<MlGPXViewer />
-			<MlSpatialElevationProfile />
-		</GeoJsonProvider>
-	</>
-);
-}
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlWmsLoader/MlWmsLoader.stories.js

@@ -1,47 +0,0 @@
-import React, { useState } from "react";
-
-import MlWmsLoader from "./MlWmsLoader";
-
-import TextField from "@mui/material/TextField";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import Sidebar from "../../ui_components/Sidebar";
-
-const storyoptions = {
-	title: "MapComponents/MlWmsLoader",
-	component: MlWmsLoader,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	const [url, setUrl] = useState(props.url);
-
-	return (
-		<>
-			<Sidebar sx={{ wordBreak: "break-word" }}>
-				<TextField
-					label="WMS Url"
-					variant="standard"
-					value={url}
-					onChange={(ev) => setUrl(ev.target.value)}
-				/>
-				<MlWmsLoader {...props} url={url} />
-			</Sidebar>
-		</>
-	);
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	/**
-	 * try https://maps.heigit.org/histosm/wms or https://magosm.magellium.com/geoserver/wms
-	 * https://www.wms.nrw.de/wms/kitas
-	 * https://www.wms.nrw.de/geobasis/wms_nw_vdop
-	 */
-	url: "https://www.wms.nrw.de/geobasis/wms_nw_vdop",
-};

package/src/decorators/ThemeWrapper.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "@mui/styles";
-import { createTheme } from "@mui/material";
-
-const theme = createTheme({});
-
-export default function ThemeWrapper(props) {
-	return <ThemeProvider theme={theme}>{props?.children}</ThemeProvider>;
-}

package/src/ui_components/Legend.js

@@ -1,44 +0,0 @@
-import React from "react";
-import makeStyles from '@mui/styles/makeStyles';
-import Drawer from "@mui/material/Drawer";
-
-const useStyles = makeStyles(() => ({
-	drawer: {
-		boxShadow: "0px 2px 3px 2px rgb(0,0,0, .4)",
-		flexGrow: 1,
-		zIndex: 110,
-		position: "absolute",
-		top: "100px",
-		left: 0,
-		height: "275px",
-		backgroundColor: "#aecaec",
-	},
-	drawerPaper: {
-		position: "static",
-		display: "flex",
-		alignItems: "stretch",
-		alignContent: "stretch",
-		flexDirection: "column",
-		padding: "10px 10px 10px 10px",
-		boxSizing: "border-box",
-		minWidth: "170px",
-	},
-}));
-
-export default function Legend(props) {
-	const classes = useStyles();
-
-	return (
-		<Drawer
-			className={classes.drawer}
-			variant="persistent"
-			anchor={"left"}
-			open={true}
-			classes={{
-				paper: classes.drawerPaper,
-			}}
-		>
-			{props.children}
-		</Drawer>
-	);
-}

package/src/ui_components/LoadingOverlay.js

@@ -1,41 +0,0 @@
-import React, { useContext } from "react";
-
-import { LoadingOverlayContext } from "../ui_components/LoadingOverlayContext";
-
-import FadeLoader from "react-spinners/FadeLoader";
-import "./LoadingOverlay.css";
-
-function LoadingOverlay() {
-	const loadingOverlayContext = useContext(LoadingOverlayContext);
-	let { fadeoutAnimation, visible } = loadingOverlayContext;
-
-	return (
-		<div
-			className={
-				fadeoutAnimation ? "loadingOverlay-fadeout" : "loadingOverlay-fadein"
-			}
-			style={{
-				position: "fixed",
-				top: 0,
-				left: 0,
-				bottom: 0,
-				right: 0,
-				backgroundColor: "#000",
-				zIndex: 1000000,
-				overflow: "hidden",
-				display: visible ? "flex" : "none",
-				alignItems: "center",
-				justifyContent: "center",
-			}}
-		>
-			<FadeLoader
-				color={"#ababab"}
-				loading={visible}
-				css={{ display: "block", borderColor: "red" }}
-				size={50}
-			/>
-		</div>
-	);
-}
-
-export default LoadingOverlay;

package/src/ui_components/Sidebar.js

@@ -1,100 +0,0 @@
-import React, {useState} from "react";
-import { styled } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import Drawer from "@mui/material/Drawer";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import MenuIcon from '@mui/icons-material/Menu';
-import { IconButton } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-const useStyles = makeStyles((theme) => ({
-	drawer: {
-		flexGrow: 1,
-		zIndex: 105,
-		position: "absolute",
-		top: 0,
-		left: 0,
-		bottom: 0,
-		backgroundColor: "#fafafa",
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "stretch",
-		alignContent: "stretch",
-	},
-	drawerPaper: {
-		position: "initial !important",
-		boxSizing: "border-box",
-		padding: "40px",
-		visibility: "visible !important",
-		zIndex: "initial !important",
-	},
-	drawerHeader: {
-		alignContent: "flex-start",
-		display: "flex",
-	},
-	drawerContent: {},
-}));
-
-const DrawerHeader = styled("div")(({ theme }) => ({
-	display: "flex",
-	alignItems: "center",
-}));
-
-export default function Sidebar(props) {
-	const classes = useStyles();
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-
-	const [drawerOpen, setDrawerOpen] = useState(true);
-
-	const handleDrawerOpen = () => {
-		setDrawerOpen(true);
-	};
-	const handleDrawerClose = () => {
-		setDrawerOpen(false);
-	};
-
-	return (
-		<>
-			<IconButton
-				onClick={handleDrawerOpen}
-				style={{
-					zIndex: 101,
-					position: "relative",
-					padding: "20px",
-				}}
-			>
-				<MenuIcon />
-			</IconButton>
-			<Drawer
-				transitionDuration={0}
-				className={classes.drawer}
-				variant="persistent"
-				anchor="left"
-				open={drawerOpen}
-				classes={{
-					paper: classes.drawerPaper,
-				}}
-				sx={{
-					...props.sx,
-					...{
-						maxWidth: mediaIsMobile ? "90vw" : "20vw",
-					},
-					...(drawerOpen ? {} : { left: mediaIsMobile ? "-90vw" : "-20vw" }),
-				}}
-			>
-				<DrawerHeader className={classes.drawerHeader}>
-					<IconButton onClick={handleDrawerClose}>
-						<ChevronLeftIcon
-							style={
-								{
-									//paddingBottom: "40px",
-								}
-							}
-						/>
-					</IconButton>
-				</DrawerHeader>
-				<div style={{ maxWidth: "100%" }}>{props.children}</div>
-			</Drawer>
-		</>
-	);
-}

package/src/ui_components/Tooltip.js

@@ -1,21 +0,0 @@
-import React from "react";
-import { useTheme } from "@mui/material/styles";
-import makeStyles from '@mui/styles/makeStyles';
-import Drawer from "@mui/material/Drawer";
-import Divider from "@mui/material/Divider";
-
-const useStyles = makeStyles((theme) => ({
-	tooltip: {
-		position: "fixed",
-		top: "100px",
-		left: "100px",
-		zIndex: 100000,
-	},
-}));
-
-export default function Legend(props) {
-	const classes = useStyles();
-	const theme = useTheme();
-
-	return <div className={classes.tooltip}>tooltip</div>;
-}

package/src/ui_components/TopToolbar.js

@@ -1,29 +0,0 @@
-import React from "react";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-
-export default function TopToolbar(props) {
-	return (
-		<div
-			style={{
-				flexGrow: 1,
-				zIndex: 120,
-				position: "absolute",
-				top: 0,
-				left: 0,
-				right: 0,
-			}}
-		>
-			<AppBar
-				sx={{
-					minHeight: "62px",
-					backgroundColor: "#f1f1f1",
-				}}
-				color="primary"
-				position="static"
-			>
-				<Toolbar>{props.children}</Toolbar>
-			</AppBar>
-		</div>
-	);
-}