@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.stories.js

@@ -1,20 +0,0 @@
-import React from "react";
-
-import useLayerHoverPopup from "./useLayerHoverPopup";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "Hooks/useLayerHoverPopup",
-	component: useLayerHoverPopup,
-	argTypes: {
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => <useLayerHoverPopup />;
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.tsx

@@ -1,83 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import useMap from '../../hooks/useMap';
-import { GeoJSONFeature } from 'maplibre-gl';
-import {
-	LngLatLike,
-	Popup,
-	MapEventType,
-} from 'maplibre-gl';
-
-interface useLayerHoverPopupProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * Id of an existing layer in the mapLibre instance this event will be registered to
-	 */
-	layerId?: string;
-	getPopupContent: (feature: GeoJSONFeature) => string;
-}
-
-/**
- * useLayerHoverPopup hook registers a mouseenter event to display feature properties in a MapLibre popup if a feature on the configured layer is hovered
- *
- */
-const useLayerHoverPopup = (props: useLayerHoverPopupProps) => {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.layerId,
-	});
-	const popup = useRef(
-		new Popup({
-			closeButton: false,
-			closeOnClick: true,
-		})
-	);
-
-	useEffect(() => {
-		if (!mapHook.map || !props.layerId) return;
-		mapHook.map.on(
-			'mouseenter',
-			props.layerId,
-			(
-				e: MapEventType & {
-					features?: ({[key:string]:string} & { geometry:{coordinates:[number,number]}})[] | undefined;
-					lngLat: { lng: number; lat: number };
-				}
-			) => {
-				if (!mapHook.map) return;
-				// Change the cursor style as a UI indicator.
-
-				const coordinates = e?.features?.[0].geometry.coordinates.slice();
-				//const description = e.features[0].properties.desc;
-				let content = '';
-				if (e?.features?.[0] && typeof props.getPopupContent === 'function') {
-					content = props.getPopupContent(e.features[0] as unknown as GeoJSONFeature);
-				}
-
-				if (coordinates?.[0]) {
-					// Ensure that if the map is zoomed out such that multiple
-					// copies of the feature are visible, the popup appears
-					// over the copy being pointed to.
-					while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-						coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-					}
-
-					// Populate the popup and set its coordinates
-
-					// based on the feature found.
-					popup.current.setLngLat(coordinates as LngLatLike).setHTML(content).addTo(mapHook.map.map);
-				}
-			},
-			mapHook.componentId
-		);
-	}, [mapHook.map]);
-
-	return <></>;
-};
-
-useLayerHoverPopup.defaultProps = {
-	mapId: undefined,
-};
-export default useLayerHoverPopup;

package/src/hooks/useMap.test.tsx

@@ -1,48 +0,0 @@
-import React, {  useState } from 'react';
-import { mount } from 'enzyme';
-import  { MapComponentsProvider } from '../contexts/MapContext';
-import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
-
-import useMap from './useMap';
-
-const UseMapTestComponent = () => {
-	const mapHook = useMap();
-
-	return <>{mapHook.map && 'Map is ready'}</>;
-};
-
-const TestComponent = () => {
-	const [includeComponent, setIncludeComponent] = useState(true);
-
-	return (
-		<>
-			<button
-				className="toggle_includeComponent"
-				onClick={() => {
-					setIncludeComponent(!includeComponent);
-				}}
-			>
-				toggle
-			</button>
-			<div className="useMapContainer">
-				{includeComponent && <UseMapTestComponent />}
-			</div>
-			<MapLibreMap />
-		</>
-	);
-};
-
-describe('useMap hook', () => {
-	it("should retrieve a MapLibre instance even if no attributes are passed", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent />
-			</MapComponentsProvider>
-		);
-
-		
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		expect(wrapper.find('.useMapContainer').text()).toEqual("Map is ready");
-	});
-});

package/src/hooks/useMap.ts

