@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/components/MlFollowGps/MlFollowGps.test.js

@@ -1,63 +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 MlFollowGps from "./MlFollowGps";
-import MapLibreMap from "./../MapLibreMap/MapLibreMap";
-
-const mockGeolocation = {
-	watchPosition: jest.fn(() => 1),
-	clearWatch: jest.fn(),
-};
-
-global.navigator.geolocation = mockGeolocation;
-
-const MlFollowGPSTestComponent = (props) => {
-	const [componentVisible, setComponentVisible] = useState(true);
-
-	return (
-		<>
-			<MapLibreMap />
-
-			{componentVisible && <MlFollowGps {...props} />}
-
-			<button
-				className="toggle_layer_visible"
-				onClick={() => {
-					setComponentVisible(!componentVisible);
-				}}
-			>
-				toggle component
-			</button>
-		</>
-	);
-};
-
-let testAttributes = {};
-
-describe("<MlFollowGps>", () => {
-	it("should call navigator.geolocation.watchPosition once", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFollowGPSTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find("MlFollowGps button").simulate("click");
-		await waitFor(() => expect(mockGeolocation.watchPosition).toHaveBeenCalledTimes(1));
-	});
-
-	it("should call navigator.geolocation.clearWatch once, after MlFollowGPSButton has been pressed twice", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MlFollowGPSTestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find("MlFollowGps button").simulate("click");
-		wrapper.find("MlFollowGps button").simulate("click");
-		//wrapper.find(".toggle_layer_visible").simulate("click");
-
-		await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(1));
-	});
-});

package/src/components/MlFollowGps/MlFollowGps.tsx

