@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/hooks/useLayer.ts

@@ -1,198 +1,212 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef } from 'react';
 
-import useMap, { useMapType } from "./useMap";
+import useMap, { useMapType } from './useMap';
 
-import { LayerSpecification } from "maplibre-gl";
+import { SourceSpecification, LayerSpecification } from 'maplibre-gl';
 
-import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 
-import { MapLayerMouseEvent } from "maplibre-gl";
-import { GeoJSONObject } from "@turf/turf";
+import { MapLayerMouseEvent } from 'maplibre-gl';
+import { GeoJSONObject } from '@turf/turf';
 
 type useLayerType = {
-  map: MapLibreGlWrapper | undefined;
-  layer: LayerSpecification;
-  layerId: string;
-  componentId: string;
-  mapHook: useMapType;
+	map: MapLibreGlWrapper | undefined;
+	layer: LayerSpecification;
+	layerId: string;
+	componentId: string;
+	mapHook: useMapType;
 };
 
 interface useLayerProps {
-  mapId?: string;
-  layerId?: string;
-  idPrefix?: string;
-  insertBeforeLayer?: string;
-  insertBeforeFirstSymbolLayer?: boolean;
-  geojson?: GeoJSONObject;
-  options: Partial<LayerSpecification>;
-  onHover?: MapLayerMouseEvent;
-  onClick?: MapLayerMouseEvent;
-  onLeave?: MapLayerMouseEvent;
+	mapId?: string;
+	layerId?: string;
+	idPrefix?: string;
+	insertBeforeLayer?: string;
+	insertBeforeFirstSymbolLayer?: boolean;
+	geojson?: GeoJSONObject;
+	source?: SourceSpecification | string;
+	options: Partial<LayerSpecification>;
+	onHover?: MapLayerMouseEvent;
+	onClick?: MapLayerMouseEvent;
+	onLeave?: MapLayerMouseEvent;
 }
 
 const legalLayerTypes = [
-  "fill",
-  "line",
-  "symbol",
-  "circle",
-  "heatmap",
-  "fill-extrusion",
-  "raster",
-  "hillshade",
-  "background",
+	'fill',
+	'line',
+	'symbol',
+	'circle',
+	'heatmap',
+	'fill-extrusion',
+	'raster',
+	'hillshade',
+	'background',
 ];
 
 function useLayer(props: useLayerProps): useLayerType {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const layerTypeRef = useRef<string>("");
-  const layerPaintConfRef = useRef<string>("");
-  const layerLayoutConfRef = useRef<string>("");
-
-  const [layer, setLayer] = useState<any>();
-
-  const initializedRef = useRef<boolean>(false);
-  const layerId = useRef(
-    props.layerId || (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId
-  );
-
-  const createLayer = useCallback(() => {
-    if (!mapHook.map) return;
-
-    if (mapHook.map.map.getLayer(layerId.current)) {
-      mapHook.cleanup();
-    }
-    if (mapHook.map.map.getSource(layerId.current)) {
-      mapHook.map.map.removeSource(layerId.current);
-    }
-    initializedRef.current = true;
-
-    mapHook.map.addLayer(
-      {
-        ...props.options,
-        ...(props.geojson
-          ? {
-              source: {
-                type: "geojson",
-                data: props.geojson,
-              },
-            }
-          : {}),
-        id: layerId.current,
-      },
-      props.insertBeforeLayer
-        ? props.insertBeforeLayer
-        : props.insertBeforeFirstSymbolLayer
-        ? mapHook.map.firstSymbolLayer
-        : undefined,
-      mapHook.componentId
-    );
-
-    setLayer(mapHook.map.map.getLayer(layerId.current));
-
-    if (typeof props.onHover !== "undefined") {
-      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
-    }
-
-    if (typeof props.onClick !== "undefined") {
-      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
-    }
-
-    if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
-    }
-
-    // recreate layer if style has changed
-    mapHook.map.on(
-      "styledata",
-      () => {
-        if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
-          console.log("Recreate Layer");
-          createLayer();
-        }
-      },
-      mapHook.componentId
-    );
-
-    layerPaintConfRef.current = JSON.stringify(props.options?.paint);
-    layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-    layerTypeRef.current = props.options.type as LayerSpecification['type'];
-  }, [props, mapHook.map]);
-
-  useEffect(() => {
-    if (!mapHook.map) return;
-
-    if (
-      initializedRef.current &&
-      (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
-        (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &&
-          props.options.type === layerTypeRef.current))
-    ) {
-      return;
-    }
-
-    createLayer();
-  }, [mapHook.map, props.options, createLayer]);
-
-  useEffect(() => {
-    if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
-
-    //@ts-ignore setData only exists on GeoJsonSource
-    mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
-  }, [props.geojson, mapHook.map, props.options.type]);
-
-  useEffect(() => {
-    if (
-      !mapHook.map ||
-      !mapHook.map?.map?.getLayer?.(layerId.current) ||
-      !initializedRef.current ||
-      props.options.type !== layerTypeRef.current
-    )
-      return;
-
-    var key;
-
-    let layoutString = JSON.stringify(props.options.layout);
-    if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
-      let oldLayout = JSON.parse(layerLayoutConfRef.current);
-
-      for (key in props.options.layout) {
-        if (props.options.layout?.[key] && props.options.layout[key] !== oldLayout[key]) {
-          mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-        }
-      }
-      layerLayoutConfRef.current = layoutString;
-    }
-
-    let paintString = JSON.stringify(props.options.paint);
-    if (paintString !== layerPaintConfRef.current) {
-      let oldPaint = JSON.parse(layerPaintConfRef.current);
-      for (key in props.options.paint) {
-        if (props.options.paint?.[key] && props.options.paint[key] !== oldPaint[key]) {
-          mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-        }
-      }
-      layerPaintConfRef.current = paintString;
-    }
-  }, [props.options, mapHook.map]);
-
-  useEffect(() => {
-    return () => {
-      initializedRef.current = false;
-      mapHook.cleanup();
-    };
-  }, []);
-
-  return {
-    map: mapHook.map,
-    layer: layer,
-    layerId: layerId.current,
-    componentId: mapHook.componentId,
-    mapHook: mapHook,
-  };
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	const layerTypeRef = useRef<string>('');
+	const layerPaintConfRef = useRef<string>('');
+	const layerLayoutConfRef = useRef<string>('');
+
+	const [layer, setLayer] = useState<any>();
+
+	const initializedRef = useRef<boolean>(false);
+	const layerId = useRef(
+		props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId
+	);
+
+	const createLayer = useCallback(() => {
+		if (!mapHook.map) return;
+
+		if (mapHook.map.map.getLayer(layerId.current)) {
+			mapHook.cleanup();
+		}
+		if (mapHook.map.map.getSource(layerId.current)) {
+			mapHook.map.map.removeSource(layerId.current);
+		}
+
+		if (typeof props.source === 'string') {
+			if (props.source === '' || !mapHook.map.map.getSource(props.source)) {
+				return;
+			}
+		}
+
+		initializedRef.current = true;
+
+		mapHook.map.addLayer(
+			{
+				...props.options,
+				...(props.geojson && !props.source
+					? {
+							source: {
+								type: 'geojson',
+								data: props.geojson,
+							},
+					  }
+					: {}),
+				...(props.source
+					? {
+							source: props.source,
+					  }
+					: {}),
+				id: layerId.current,
+			},
+			props.insertBeforeLayer
+				? props.insertBeforeLayer
+				: props.insertBeforeFirstSymbolLayer
+				? mapHook.map.firstSymbolLayer
+				: undefined,
+			mapHook.componentId
+		);
+
+		setLayer(mapHook.map.map.getLayer(layerId.current));
+
+		if (typeof props.onHover !== 'undefined') {
+			mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
+		}
+
+		if (typeof props.onClick !== 'undefined') {
+			mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
+		}
+
+		if (typeof props.onLeave !== 'undefined') {
+			mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
+		}
+
+		// recreate layer if style has changed
+		mapHook.map.on(
+			'styledata',
+			() => {
+				if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
+					console.log('Recreate Layer');
+					createLayer();
+				}
+			},
+			mapHook.componentId
+		);
+
+		layerPaintConfRef.current = JSON.stringify(props.options?.paint);
+		layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
+		layerTypeRef.current = props.options.type as LayerSpecification['type'];
+	}, [props, mapHook.map]);
+
+	useEffect(() => {
+		if (!mapHook.map) return;
+
+		if (
+			initializedRef.current &&
+			(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
+				(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &&
+					props.options.type === layerTypeRef.current))
+		) {
+			return;
+		}
+
+		createLayer();
+	}, [mapHook.map, props.options, createLayer]);
+
+	useEffect(() => {
+		if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
+
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		//@ts-ignore setData only exists on GeoJsonSource
+		mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
+	}, [props.geojson, mapHook.map, props.options.type]);
+
+	useEffect(() => {
+		if (
+			!mapHook.map ||
+			!mapHook.map?.map?.getLayer?.(layerId.current) ||
+			!initializedRef.current ||
+			props.options.type !== layerTypeRef.current
+		)
+			return;
+
+		let key;
+
+		const layoutString = JSON.stringify(props.options.layout);
+		if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
+			const oldLayout = JSON.parse(layerLayoutConfRef.current);
+
+			for (key in props.options.layout) {
+				if (props.options.layout?.[key] && props.options.layout[key] !== oldLayout[key]) {
+					mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
+				}
+			}
+			layerLayoutConfRef.current = layoutString;
+		}
+
+		const paintString = JSON.stringify(props.options.paint);
+		if (paintString !== layerPaintConfRef.current) {
+			const oldPaint = JSON.parse(layerPaintConfRef.current);
+			for (key in props.options.paint) {
+				if (props.options.paint?.[key] && props.options.paint[key] !== oldPaint[key]) {
+					mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
+				}
+			}
+			layerPaintConfRef.current = paintString;
+		}
+	}, [props.options, mapHook.map]);
+
+	useEffect(() => {
+		return () => {
+			initializedRef.current = false;
+			mapHook.cleanup();
+		};
+	}, []);
+
+	return {
+		map: mapHook.map,
+		layer: layer,
+		layerId: layerId.current,
+		componentId: mapHook.componentId,
+		mapHook: mapHook,
+	};
 }
 
 export default useLayer;