@@ -1,91 +0,0 @@
-import { useContext, useState, useEffect, useRef } from "react";
-import { v4 as uuidv4 } from "uuid";
-import MapContext, { MapContextType } from "../contexts/MapContext";
-import useMapState from "./useMapState";
-import MapLibreGlWrapper, { LayerState } from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-
-type useMapType = {
-	map: MapLibreGlWrapper | undefined;
-	mapIsReady: boolean;
-	componentId: string;
-	layers: (LayerState | undefined)[];
-	cleanup: () => void;
-};
-
-function useMap(props?: { mapId?: string; waitForLayer?: string }): useMapType {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const mapContext: MapContextType = useContext(MapContext);
-	const [map, setMap] = useState<MapLibreGlWrapper>();
-
-	const mapState = useMapState({
-		mapId: props?.mapId,
-		watch: {
-			viewport: false,
-			layers: props?.waitForLayer ? true : false,
-			sources: false,
-		},
-		filter: {
-			includeBaseLayers: true,
-		},
-	});
-
-	const initializedRef = useRef(false);
-
-	const mapRef = useRef<MapLibreGlWrapper>();
-
-	const componentId = useRef(uuidv4());
-
-	const [mapIsReady, setMapIsReady] = useState(false);
-
-	const cleanup = () => {
-		if (mapRef.current) {
-			mapRef.current.cleanup(componentId.current);
-		}
-		initializedRef.current = false;
-	};
-
-	useEffect(() => {
-		return () => {
-			cleanup();
-			setMapIsReady(false);
-			mapRef.current = undefined;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props?.mapId) || initializedRef.current) return;
-
-		// check if waitForLayer (string, layer id of the layer this hook is supposed to wait for)
-		// exists as layer in the MapLibre instance
-		if (props?.waitForLayer) {
-			let layerFound = false;
-
-			mapState?.layers?.forEach((layer: any) => {
-				if (layer.id === props?.waitForLayer) {
-					layerFound = true;
-				}
-			});
-			if (!layerFound) {
-				return;
-			}
-		}
-		// the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props?.mapId);
-		setMap(mapRef.current);
-		setMapIsReady(true);
-	}, [mapContext.mapIds, mapState.layers, mapContext, props]);
-
-	return {
-		map: map,
-		mapIsReady,
-		componentId: componentId.current,
-		layers: mapState.layers,
-		cleanup,
-	};
-}
-
-export default useMap;
-
-export type { useMapType };

package/src/hooks/useMapState.stories.js

@@ -1,120 +0,0 @@
-import React, { useEffect } from "react";
-
-import useMapState from "./useMapState";
-
-import mapContextDecoratorHooks from "../decorators/MapContextDecoratorHooks";
-
-const storyoptions = {
-	title: "Hooks/useMapState",
-	component: useMapState,
-	argTypes: {},
-	decorators: mapContextDecoratorHooks,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	const mapState = useMapState({ ...props });
-
-	useEffect(() => {
-
-	
-	}, [mapState.layers])
-
-	return (
-		<>
-		<div
-				style={{
-					position: "fixed",
-					zIndex: 10000,
-					display: "flex",
-					flexWrap: "wrap",
-					top: 0,
-					left: 0,
-					right: 0,
-					bottom: 0,
-					maxHeight:'100VH',
-					backgroundColor: "rgba(80,80,80,.8)",
-					padding: "50px",
-					fontSize: "20px",
-					color: "#51ff09",
-					overflow:'hidden',
-					pointerEvents: "none",
-				}}
-		>
-
-				<pre>{JSON.stringify(mapState, null, "	")}</pre>
-
-
-		</div>
-		</>
-	);
-};
-
-export const ViewportOnly = Template.bind({});
-ViewportOnly.parameters = {};
-ViewportOnly.args = {
-	mapId: "map_1",
-	watch: {
-		viewport: true,
-		layers: false,
-		sources: false,
-	},
-};
-
-export const IncludeBaseLayers = Template.bind({});
-IncludeBaseLayers.parameters = {};
-IncludeBaseLayers.args = {
-	mapId: "map_1",
-	watch: {
-		viewport: false,
-		layers: true,
-		sources: false,
-	},
-	filter: {
-		includeBaseLayers: true,
-	},
-};
-
-export const MatchLayerIdString = Template.bind({});
-MatchLayerIdString.parameters = {};
-MatchLayerIdString.args = {
-	mapId: "map_1",
-	watch: {
-		viewport: false,
-		layers: true,
-		sources: false,
-	},
-	filter: {
-		includeBaseLayers: true,
-		matchLayerIds: "water",
-	},
-};
-
-export const MatchLayerIdRegexp = Template.bind({});
-MatchLayerIdRegexp.parameters = {};
-MatchLayerIdRegexp.args = {
-	mapId: "map_1",
-	watch: {
-		viewport: false,
-		layers: true,
-		sources: false,
-	},
-	filter: {
-		includeBaseLayers: true,
-		matchLayerIds: /water/,
-	},
-};
-
-export const NonBaseLayersOnly = Template.bind({});
-NonBaseLayersOnly.parameters = {};
-NonBaseLayersOnly.args = {
-	mapId: "map_1",
-	watch: {
-		viewport: false,
-		layers: true,
-		sources: false,
-	},
-	filter: {
-		includeBaseLayers: false,
-	},
-};

