@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/components/MlNavigationCompass/MlNavigationCompass.tsx

@@ -1,226 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-
-import { ReactComponent as RotateRightIcon } from "./assets/rotate_right.svg";
-import { ReactComponent as RotateLeftIcon } from "./assets/rotate_left.svg";
-import { ReactComponent as NeedleIcon } from "./assets/needle.svg";
-
-import styled from "@emotion/styled";
-import { css } from "@emotion/css";
-import useMap from "../../hooks/useMap";
-
-const NeedleButton = styled.div`
-	width: 40%;
-	display: flex;
-	align-items: center;
-
-	&:hover {
-		cursor: pointer;
-	}
-	path {
-		filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));
-	}
-	&:hover path {
-		filter: drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));
-	}
-	path:nth-of-type(2) {
-		fill: #343434;
-	}
-	&:hover path:nth-of-type(2) {
-		fill: #434343;
-	}
-	path:nth-of-type(1) {
-		fill: #e90318;
-	}
-	&:hover path:nth-of-type(1) {
-		fill: #fb4052;
-	}
-`;
-const NeedleContainer = styled.div`
-	pointer-events: none;
-	display: flex;
-	z-index: 1002;
-	position: absolute;
-	align-items: center;
-
-	margin-left: -30%;
-	path:nth-of-type(2) {
-	}
-	svg g {
-		transform: translate(-76.7053, -29.7727) scale(2, 1);
-	}
-	svg {
-		z-index: 9990;
-		height: 150px;
-		width: 200px;
-	}
-`;
-const RotateButton = styled.div`
-	width: 30%;
-	margin-top: 14px;
-	z-index: 999;
-	display: flex;
-
-	svg:hover {
-		cursor: pointer;
-	}
-	svg:hover path {
-		fill: #ececec;
-		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
-	}
-	path {
-		fill: #bbb;
-	}
-	svg {
-		transform: scale(0.6);
-		z-index: 9990;
-		height: 172px;
-	}
-`;
-
-interface MlNavigationCompassProps {
-	mapId?: string;
-	insertBeforeLayer?: string;
-	style?: any;
-	backgroundStyle?: any;
-	needleStyle?: any;
-	rotateRightStyle?: any;
-	rotateLeftStyle?: any;
-}
-/**
- * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
- *
- * All style props are applied using @emotion/css to allow more complex css selectors.
- *
- * @component
- */
-const MlNavigationCompass = (props: MlNavigationCompassProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-	const [bearing, setBearing] = useState(0);
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		let _updateBearing = () => {
-			if (!mapHook.map?.map?.getBearing) return;
-			setBearing(Math.round(mapHook.map.map.getBearing()));
-		};
-
-		mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
-		_updateBearing();
-
-		return () => {
-			mapHook.map?.map.off("rotate", _updateBearing);
-		};
-	}, [mapHook.map, props.mapId]);
-
-	return (
-		<>
-			<div
-				className={css({
-					zIndex: 1000,
-					top: 0,
-					position: "absolute",
-					...props.style,
-				})}
-			>
-				<div
-					className={css({
-						position: "absolute",
-						border: "10px solid #bcbcbc",
-						backgroundColor: "#717171",
-						background: "radial-gradient(#717171, #414141)",
-						height: "200px",
-						width: "200px",
-						borderRadius: "50%",
-						display: "flex",
-						justifyContent: "center",
-						transform: "scale(0.2) translateX(-448px) translateY(-448px)",
-						...props.backgroundStyle,
-					})}
-				>
-					<RotateButton className={css({ ...props.rotateRightStyle })}>
-						<RotateRightIcon
-							onClick={() => {
-								if(!mapHook.map)return;
-
-								let bearing = Math.round(mapHook.map.map.getBearing());
-								let rest = Math.round(bearing % 90);
-								if (bearing > 0) {
-									rest = 90 - rest;
-								}
-								if (rest === 0) {
-									rest = 90;
-								}
-								mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
-							}}
-						></RotateRightIcon>
-					</RotateButton>
-					<NeedleButton
-						className={css({ ...props.needleStyle })}
-						onClick={() => {
-							mapHook.map?.map.setBearing(0);
-						}}
-					>
-						<NeedleContainer
-							style={{
-								transform: "rotate(" + (bearing>0?"-"+bearing:-1*bearing) + "deg)",
-							}}
-						>
-							<NeedleIcon />
-						</NeedleContainer>
-					</NeedleButton>
-					<RotateButton className={css({ ...props.rotateLeftStyle })}>
-						<RotateLeftIcon
-							onClick={() => {
-								if(!mapHook.map)return;
-
-								let bearing = Math.round(mapHook.map.map.getBearing());
-								let rest = Math.round(bearing % 90);
-								if (bearing < 0) {
-									rest = 90 + rest;
-								}
-								if (rest === 0) {
-									rest = 90;
-								}
-								mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
-							}}
-						></RotateLeftIcon>
-					</RotateButton>
-				</div>
-			</div>
-		</>
-	);
-};
-
-MlNavigationCompass.propTypes = {
-	/**
-	 * Component id prefix
-	 */
-	idPrefix: PropTypes.string,
-	/**
-	 * Style object to adjust css definitions of the component.
-	 */
-	style: PropTypes.object,
-	/**
-	 * Style object to adjust css definitions of the background.
-	 */
-	backgroundStyle: PropTypes.object,
-	/**
-	 * Style object to adjust css definitions of the compass needle.
-	 */
-	needleStyle: PropTypes.object,
-	/**
-	 * Style object to adjust css definitions of the rotate right button.
-	 */
-	rotateRightStyle: PropTypes.object,
-	/**
-	 * Style object to adjust css definitions of the rotate left button.
-	 */
-	rotateLeftStyle: PropTypes.object,
-};
-
-export default MlNavigationCompass;