@@ -1,241 +0,0 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import useMap from "../../hooks/useMap";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-
-import { Button } from '@mui/material';
-import GpsFixedIcon from '@mui/icons-material/GpsFixed';
-
-import { point, circle, lineArc, Feature, Point } from '@turf/turf';
-import { CircleLayerSpecification, FillLayerSpecification } from 'maplibre-gl';
-
-interface MlFollowGpsProps {
-	/**
-	 * 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;
-	/**
-	 * By default a dot will be shown on the map at the user's location. Set to false to disable.
-	 */
-	showUserLocation?: boolean;
-	/**
-	 * By default a cone will be shown on the map at the user's location to indicate the device's orientation.
-	 * Set to false to disable.
-	 */
-	showOrientation?: boolean;
-	/**
-	 * By default, if showUserLocation is true, a transparent circle will be drawn around the user location
-	 * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable.
-	 */
-	showAccuracyCircle?: boolean;
-	/**
-	 * Use the MapLibre.flyTo function to center the map to the current users position if true.
-	 * Otherwise the MapLibre.setCenter function is used.
-	 */
-	useFlyTo?: boolean;
-	/**
-	 * Center map to current position once updated location data is recieved.
-	 * "false" will center the map once on component activation and then display the updated user location on the map.
-	 */
-	centerUserPosition?: boolean;
-	/**
-	 * Orientation cone paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the orientation cone polygon.
-	 * Use any available paint prop from layer type "fill".
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	orientationConePaint?: FillLayerSpecification['paint'];
-	/**
-	 * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
-	 * Use any available paint prop from layer type "circle".
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 */
-	circlePaint?: CircleLayerSpecification['paint'];
-	/**
-	 * Active button font color
-	 */
-	onColor?: string;
-	/**
-	 * Inactive button font color
-	 */
-	offColor?: string;
-	/**
-	 * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy polygon.
-	 * Use any available paint prop from layer type "fill".
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 */
-	accuracyPaint?: FillLayerSpecification['paint'];
-}
-
-/**
- * Adds a button that makes the map follow the users GPS position using
- * navigator.geolocation.watchPosition if activated
- *
- */
-const MlFollowGps = (props: MlFollowGpsProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const [isFollowed, setIsFollowed] = useState(false);
-	const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
-	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-	const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
-	const [deviceOrientation, setDeviceOrientation] = useState(0);
-	const initiallyCentered = useRef(false);
-
-	const getLocationSuccess = useCallback(
-		(pos: GeolocationPosition) => {
-			if (!mapHook.map) return;
-
-			if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
-				if (props.useFlyTo) {
-					mapHook.map.map.flyTo({
-						center: [pos.coords.longitude, pos.coords.latitude],
-						zoom: 18,
-						speed: 1,
-						curve: 1,
-					});
-				} else {
-					mapHook.map.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
-				}
-
-				initiallyCentered.current = true;
-			}
-			if (!props.showUserLocation) return;
-			const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
-			setUserLocationGeoJson(geoJsonPoint);
-			setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
-		},
-		[mapHook.map, props]
-	);
-
-	const getLocationError = () => {
-		console.log('Access of user location denied');
-		setLocationAccessDenied(true);
-	};
-
-	const orientationCone = useMemo(() => {
-		if (!userLocationGeoJson) {
-			return undefined;
-		}
-		const radius = 0.02;
-		const bearing1 = deviceOrientation - 15;
-		const bearing2 = deviceOrientation + 15;
-		const options = { steps: 65 };
-		const arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
-		const copy = arc;
-		copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
-		copy.geometry.coordinates.slice(0, 0);
-		return copy;
-	}, [deviceOrientation, userLocationGeoJson]);
-
-	const handleOrientation = (event: DeviceOrientationEvent) => {
-		if (event?.alpha) {
-			setDeviceOrientation(-event.alpha);
-		}
-	};
-
-	useEffect(() => {
-		if (isFollowed) {
-			const _handleOrientation = handleOrientation;
-			window.addEventListener('deviceorientation', _handleOrientation);
-			return () => {
-				window.removeEventListener('deviceorientation', _handleOrientation);
-			};
-		} else {
-			initiallyCentered.current = false;
-		}
-		return;
-	}, [isFollowed]);
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		if (isFollowed) {
-			const _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
-
-			return () => {
-				navigator.geolocation.clearWatch(_watchId);
-			};
-		}
-		return;
-	}, [mapHook.map, isFollowed, getLocationSuccess]);
-
-	return (
-		<>
-			{isFollowed && userLocationGeoJson && (
-				<MlGeoJsonLayer
-					geojson={accuracyGeoJson}
-					type={'fill'}
-					paint={{
-						'fill-color': '#cbd300',
-						'fill-opacity': 0.3,
-						...props.accuracyPaint,
-					}}
-					insertBeforeLayer={props.insertBeforeLayer}
-				/>
-			)}
-
-			{isFollowed && orientationCone && (
-				<MlGeoJsonLayer
-					geojson={orientationCone}
-					type={'fill'}
-					paint={{
-						'fill-color': '#0000ff',
-						'fill-antialias': false,
-						'fill-opacity': 0.3,
-						...props.orientationConePaint,
-					}}
-					insertBeforeLayer={props.insertBeforeLayer}
-				/>
-			)}
-
-			{isFollowed && userLocationGeoJson && (
-				<MlGeoJsonLayer
-					geojson={userLocationGeoJson}
-					type={'circle'}
-					paint={{
-						'circle-color': '#009ee0',
-						'circle-radius': 5,
-						'circle-stroke-color': '#fafaff',
-						'circle-stroke-width': 1,
-						...props.circlePaint,
-					}}
-					insertBeforeLayer={props.insertBeforeLayer}
-				/>
-			)}
-
-			<Button
-				variant="navtools"
-				sx={{
-					zIndex: 1002,
-					color: isFollowed ? props.onColor : props.offColor,
-				}}
-				disabled={locationAccessDenied}
-				onClick={() => {
-					setIsFollowed(!isFollowed);
-				}}
-			>
-				<GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
-			</Button>
-		</>
-	);
-};
-
-MlFollowGps.defaultProps = {
-	mapId: undefined,
-	onColor: '#ececec',
-	offColor: '#666',
-	showAccuracyCircle: true,
-	showUserLocation: true,
-	showOrientation: true,
-	centerUserPosition: true,
-	useFlyTo: false,
-};
-
-export default MlFollowGps;

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

@@ -1 +0,0 @@
-Stellt GeoJSON Objekte dar

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

@@ -1 +0,0 @@
-Presents GeoJSON objects.

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

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

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.tsx

