@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/hooks/useMapState.stories.js

@@ -2,119 +2,119 @@ import React, { useEffect } from "react";
 
 import useMapState from "./useMapState";
 
-import mapContextDecorator from "../decorators/MapContextDecorator";
+import mapContextDecoratorHooks from "../decorators/MapContextDecoratorHooks";
 
 const storyoptions = {
-  title: "Hooks/UseMapState",
-  component: useMapState,
-  argTypes: {},
-  decorators: mapContextDecorator,
+	title: "Hooks/UseMapState",
+	component: useMapState,
+	argTypes: {},
+	decorators: mapContextDecoratorHooks,
 };
 export default storyoptions;
 
 const Template = (props) => {
-  const mapState = useMapState({ ...props });
+	const mapState = useMapState({ ...props });
 
-  useEffect(() => {
+	useEffect(() => {
 
-  
-  }, [mapState.layers])
+	
+	}, [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",
-        }}
-    >
+	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>
+				<pre>{JSON.stringify(mapState, null, "	")}</pre>
 
 
-    </div>
-    </>
-  );
+		</div>
+		</>
+	);
 };
 
 export const ViewportOnly = Template.bind({});
 ViewportOnly.parameters = {};
 ViewportOnly.args = {
-  mapId: "map_1",
-  watch: {
-    viewport: true,
-    layers: false,
-    sources: false,
-  },
+	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,
-  },
+	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",
-  },
+	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/,
-  },
+	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,
-  },
+	mapId: "map_1",
+	watch: {
+		viewport: false,
+		layers: true,
+		sources: false,
+	},
+	filter: {
+		includeBaseLayers: false,
+	},
 };

package/src/hooks/useMapState.ts

@@ -3,20 +3,20 @@ import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
 import MapContext from "../contexts/MapContext";
 import MapLibreGlWrapper, {
-  LayerState,
-  ViewportState,
+	LayerState,
+	ViewportState,
 } from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 
 type useMapStateType = {
-  layers: (LayerState | undefined)[];
-  viewport: ViewportState | undefined;
+	layers: (LayerState | undefined)[];
+	viewport: ViewportState | undefined;
 };
 type MapContext = {
-  mapIds: [string?];
-  mapExists: Function;
-  maps: [];
-  getMap: Function;
-  setMap: Function;
+	mapIds: [string?];
+	mapExists: Function;
+	maps: [];
+	getMap: Function;
+	setMap: Function;
 };
 
 /**
@@ -25,165 +25,165 @@ type MapContext = {
  * @component
  */
 function useMapState(props: {
-  mapId?: string;
-  watch?: {
-    layers?: boolean;
-    sources?: boolean;
-    viewport?: boolean;
-  };
-  filter?: {
-    includeBaseLayers?: boolean;
-    matchLayerIds?: RegExp | string;
-    matchSourceIds?: RegExp | string;
-  };
+	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) => {
-      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;
-
-    let _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
-    let _layerStateString = JSON.stringify(_layerState);
-    if (layersRef.current !== _layerStateString) {
-      layersRef.current = _layerStateString;
-      setLayers(_layerState);
-    }
-  }, [layerIdFilter]);
-
-  useEffect(() => {
-    let _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,
-  };
+	// 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) => {
+			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;
+
+		let _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
+		let _layerStateString = JSON.stringify(_layerState);
+		if (layersRef.current !== _layerStateString) {
+			layersRef.current = _layerStateString;
+			setLayers(_layerState);
+		}
+	}, [layerIdFilter]);
+
+	useEffect(() => {
+		let _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,
-  },
+	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)]),
-  }),
+	/**
+	 * 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

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import useMap, { useMapType } from "./useMap";
+import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+import { SourceSpecification } from "maplibre-gl";
+
+type useSourceType = {
+	map: MapLibreGlWrapper | undefined;
+	source: SourceSpecification;
+	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<any>();
+	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,
+		});
+
+		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) {
+				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;