package/src/components/MlNavigationCompass/assets/needle.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="75.967445mm"
-   height="234.71339mm"
-   viewBox="0 0 75.967445 234.71339"
-   version="1.1"
-   >
-  <g
-     transform="translate(-76.705281,-29.77268)">
-    <path
-       d="m 114.68901,29.77268 37.98372,117.3567 H 76.705281 Z"
-        />
-    <path
-       d="m 114.68901,264.48608 37.98372,-117.3567 H 76.705281 Z"
-        />
-  </g>
-</svg>

package/src/components/MlNavigationCompass/assets/needle__.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="50.751598mm"
-   height="234.71339mm"
-   viewBox="0 0 50.751598 234.71339"
-   version="1.1"
->
-  <g
-     transform="translate(-76.705281,-29.77268)">
-    <path
-       style="fill:#cf003d;stroke-width:0.150078"
-       d="m 102.08108,29.77268 25.3758,117.3567 H 76.705281 Z"
-        />
-    <path
-       style="fill:#727272;fill-opacity:1;stroke-width:0.150078"
-       d="m 102.08108,264.48608 25.3758,-117.3567 H 76.705281 Z"
-        />
-  </g>
-</svg>

package/src/components/MlNavigationCompass/assets/rotate_left.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="39.675098mm"
-   height="104.27064mm"
-   viewBox="0 0 39.675098 104.27064"
-   version="1.1"
-   >
-  <g
-     transform="translate(-86.019554,-58.032633)">
-    <path
-       d="m 94.572523,58.032633 31.122127,8.55245 -14.4756,8.234638 c 5.81924,11.004841 8.69175,22.458582 10.1415,33.839279 1.81552,13.47801 1.57616,27.51604 -5.35471,41.13341 -1.58021,3.10296 -3.61373,6.24356 -6.45284,9.27798 -0.70371,0.75161 -1.49649,1.52256 -2.41535,2.29702 -0.23167,0.19521 -0.49044,0.40378 -0.78083,0.62322 -0.0785,0.0597 -0.16832,0.12632 -0.27027,0.19999 l -0.154,0.11265 -9.148793,-4.00131 0.0894,-0.0584 c 0.007,-0.004 0.02228,-0.0155 0.04857,-0.0346 0.123621,-0.0923 0.259794,-0.20319 0.412895,-0.33073 0.607899,-0.50626 1.181468,-1.07062 1.756997,-1.67742 2.328481,-2.45299 4.049011,-5.15919 5.513881,-7.97419 6.46189,-12.41085 6.55496,-25.67394 4.91598,-38.80952 -1.30807,-9.888781 -3.61235,-19.707408 -7.99176,-29.085561 l -15.510171,8.823235 z" />
-  </g>
-</svg>

package/src/components/MlNavigationCompass/assets/rotate_right.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="39.675098mm"
-   height="104.27064mm"
-   viewBox="0 0 39.675098 104.27064"
-   version="1.1"
-   >
-  <g
-     transform="translate(-86.019554,-58.032633)">
-    <path
-       style="stroke-width:0.744756"
-       d="m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z"
-       transform="scale(0.26458333)" />
-  </g>
-</svg>

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

@@ -1 +0,0 @@
-Standard Navigationstool

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

@@ -1 +0,0 @@
-Default navigation tool.