package/src/hooks/useMapState.ts

@@ -1,182 +0,0 @@
-import { useContext, useCallback, useState, useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-import { v4 as uuidv4 } from "uuid";
-import MapContext, { MapContextType } from "../contexts/MapContext";
-import MapLibreGlWrapper, {
-	LayerState,
-	ViewportState,
-} from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-
-type useMapStateType = {
-	layers: (LayerState | undefined)[];
-	viewport: ViewportState | undefined;
-};
-
-/**
- * React hook that allows subscribing to map state changes
- *
- * @component
- */
-function useMapState(props: {
-	mapId?: string;
-	watch?: {
-		layers?: boolean;
-		sources?: boolean;
-		viewport?: boolean;
-	};
-	filter?: {
-		includeBaseLayers?: boolean;
-		matchLayerIds?: RegExp | string;
-		matchSourceIds?: RegExp | string;
-	};
-}): useMapStateType {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const mapContext = useContext<MapContextType>(MapContext);
-
-	const initializedRef = useRef(false);
-	const mapRef = useRef<MapLibreGlWrapper>();
-
-	const [viewport, setViewport] = useState<ViewportState | undefined>();
-	const viewportRef = useRef(undefined);
-
-	const [layers, setLayers] = useState<(LayerState | undefined)[]>([]);
-	const layersRef = useRef<string>();
-	//const mapRef = useRef(props.map);
-	const componentId = useRef(uuidv4());
-
-	/**
-	 * returns the element if it matches the defined filter criteria
-	 * to be used as filter function on the layers array
-	 *
-	 * @param {object} layer
-	 */
-	const layerIdFilter = useCallback(
-		(layer:LayerState) => {
-			if (!props?.filter?.includeBaseLayers && layer?.baseLayer) {
-				return false;
-			}
-
-			if (typeof props.filter?.matchLayerIds !== "undefined") {
-				if (props.filter.matchLayerIds instanceof RegExp) {
-					return props.filter.matchLayerIds.test(layer.id);
-				} else {
-					return layer.id.includes(props.filter.matchLayerIds);
-				}
-			}
-
-			return true;
-		},
-		[props.filter]
-	);
-
-	const refreshLayerState = useCallback(() => {
-		if (!mapRef.current) return;
-
-		const _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
-		const _layerStateString = JSON.stringify(_layerState);
-		if (layersRef.current !== _layerStateString) {
-			layersRef.current = _layerStateString;
-			setLayers(_layerState);
-		}
-	}, [layerIdFilter]);
-
-	useEffect(() => {
-		const _componentId = componentId.current;
-
-		return () => {
-			// cleanup all event listeners
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-				mapRef.current = undefined;
-			}
-			initializedRef.current = false;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-		// the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-
-		if (!mapRef.current) {
-			initializedRef.current = false;
-			return;
-		}
-
-		if (props?.watch?.viewport) {
-			setViewport(mapRef.current.wrapper.viewportState);
-
-			// register viewportchange event handler
-			mapRef.current.wrapper.on(
-				"viewportchange",
-				() => {
-					if (viewportRef.current !== mapRef.current?.wrapper.viewportStateString) {
-						setViewport(mapRef.current?.wrapper.viewportState);
-					}
-				},
-				componentId.current
-			);
-		}
-
-		// register layerchange event handler
-		if (props?.watch?.layers) {
-			refreshLayerState();
-
-			mapRef.current.wrapper.on(
-				"layerchange",
-				refreshLayerState,
-				{
-					includeBaseLayers: props?.filter?.includeBaseLayers,
-					matchLayerIds: props?.filter?.matchLayerIds,
-				},
-				componentId.current
-			);
-		}
-	}, [mapContext.mapIds, mapContext, props.mapId, refreshLayerState, props]);
-
-	return {
-		layers,
-		viewport,
-	};
-}
-
-useMapState.defaultProps = {
-	mapId: undefined,
-	watch: {
-		layers: true,
-		sources: false,
-		viewport: false,
-	},
-	filter: {
-		includeBaseLayers: false,
-	},
-};
-
-useMapState.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Defines map Resources to watch
-	 */
-	watch: PropTypes.shape({
-		layers: PropTypes.bool,
-		sources: PropTypes.bool,
-		viewport: PropTypes.bool,
-	}),
-	/**
-	 * Filter string or RegExp to more explicitly define the elements watched and increase performance
-	 * strings will be matched using layerId.includes(matchString)
-	 * RegExps will be matched using matchRegExp.test(layerId)
-	 */
-	filter: PropTypes.shape({
-		includeBaseLayers: PropTypes.bool,
-		matchLayerIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]),
-		matchSourceIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]),
-	}),
-};
-
-export default useMapState;

