@mapcomponents/react-maplibre 0.1.68 → 0.1.70

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/css';
-import { Box } from '@mui/system';
-import ImageLoader from '../../../ui_components/ImageLoader';
-import useMapState from '../../../hooks/useMapState';
-
-/**
- * @component
- *
- */
-const LayerBox = (props) => {
-	const { layers } = useMapState({
-		mapId: props.mapId,
-		watch: {
-			viewport: false,
-			layers: true,
-			sources: false,
-		},
-		filter: {
-			matchLayerIds: props.layerId,
-		},
-	});
-	const width = '40px';
-
-	const defaultClass = css`
-		& img:hover {
-		}
-	`;
-
-	return (
-		<>
-			<Box
-				key={props.layerId}
-				className={defaultClass}
-				sx={{
-					width,
-					height: '53px',
-					justifyContent: 'center',
-					py: 0.25,
-					px: '1rem',
-					cursor: 'pointer',
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'stretch',
-				}}
-				onClick={() => {
-					props?.handleLayerBoxClick?.(props.layerId);
-				}}
-			>
-				<ImageLoader
-					sx={{
-						border: '2px solid ' + (layers?.[0]?.visible ? '#64c864' : '#fd720f'),
-						borderRadius: '8px',
-						height: '40px',
-						width: '40px',
-					}}
-					src={props.thumbnail}
-				/>
-
-				<div
-					className="mllayerswitcher-layer-text"
-					style={{
-						textAlign: 'center',
-						color: 'rgb(112, 117, 122)',
-						fontFamily: 'Roboto, Arial',
-						width,
-						fontSize: '0.60rem',
-					}}
-				>
-					{props.label}
-				</div>
-			</Box>
-		</>
-	);
-};
-
-export default LayerBox;

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

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

package/src/components/MlMarker/MlMarker.meta_.json

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

package/src/components/MlMarker/MlMarker.stories.js

@@ -1,22 +0,0 @@
-import React from "react";
-
-import MlMarker from "./MlMarker";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlMarker",
-	component: MlMarker,
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => <MlMarker {...args}/>;
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.args = {
-	content: 'WhereGroup',
-	lng: 7.0851268,
-	lat: 50.73884,
-	mapId: 'map_1',
-};

package/src/components/MlMarker/MlMarker.tsx