package/src/components/MlNavigationTools/MlNavigationTools.meta.json

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

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -1,64 +0,0 @@
-import React from "react";
-
-import MlNavigationTools from "./MlNavigationTools";
-
-import noNavToolsDecorator from "../../decorators/NoNavToolsDecorator";
-import BuildIcon from "@mui/icons-material/Build";
-import Button from "@mui/material/Button";
-
-const storyoptions = {
-	title: 'MapComponents/MlNavigationTools',
-	component: MlNavigationTools,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: noNavToolsDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => <MlNavigationTools {...args} />;
-export const DefaultConfig = Template.bind({});
-DefaultConfig.parameters = {};
-DefaultConfig.args = {};
-
-export const No3DButton = Template.bind({});
-No3DButton.parameters = {};
-No3DButton.args = {
-	show3DButton: false,
-};
-
-export const ShowCenterLocationButton = Template.bind({});
-ShowCenterLocationButton.parameters = {};
-ShowCenterLocationButton.args = {
-	showFollowGpsButton: false,
-	showCenterLocationButton: true,
-};
-
-export const AlterToolPosition = Template.bind({});
-AlterToolPosition.parameters = {};
-AlterToolPosition.args = {
-	sx: { top: '10px', right: '5px' },
-};
-
-export const NoZoomButtons = Template.bind({});
-NoZoomButtons.parameters = {};
-NoZoomButtons.args = {
-	showZoomButtons: false,
-};
-
-export const NoFollowGpsButton = Template.bind({});
-NoFollowGpsButton.parameters = {};
-NoFollowGpsButton.args = {
-	showFollowGpsButton: false,
-};
-
-export const CustomButton = Template.bind({});
-CustomButton.parameters = {};
-CustomButton.args = {
-	children: (
-		<Button variant="navtools" onClick={() => {}}>
-			<BuildIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
-		</Button>
-	),
-};

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -1,176 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import ControlPointIcon from "@mui/icons-material/ControlPoint";
-import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
-import Box from "@mui/material/Box";
-import { SxProps } from "@mui/material";
-
-import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
-import MlFollowGps from "../MlFollowGps/MlFollowGps";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import useMap from "../../hooks/useMap";
-import MlCenterPosition from "../MlCenterPosition/MlCenterPosition";
-
-interface MlNavigationToolsProps {
-	/**
-	 * 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;
-	/**
-	 * Show 3D button
-	 */
-	show3DButton?: boolean;
-	/**
-	 * Show zoom button
-	 */
-	showZoomButtons?: boolean;
-	/**
-	 * Show follow GPS button
-	 */
-	showFollowGpsButton?: boolean;
-	/**
-	 * Show center on current position button
-	 */
-	showCenterLocationButton?: boolean;
-	/**
-	 * Additional JSX Elements to be rendered below MlNavigationTools buttons
-	 */
-	children?: JSX.Element;
-	/**
-	 * Style attribute for NavigationTools container
-	 */
-	sx?: SxProps;
-	/**
-	 * Style attribute for NavigationTools container
-	 */
-	mediaIsMobile?: boolean;
-}
-
-/**
- * @component
- */
-
-const MlNavigationTools = (props: MlNavigationToolsProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const [pitch, setPitch] = useState(0);
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		mapHook.map.on(
-			'pitchend',
-			() => {
-				if (!mapHook.map) return;
-
-				setPitch(mapHook.map.map.getPitch());
-			},
-			mapHook.componentId
-		);
-		setPitch(mapHook.map.map.getPitch());
-	}, [mapHook.map, props.mapId]);
-
-	const zoomIn = () => {
-		if (!mapHook.map) return;
-
-		if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
-			mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
-		}
-	};
-
-	const zoomOut = () => {
-		if (!mapHook.map) return;
-
-		if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
-			mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
-		}
-	};
-
-	const adjustPitch = () => {
-		if (!mapHook.map) return;
-
-		let targetPitch = 60;
-		if (mapHook.map.map.getPitch() !== 0) {
-			targetPitch = 0;
-		}
-		mapHook.map.map.easeTo({ pitch: targetPitch });
-	};
-
-	return (
-		<Box
-			sx={{
-				zIndex: 501,
-				position: 'absolute',
-				display: 'flex',
-				flexDirection: 'column',
-				...(mediaIsMobile ? { margin: '20px 10px 20px 10px' } : {}),
-				...props.sx,
-			}}
-		>
-			<MlNavigationCompass
-				style={{
-					width: '31px',
-					position: 'relative',
-					height: mediaIsMobile ? '55px' : '45px',
-					marginLeft: mediaIsMobile ? '3px' : '-5px',
-					transform: mediaIsMobile ? 'scale(1.6)' : 'scale(1)',
-				}}
-				backgroundStyle={{
-					boxShadow: '0px 0px 18px rgba(0,0,0,.5)',
-				}}
-			/>
-			{props.show3DButton && (
-				<Button variant="navtools" onClick={adjustPitch}>
-					{pitch ? '2D' : '3D'}
-				</Button>
-			)}
-			{props.showFollowGpsButton && <MlFollowGps />}
-			{props.showCenterLocationButton && <MlCenterPosition />}
-			<ButtonGroup
-				orientation="vertical"
-				sx={{
-					width: '50px',
-					border: 'none',
-					Button: { minWidth: '20px !important', border: 'none', padding: 0 },
-					'Button:hover': { border: 'none' },
-				}}
-			>
-				{props.showZoomButtons && (
-					<>
-						<Button variant="navtools" onClick={zoomIn}>
-							<ControlPointIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
-						</Button>
-						<Button variant="navtools" onClick={zoomOut}>
-							<RemoveCircleOutlineIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
-						</Button>
-					</>
-				)}
-			</ButtonGroup>
-			{props.children && React.cloneElement(props.children, {})}
-		</Box>
-	);
-};
-
-MlNavigationTools.defaultProps = {
-	mapId: undefined,
-	show3DButton: true,
-	showFollowGpsButton: true,
-	showCenterLocationButton: false,
-	showZoomButtons: true,
-	sx: {
-		right: "5px",
-		bottom: "20px",
-	},
-};
-
-export default MlNavigationTools;