@@ -1,191 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import MlGeoJsonLayer from './MlGeoJsonLayer';
-import useMap from '../../hooks/useMap';
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-import PolygonStyler from './story_utils/MlGeoJsonLayer.polygonStyler';
-import LineStyler from './story_utils/MlGeoJsonLayer.lineStyler';
-import HeatMapStyler from './story_utils/MlGeojsonLayerHeatMapStyler';
-import sample_geojson_1 from './assets/sample_1.json';
-import sample_geojson_2 from './assets/sample_2.json';
-import earthquakes from './assets/earthquake.json';
-import wg_locations from './assets/wg_locations.json';
-import { GeoJSONObject } from '@turf/turf';
-import { MlGeoJsonLayerProps } from './MlGeoJsonLayer';
-import CircleMapStyler from './story_utils/MlGeojsonLayerCircleStyler';
-
-const storyoptions = {
-	title: 'MapComponents/MlGeoJsonLayer',
-	component: MlGeoJsonLayer,
-
-	argTypes: {},
-
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-interface TemplateProps {
-	geojson: GeoJSONObject;
-	mapId: string;
-	type: string;
-}
-
-const Template = (props: TemplateProps) => {
-	const mapHook = useMap({
-		mapId: undefined,
-	});
-
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapHook.map.map.flyTo({ center: [7.100175528281227, 50.73487992742369], zoom: 15 });
-	}, [mapHook.map]);
-
-	return (
-		<>
-			<LineStyler {...props} />
-		</>
-	);
-};
-const PolygonTemplate = (props: TemplateProps) => {
-	const mapHook = useMap({
-		mapId: undefined,
-	});
-
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapHook.map.map.flyTo({ center: [7.100175528281227, 50.73487992742369], zoom: 15 });
-	}, [mapHook.map]);
-
-	return (
-		<>
-			<PolygonStyler {...props} />
-		</>
-	);
-};
-
-const HeatmapTemplate = (props: MlGeoJsonLayerProps) => {
-	const mapHook = useMap({
-		mapId: undefined,
-	});
-
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapHook.map.map.flyTo({ center: [-150.4048, 63.1224], zoom: 3 });
-	}, [mapHook.map]);
-
-	return <HeatMapStyler {...props} />;
-};
-const CircleTemplate = (props: MlGeoJsonLayerProps) => {
-	const mapHook = useMap({
-		mapId: undefined,
-	});
-
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapHook.map.map.flyTo({ center: [10.251805123900311, 51.11826171422632], zoom: 5 });
-	}, [mapHook.map]);
-
-	return <CircleMapStyler {...props} />;
-};
-
-export const Linestring = Template.bind({});
-Linestring.parameters = {};
-Linestring.args = {
-	geojson: sample_geojson_2,
-	mapId: 'Map_1',
-	/*paint:{
-		"stroke-color": 'rgba(123,20,80)',
-		"fill-opacity": 0
-	},*/
-	type: 'line',
-};
-
-export const Polygon = PolygonTemplate.bind({});
-
-Polygon.args = {
-	geojson: sample_geojson_1,
-};
-
-export const DefaultPaintOverrides = Template.bind({});
-DefaultPaintOverrides.parameters = {};
-DefaultPaintOverrides.args = {
-	defaultPaintOverrides: {
-		fill: {
-			'fill-color': 'blue',
-		},
-		circle: {
-			'circle-color': 'red',
-		},
-		line: {
-			'line-color': 'black',
-		},
-	},
-	geojson: sample_geojson_1,
-	type: '',
-};
-
-export const HeatMapEarthquakes = HeatmapTemplate.bind({});
-HeatMapEarthquakes.parameters = {};
-HeatMapEarthquakes.args = {
-	geojson: earthquakes,
-	options: {
-		// paint examples copied from https://maplibre.org/maplibre-gl-js-docs/example/heatmap-layer/
-		paint: {
-			// Increase the heatmap weight based on frequency and property magnitude
-			'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
-			// Increase the heatmap color weight by zoom level
-			// heatmap-intensity is a multiplier on top of heatmap-weight
-			'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
-			// Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
-			// Begin color ramp at 0-stop with a 0-transparancy color
-			// to create a blur-like effect.
-			'heatmap-color': [
-				'interpolate',
-				['linear'],
-				['heatmap-density'],
-				0,
-				'rgba(33,102,172,0)',
-				0.2,
-				'rgb(103,169,207)',
-				0.4,
-				'rgb(209,229,240)',
-				0.6,
-				'rgb(253,219,199)',
-				0.8,
-				'rgb(239,138,98)',
-				1,
-				'rgb(178,24,43)',
-			],
-			// Adjust the heatmap radius by zoom level
-			'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
-			// Transition from heatmap to circle layer by zoom level
-			'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0],
-		},
-	},
-	type: 'heatmap',
-};
-export const CircleMapWheregroupLocations = CircleTemplate.bind({});
-CircleMapWheregroupLocations.parameters = {};
-CircleMapWheregroupLocations.args = {
-	geojson: wg_locations,
-	paint: {
-		'circle-radius': ['/', ['get', 'Mitarbeitende'], 1.2],
-		'circle-color': '#B11E40',
-	},
-	type: 'circle',
-};

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.test.js