package/src/hooks/useLayerEvent.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useEffect } from 'react';
+import useMapState from './useMapState';
+import useMap from './useMap';
+
+const touchEquivalents = {
+	mousedown: 'touchstart',
+	mouseup: 'touchend',
+	mousemove: 'touchmove',
+};
+const touchEquivalentsKeys = Object.keys(touchEquivalents);
+function useLayerEvent(props) {
+	const mapState = useMapState({ mapId: props.mapId, watch: { layers: true } });
+	const mapHook = useMap({ mapId: props.mapId });
+
+	useEffect(() => {
+		if (!mapHook.map) return true;
+		if (typeof props.condition !== 'undefined' && props.condition === false) return;
+		//console.log('useLayerEvent');
+		//console.log(mapState);
+
+		if (mapHook.map.map.getLayer(props.layerId)) {
+			//console.log("layer avail");
+			var _event = props.event;
+			var _layerId = props.layerId;
+			var _eventHandler = props.eventHandler;
+
+			//console.log(_event);
+			mapHook.map.on(_event, _layerId, _eventHandler, mapHook.componentId);
+			if (props?.addTouchEvents === true) {
+				if (touchEquivalentsKeys.indexOf(_event) !== -1) {
+					mapHook.map.on(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
+				}
+			}
+			return () => {
+				mapHook.map.off(_event, _layerId, _eventHandler);
+				if (props?.addTouchEvents === true) {
+					if (touchEquivalentsKeys.indexOf(_event) !== -1) {
+						mapHook.map.off(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
+					}
+				}
+			};
+		}
+	}, [props, mapState, mapHook.map]);
+
+	return {};
+}
+
+export default useLayerEvent;

package/src/hooks/useMap.ts

@@ -1,88 +1,89 @@
-import { useContext, useState, useEffect, useRef, MutableRefObject } from "react";
+import { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import MapContext 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: Function;
+	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>();
+	// 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 mapState = useMapState({
+		mapId: props.mapId,
+		watch: {
+			viewport: false,
+			layers: props.waitForLayer ? true : false,
+			sources: false,
+		},
+		filter: {
+			includeBaseLayers: true,
+		},
+	});
 
-  const initializedRef = useRef(false);
-  const mapRef: MutableRefObject<MapLibreGlWrapper | undefined> = useRef(undefined);
+	const initializedRef = useRef(false);
 
-  const componentId = useRef(uuidv4());
+	const mapRef = useRef<MapLibreGlWrapper>();
 
-  const [mapIsReady, setMapIsReady] = useState(false);
+	const componentId = useRef(uuidv4());
 
-  const cleanup = () => {
-    if (mapRef.current) {
-      mapRef.current.cleanup(componentId.current);
-      mapRef.current = undefined;
-    }
-    initializedRef.current = false;
-  };
+	const [mapIsReady, setMapIsReady] = useState(false);
 
-  useEffect(() => {
-    return () => {
-      cleanup();
-      setMapIsReady(false);
-    }
-  }, []);
+	const cleanup = () => {
+		if (mapRef.current) {
+			mapRef.current.cleanup(componentId.current);
+		}
+		initializedRef.current = false;
+	};
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+	useEffect(() => {
+		return () => {
+			cleanup();
+			setMapIsReady(false);
+			mapRef.current = undefined;
+		};
+	}, []);
 
-    // 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;
+	useEffect(() => {
+		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
 
-      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.waitForLayer, props.mapId]);
+		// 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;
 
-  return {
-    map: map,
-    mapIsReady,
-    componentId: componentId.current,
-    layers: mapState.layers,
-    cleanup,
-  };
+			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.waitForLayer, props.mapId]);
+
+	return {
+		map: map,
+		mapIsReady,
+		componentId: componentId.current,
+		layers: mapState.layers,
+		cleanup,
+	};
 }
 
 export default useMap;