package/src/components/MlOsmLayer/MlOsmLayer.js

@@ -1,71 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-
-import PropTypes from "prop-types";
-import useMap from "../../hooks/useMap";
-
-/**
- * Adds a standard OSM tile layer to the maplibre-gl instancereference by
- * props.mapId
- *
- * @component
- */
-const MlOsmLayer = (props) => {
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-
-	const layerId = useRef(props.layerId || "MlOsmLayer-" + mapHook.componentId);
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		mapHook.map.addSource(
-			layerId.current,
-			{
-				type: "raster",
-				tileSize: 256,
-				...props.sourceOptions,
-			},
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerId.current,
-				type: "raster",
-				source: layerId.current,
-				minzoom: 0,
-				maxzoom: 22,
-				...props.layerOptions,
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-	}, [props, mapHook.map]);
-
-	return <></>;
-};
-
-MlOsmLayer.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapHook
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix: PropTypes.string,
-	/**
-	 * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-	 */
-	sourceOptions: PropTypes.object,
-	/**
-	 * Options object that will be used as first parameter on the MapLibreGl.addLayer call see MapLibre layer options documentation.
-	 *
-	 */
-	layerOptions: PropTypes.object,
-	/**
-	 * 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 MlOsmLayer;

package/src/components/MlOsmLayer/MlOsmLayer.stories_.js

@@ -1,49 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import MlOsmLayer from "./MlOsmLayer";
-import TopToolbar from "../../ui_components/TopToolbar";
-import Button from "@mui/material/Button";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "MapComponents/MlOsmLayer",
-	component: MlOsmLayer,
-	argTypes: {
-		options: {
-			control: {
-				type: "object",
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	const [showLayer, setShowLayer] = useState(true);
-
-	return (
-		<TopToolbar>
-			<Button
-				color="primary"
-				variant={showLayer ? "contained" : "outlined"}
-				onClick={() => setShowLayer(!showLayer)}
-			>
-				OSM
-			</Button>
-			{showLayer && <MlOsmLayer {...props} />}
-		</TopToolbar>
-	);
-};
-
-// <MapLibreMap options={args.options} />
-export const ExampleConfig = Template.bind({});
-ExampleConfig.args = {
-	sourceOptions: {
-		tiles: ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"],
-		attribution:
-			'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
-	},
-	layerOptions: {},
-};

package/src/components/MlOsmLayer/MlOsmLayer.test.js

@@ -1,19 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlOsmLayer from "./MlOsmLayer";
-import { uuid_regex } from "../../setupTests";
-
-const testComponent = <MlOsmLayer />;
-
-layerRemovalTest(
-	"<MlOsmLayer />",
-	testComponent,
-	new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
-	"MlOsmLayer-{uuid}"
-);
-sourceRemovalTest(
-	"<MlOsmLayer />",
-	testComponent,
-	new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
-	"MlOsmLayer-{uuid}"
-);