@@ -1,20 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlGeoJsonLayer from "./MlGeoJsonLayer";
-import geojson from "./assets/sample_1.json";
-import { uuid_regex } from "../../setupTests";
-
-const testComponent = <MlGeoJsonLayer type="line" geojson={geojson} />;
-
-layerRemovalTest(
-	"<MlGeoJsonLayer />",
-	testComponent,
-	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-	"MlGeoJsonLayer-{uuid}"
-);
-sourceRemovalTest(
-	"<MlGeoJsonLayer />",
-	testComponent,
-	new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
-	"MlGeoJsonLayer-{uuid}"
-);

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-
-import useLayer from '../../hooks/useLayer';
-
-import { v4 as uuidv4 } from 'uuid';
-
-import getDefaultPaintPropsByType from './util/getDefaultPaintPropsByType';
-import getDefaulLayerTypeByGeometry from './util/getDefaultLayerTypeByGeometry';
-import { Feature, FeatureCollection } from '@turf/turf';
-import { useLayerProps } from '../../hooks/useLayer';
-
-import {
-	LineLayerSpecification,
-	CircleLayerSpecification,
-	FillLayerSpecification,
-	LayerSpecification,
-	RasterLayerSpecification,
-} from 'maplibre-gl';
-
-export type MlGeoJsonLayerProps = {
-	/**
-	 * 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.
-	 * This layer will not be added to the maplibre-gl instance until a layer with an
-	 * id that matches the value of insertBeforeLayer is created.
-	 */
-	insertBeforeLayer?: string;
-	/**
-	 * Id of the new layer and source that are added to the MapLibre instance
-	 */
-	layerId?: string;
-	/**
-	 * GeoJSON data that is supposed to be rendered by this component.
-	 */
-	geojson: Feature | FeatureCollection | undefined;
-	/**
-	 * Type of the layer that will be added to the MapLibre instance.
-	 * All types from LayerSpecification union type are supported except the type from
-	 * RasterLayerSpecification
-	 */
-	type?: Exclude<LayerSpecification['type'], RasterLayerSpecification['type']>;
-	/**
-	 * Paint property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
-	 * Some examples are:
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 * All paint types from LayerSpecification union type are supported except the paint type from
-	 * RasterLayerSpecification
-	 */
-
-	paint?: Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']>;
-	/**
-	 * Layout property object, that is passed to the addLayer call.
-	 * Possible props depend on the layer type.
-	 * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
-	 * Some examples are:
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-	 * All layout types from LayerSpecification union type are supported except the layout type from
-	 * RasterLayerSpecification
-
-	 */
-	layout?: Exclude<LayerSpecification['layout'], RasterLayerSpecification['layout']>;
-
-	/**
-	 * Javascript object that is spread into the addLayer commands first parameter.
-	 */
-	options?: Exclude<LayerSpecification, RasterLayerSpecification>;
-	/**
-	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-	 */
-	defaultPaintOverrides?: {
-		circle?: CircleLayerSpecification['paint'];
-		fill?: FillLayerSpecification['paint'];
-		line?: LineLayerSpecification['paint'];
-	};
-	/**
-	 * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-	 */
-	onHover?: useLayerProps['onHover'];
-	/**
-	 * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-	 */
-	onClick?: useLayerProps['onClick'];
-	/**
-	 * Leave event handler that is executed whenever a geometry rendered by this component is
-	 * left/unhovered.
-	 */
-	onLeave?: useLayerProps['onLeave'];
-};
-
-/**
- * Adds source and layer to display GeoJSON data on the map.
- *
- * @component
- */
-
-const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
-	const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	useLayer({
-		mapId: props.mapId,
-		layerId: props.layerId || 'MlGeoJsonLayer-' + uuidv4(),
-		geojson: props.geojson,
-		options: {
-			paint: props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides),
-			layout: props.layout || {},
-			...props.options,
-			type: layerType as LayerSpecification['type'],
-		} as Partial<LayerSpecification>,
-		insertBeforeLayer: props.insertBeforeLayer,
-		onHover: props.onHover,
-		onClick: props.onClick,
-		onLeave: props.onLeave,
-	});
-
-	return <></>;
-};
-
-export default MlGeoJsonLayer;