@@ -1,140 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import Paper from "@mui/material/Paper";
-import useMapState from "../../hooks/useMapState";
-import useMap from "../../hooks/useMap";
-
-import Point from "@mapbox/point-geometry";
-
-interface MlMarkerProps {
-	/**
-	 * 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;
-	/**
-	 * Longitude of the marker position
-	 */
-	lng: number;
-	/**
-	 * Latitude of the marker position
-	 */
-	lat: number;
-	/**
-	 * Content of the description popup
-	 */
-	content?: string;
-}
-
-/**
- * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
- */
-const MlMarker = (props: MlMarkerProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const mapState = useMapState({
-		mapId: props.mapId,
-		watch: { viewport: true },
-	});
-
-	const iframe = useRef<HTMLIFrameElement>(null);
-
-	const [iframeDimensions, setIframeDimensions] = useState({
-		width: "400px",
-		height: "500px",
-	});
-
-	const [markerPixelPos, setMarkerPixelPos] = useState<Point>();
-
-	useEffect(() => {
-		if (!mapHook.map?.map?.project) return;
-
-		const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-
-		setMarkerPixelPos(_pixelPos);
-	}, [mapHook.map, props.lng, props.lat, mapState.viewport]);
-
-	useEffect(() => {
-		if (
-			!mapHook.map ||
-			!iframe.current?.contentWindow?.document?.body?.scrollHeight
-		)
-			return;
-
-		let mapHeight = mapHook.map.map._container.clientHeight;
-
-		const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-		let pixelToBottom = mapHeight - _pixelPos.y;
-		let iframeHeight =
-			iframe.current?.contentWindow?.document?.body?.scrollHeight;
-		let iframeWidth =
-			iframe.current?.contentWindow?.document?.body?.scrollWidth;
-
-		setIframeDimensions({
-			width: iframeWidth + "px",
-			height:
-				(pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
-		});
-	}, [props.lng, props.lat, props.content]);
-
-	return (
-		<>
-			<MlGeoJsonLayer
-				geojson={{
-					type: "Feature",
-					geometry: {
-						type: "Point",
-						coordinates: [props.lng, props.lat],
-					},
-					properties: {},
-				}}
-				paint={{
-					"circle-radius": 14,
-					"circle-color": "rgba(40,200,20,0.5)",
-				}}
-				type="circle"
-				mapId={props.mapId}
-			></MlGeoJsonLayer>
-			{markerPixelPos && (
-				<Paper
-					sx={{
-						opacity: 0.7,
-						position: "fixed",
-						display: "flex",
-						/** TODO: fix positioning delay when moving the map */
-						left: markerPixelPos.x,
-						top: markerPixelPos.y,
-						width: iframeDimensions.width,
-						height: iframeDimensions.height,
-						"&:hover": {
-							opacity: 1,
-						},
-						zIndex: -1,
-					}}
-				>
-					<iframe
-						style={{ width: "100%" }}
-						srcDoc={props.content}
-						ref={iframe}
-						sandbox="allow-same-origin allow-popups-to-escape-sandbox"
-						frameBorder="0"
-						title={mapHook.componentId}
-					></iframe>
-				</Paper>
-			)}
-		</>
-	);
-};
-
-MlMarker.defaultProps = {
-	mapId: undefined,
-};
-
-export default MlMarker;

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

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

package/src/components/MlMeasureTool/MlMeasureTool.meta.json

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

package/src/components/MlMeasureTool/MlMeasureTool.stories.js

@@ -1,96 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import MlMeasureTool from "./MlMeasureTool";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
-import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import { MenuItem, Select } from "@mui/material";
-
-const storyoptions = {
-	title: "MapComponents/MlMeasureTool",
-	component: MlMeasureTool,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => {
-	const [unit, setUnit] = useState("kilometers");
-	const handleChange = (event) => {
-		setUnit(event.target.value);
-	};
-
-	return (
-		<div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
-			<Select
-				name={"units"}
-				onChange={handleChange}
-				label={"Unit for measurement"}
-				defaultValue={"kilometers"}
-			>
-				<MenuItem value={"kilometers"}>Kilometers</MenuItem>
-				<MenuItem value={"miles"}>Miles</MenuItem>
-			</Select>
-			<Grid
-				container
-				style={{
-					textAlign: "left",
-					alignItems: "center",
-				}}
-			>
-				<SquareFootOutlinedIcon />
-				<h4 style={{ margin: "0px" }}>Measure Polygon</h4>
-			</Grid>
-
-			<Box m={2} style={{ textAlign: "left" }}>
-				Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
-			</Box>
-		</div>
-	);
-};
-
-const LineTemplate = (args) => {
-	const [unit, setUnit] = useState("kilometers");
-	const handleChange = (event) => {
-		setUnit(event.target.value);
-	};
-
-	return (
-		<div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
-			<Select
-				name={"units"}
-				onChange={handleChange}
-				label={"Unit for measurement"}
-				defaultValue={"kilometers"}
-			>
-				<MenuItem value={"kilometers"}> Kilometers</MenuItem>
-				<MenuItem value={"miles"}> Miles</MenuItem>
-			</Select>
-			<Grid
-				container
-				style={{
-					textAlign: "left",
-					alignItems: "center",
-				}}
-			>
-				<StraightenOutlinedIcon />
-				<h4 style={{ margin: "0px" }}>Measure Line</h4>
-			</Grid>
-
-			<Box m={2} style={{ textAlign: "left" }}>
-				Length: <MlMeasureTool measureType={"line"} unit={unit} />
-			</Box>
-		</div>
-	);
-};
-
-export const MeasureLine = LineTemplate.bind({});
-MeasureLine.parameters = {};
-MeasureLine.args = {};
-
-export const MeasurePolygon = Template.bind({});
-MeasurePolygon.parameters = {};
-MeasurePolygon.args = {};

package/src/components/MlMeasureTool/MlMeasureTool.tsx

@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from "react";
-import MlFeatureEditor from "../MlFeatureEditor/MlFeatureEditor";
-import * as turf from "@turf/turf";
-
-interface MlMeasureToolProps {
-	/**
-	 * String that specify if the Tool measures an area ("polygon") or length ("line")
-	 */
-	measureType?: string;
-	/**
-	 * String that dictates which unit of measurement is used
-	 */
-	unit?: turf.Units;
-}
-
-//const unitSquareConvert = {
-//	kilometers: 1,
-//	miles: 1 / 2.58998811,
-//};
-function getUnitSquareMultiplier(measureType:string | undefined) {
-	return measureType === "miles" ? 1 / 2.58998811 : 1;
-}
-function getUnitLabel(measureType:string | undefined) {
-	return measureType === "miles" ? 'mi' : 'km';
-}
-
-const MlMeasureTool = (props: MlMeasureToolProps) => {
-	const [length, setLength] = useState(0);
-	const [currentFeatures, setCurrentFeatures] = useState([undefined]);
-
-	useEffect(() => {
-		if (currentFeatures[0]) {
-			setLength(
-				props.measureType === "polygon"
-					? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
-					: turf.length(currentFeatures[0], { units: props.unit })
-			);
-		}
-	}, [props.unit, currentFeatures]);
-
-	return (
-		<>
-			<MlFeatureEditor
-				onChange={(features:any) => {
-					setCurrentFeatures(features);
-				}}
-				mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
-			/>
-			{length.toFixed(2)} {getUnitLabel(props.unit)}
-			{props.measureType === "polygon" ? "²" : ""}
-		</>
-	);
-};
-
-MlMeasureTool.defaultProps = {
-	mapId: undefined,
-	measureType: "line",
-	unit: "kilometers",
-};
-export default MlMeasureTool;

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

@@ -1 +0,0 @@
-Tool zum Kippen, Drehen und Ausrichten der Karte

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

@@ -1 +0,0 @@
-Tool to tilt, rotate and align the map.

package/src/components/MlNavigationCompass/MlNavigationCompass.meta.json

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

package/src/components/MlNavigationCompass/MlNavigationCompass.stories.js

@@ -1,63 +0,0 @@
-import React from "react";
-
-import MlNavigationCompass from "./MlNavigationCompass";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlNavigationCompass",
-	component: MlNavigationCompass,
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => <MlNavigationCompass {...props} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-	style: {
-		transform: "scale(4)",
-		left: "50%",
-		marginLeft: "-100px",
-		top: "50%",
-		marginTop: "-100px",
-	},
-};
-export const StyleExample = Template.bind({});
-StyleExample.args = {
-	style: {
-		transform: "scale(4)",
-		left: "50%",
-		marginLeft: "-100px",
-		top: "50%",
-		marginTop: "-100px",
-	},
-	backgroundStyle: {
-		border: "12px solid #adad44",
-		background: "radial-gradient(#417741, #111)",
-	},
-	needleStyle: {
-		":hover svg path:nth-of-type(1)": {
-			fill: "#eded66",
-		},
-		":hover svg path:nth-of-type(2)": {
-			fill: "#252f1b",
-		},
-		"svg path:nth-of-type(1)": {
-			fill: "#adad44",
-		},
-		"svg path:nth-of-type(2)": {
-			fill: "#1a1d15",
-		},
-	},
-	rotateRightStyle: {
-		"svg:hover path": {
-			fill: "#ededb1",
-		},
-	},
-	rotateLeftStyle: {
-		"svg:hover path": {
-			fill: "#ededb1",
-		},
-	},
-};

package/src/components/MlNavigationCompass/MlNavigationCompass.test.js

@@ -1,68 +0,0 @@
-import React, { useContext, useState } from "react";
-import { mount, configure } from "enzyme";
-import { waitFor } from "@testing-library/react";
-import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
-import MlNavigationCompass from "./MlNavigationCompass";
-import MapLibreMap from "./../MapLibreMap/MapLibreMap";
-import maplibregl from "maplibre-gl/dist/maplibre-gl";
-import { mockMapLibreMethods } from "../../setupTests";
-
-jest.mock("@mapbox/mapbox-gl-draw", () => {
-	return function () {
-		return {
-			set: jest.fn(),
-		};
-	};
-});
-const mapLibreInstance = new maplibregl.Map();
-
-const MlNavigationCompassTestComponent = (props) => {
-	const [componentVisible, setComponentVisible] = useState(true);
-
-	return (
-		<>
-			<MapLibreMap />
-
-			{componentVisible && <MlNavigationCompass {...props} />}
-
-			<button
-				className="toggle_layer_visible"
-				onClick={() => {
-					setComponentVisible(!componentVisible);
-				}}
-			>
-				toggle component
-			</button>
-		</>
-	);
-};
-
-let testAttributes = {};
-
-describe("<MlNavigationCompass>", () => {
-	it("should register 1 event listener to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlNavigationCompassTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
-	});
-
-	it("should deregister 1 event listener to the maplibre instance", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlNavigationCompassTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
-
-		wrapper.find(".toggle_layer_visible").simulate("click");
-
-		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
-	});
-});