package/src/hooks/useSource.ts

@@ -1,84 +0,0 @@
-import { useEffect, useRef, useCallback, useState } from "react";
-import useMap, { useMapType } from "./useMap";
-import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-import { Source, SourceSpecification } from "maplibre-gl";
-
-type useSourceType = {
-	map: MapLibreGlWrapper | undefined;
-	source: Source | undefined;
-	componentId: string;
-	mapHook: useMapType;
-};
-interface useSourceProps {
-	mapId?: string;
-	idPrefix?: string;
-	source: SourceSpecification;
-	sourceId: string;
-}
-
-function useSource(props: useSourceProps): useSourceType {
-	const mapHook = useMap({
-		mapId: props.mapId,
-	});
-
-	const initializedRef = useRef<boolean>(false);
-	const [source, setSource] = useState<Source>();
-	const sourceId = useRef(
-		props.sourceId || (props.idPrefix ? props.idPrefix : "Source-") + mapHook.componentId
-	);
-
-	const createSource = useCallback(() => {
-		if (!mapHook.map) return;
-		initializedRef.current = true;
-
-		if (mapHook.map.map.getSource(sourceId.current)) {
-			mapHook.cleanup();
-		}
-
-		mapHook.map?.addSource(sourceId.current, {
-			...props.source,
-		}, mapHook.componentId);
-
-		setSource(mapHook.map.map.getSource(sourceId.current));
-	}, [props, mapHook.map]);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-		createSource();
-	}, [mapHook.map, props, createSource]);
-
-	useEffect(() => {
-		if (!initializedRef.current || !mapHook.map?.map?.getSource(props.sourceId)) return;
-
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		//@ts-ignore setData only exists on GeoJsonSource
-		mapHook.map.map.getSource(props.sourceId)?.setData?.(props.source.data);
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		//@ts-ignore data only exists on GeoJsonSource
-	}, [props.source?.data]);
-
-	//cleanup
-	useEffect(() => {
-		return () => {
-			initializedRef.current = false;
-			if (mapHook.map && mapHook.map?.map?.style?._layers) {
-				for (const [layerId, layer] of Object.entries(mapHook.map.map.style._layers)) {
-					if (layer.source === sourceId.current) {
-						mapHook.map.map.removeLayer(layerId);
-					}
-				}
-
-				mapHook.map.map.removeSource(sourceId.current);
-			}
-		};
-	}, [mapHook.map]);
-
-	return {
-		map: mapHook.map,
-		source: source,
-		componentId: mapHook.componentId,
-		mapHook: mapHook,
-	};
-}
-
-export default useSource;