@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.js

@@ -6,38 +6,38 @@ import mapContextDecorator from "../../decorators/MapContextDecorator";
 import wgMarker from "./assets/wg-marker.png";
 
 const storyoptions = {
-  title: "MapComponents/MlImageMarkerLayer",
-  component: MlImageMarkerLayer,
-  argTypes: { },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlImageMarkerLayer",
+	component: MlImageMarkerLayer,
+	argTypes: { },
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => (
-  <MlImageMarkerLayer
-    options={{
-      type: "symbol",
-      source: {
-        type: "geojson",
-        data: {
-          type: "Feature",
-          properties: {
-            id: "test",
-          },
-          geometry: {
-            type: "Point",
-            coordinates: [7.0847929969609424, 50.73855193187643],
-          },
-        },
-      },
-      layout: {
-        "icon-allow-overlap": true,
-        "icon-size": 0.14,
-        "icon-offset": [0, -180],
-      },
-    }}
-    imgSrc={wgMarker}
-  />
+	<MlImageMarkerLayer
+		options={{
+			type: "symbol",
+			source: {
+				type: "geojson",
+				data: {
+					type: "Feature",
+					properties: {
+						id: "test",
+					},
+					geometry: {
+						type: "Point",
+						coordinates: [7.0847929969609424, 50.73855193187643],
+					},
+				},
+			},
+			layout: {
+				"icon-allow-overlap": true,
+				"icon-size": 0.14,
+				"icon-offset": [0, -180],
+			},
+		}}
+		imgSrc={wgMarker}
+	/>
 );
 
 export const ExampleConfig = Template.bind({});

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js

@@ -6,14 +6,14 @@ import MlImageMarkerLayer from "./MlImageMarkerLayer";
 const testComponent = <MlImageMarkerLayer options={{ source: {} }} />;
 
 layerRemovalTest(
-  "<MlImageMarkerLayer />",
-  testComponent,
-  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-  "MlImageMarkerLayer-{uuid}"
+	"<MlImageMarkerLayer />",
+	testComponent,
+	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+	"MlImageMarkerLayer-{uuid}"
 );
 sourceRemovalTest(
-  "<MlImageMarkerLayer />",
-  testComponent,
-  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-  "MlImageMarkerLayer-{uuid}"
+	"<MlImageMarkerLayer />",
+	testComponent,
+	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+	"MlImageMarkerLayer-{uuid}"
 );

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx

@@ -4,171 +4,171 @@ import { GeoJSONSource } from "maplibre-gl";
 import useMap, { useMapType } from "../../hooks/useMap";
 
 interface MlImageMarkerLayerProps {
-  /**
-   * 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;
-  /**
-   * Id of the layer that will be added by this component to the maplibre-gl instance
-   */
-  layerId?: string;
-  /**
-   * Id of the image that will be added by this component to the maplibre-gl instance
-   */
-  imageId?: string;
-  /**
-   * Path or URL to a supported raster image
-   */
-  imgSrc?: string;
-  /**
-   * Javascript object that is passed the addLayer command as first parameter.
-   */
-  options?: any;
+	/**
+	 * 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;
+	/**
+	 * Id of the layer that will be added by this component to the maplibre-gl instance
+	 */
+	layerId?: string;
+	/**
+	 * Id of the image that will be added by this component to the maplibre-gl instance
+	 */
+	imageId?: string;
+	/**
+	 * Path or URL to a supported raster image
+	 */
+	imgSrc?: string;
+	/**
+	 * Javascript object that is passed the addLayer command as first parameter.
+	 */
+	options?: any;
 }
 
 const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const initializedRef = useRef(false);
-  const recreationInProgress = useRef(false);
-  const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
-
-  // effect to sync Layer paint & layout properties
-  useEffect(() => {
-    if (
-      !mapHook.map ||
-      (mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
-      !props.options
-    )
-      return;
-
-    var key;
-
-    if (props.options.layout) {
-      for (key in props.options.layout) {
-        mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-      }
-    }
-    if (props.options.paint) {
-      for (key in props.options.paint) {
-        mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-      }
-    }
-  }, [props.options, layerId.current, props.mapId]);
-
-  const createImage = (mapHook: useMapType, props: MlImageMarkerLayerProps, callback: Function) => {
-    if (!mapHook.map) {
-      initializedRef.current = false;
-
-      return;
-    }
-
-    if (props.imgSrc && !mapHook.map.map.hasImage(imageIdRef.current)) {
-      mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
-        if (error) throw error;
-
-        if (!mapHook.map || mapHook.map.map.hasImage(imageIdRef.current)) return;
-
-        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
-
-        if (typeof callback === "function") {
-          callback();
-        }
-      });
-    } else {
-      if (typeof callback === "function") {
-        callback();
-      }
-    }
-  };
-
-  const createLayer = (
-    mapHook: useMapType,
-    props: MlImageMarkerLayerProps,
-    createMapLibreElements: Function
-  ) => {
-    if (!props.options || !mapHook.map || mapHook.map?.map.getLayer(layerId.current)) return;
-
-    let tmpOptions = {
-      id: layerId.current,
-      layout: {},
-      ...props.options,
-    };
-    tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
-
-    // recreate layer if map style.json has changed
-    mapHook.map.on(
-      "styledata",
-      () => {
-        if (
-          initializedRef.current &&
-          !mapHook.map?.map.getLayer(layerId.current) &&
-          !recreationInProgress.current
-        ) {
-          initializedRef.current = false;
-          recreationInProgress.current = true;
-          console.log("Recreate Layer " + layerId.current);
-          createMapLibreElements();
-        }
-      },
-      mapHook.componentId
-    );
-
-    if (recreationInProgress.current) {
-      recreationInProgress.current = false;
-    }
-  };
-
-  const createMapLibreElements = useCallback(() => {
-    if (!mapHook.map || initializedRef.current || mapHook.map?.map.getLayer(layerId.current))
-      return;
-
-    initializedRef.current = true;
-
-    if (recreationInProgress.current) {
-      mapHook.cleanup();
-    }
-
-    if (props.imgSrc) {
-      createImage(mapHook, props, () => {
-        createLayer(mapHook, props, createMapLibreElements);
-      });
-    } else {
-      createLayer(mapHook, props, createMapLibreElements);
-    }
-  }, [props, mapHook]);
-
-  useEffect(() => {
-    if (initializedRef.current) return;
-
-    createMapLibreElements();
-  }, [createMapLibreElements]);
-
-  useEffect(() => {
-    if (
-      !mapHook.map ||
-      (mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
-      !props.options
-    ) {
-      return;
-    }
-
-    (mapHook.map.map.getSource(layerId.current) as GeoJSONSource).setData(
-      props.options.source.data
-    );
-  }, [props.options.source.data, props]);
-
-  return <></>;
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	const initializedRef = useRef(false);
+	const recreationInProgress = useRef(false);
+	const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
+	const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
+
+	// effect to sync Layer paint & layout properties
+	useEffect(() => {
+		if (
+			!mapHook.map ||
+			(mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
+			!props.options
+		)
+			return;
+
+		var key;
+
+		if (props.options.layout) {
+			for (key in props.options.layout) {
+				mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
+			}
+		}
+		if (props.options.paint) {
+			for (key in props.options.paint) {
+				mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
+			}
+		}
+	}, [props.options, layerId.current, props.mapId]);
+
+	const createImage = (mapHook: useMapType, props: MlImageMarkerLayerProps, callback: Function) => {
+		if (!mapHook.map) {
+			initializedRef.current = false;
+
+			return;
+		}
+
+		if (props.imgSrc && !mapHook.map.map.hasImage(imageIdRef.current)) {
+			mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
+				if (error) throw error;
+
+				if (!mapHook.map || mapHook.map.map.hasImage(imageIdRef.current)) return;
+
+				mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+
+				if (typeof callback === "function") {
+					callback();
+				}
+			});
+		} else {
+			if (typeof callback === "function") {
+				callback();
+			}
+		}
+	};
+
+	const createLayer = (
+		mapHook: useMapType,
+		props: MlImageMarkerLayerProps,
+		createMapLibreElements: Function
+	) => {
+		if (!props.options || !mapHook.map || mapHook.map?.map.getLayer(layerId.current)) return;
+
+		let tmpOptions = {
+			id: layerId.current,
+			layout: {},
+			...props.options,
+		};
+		tmpOptions.layout["icon-image"] = imageIdRef.current;
+		mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+
+		// recreate layer if map style.json has changed
+		mapHook.map.on(
+			"styledata",
+			() => {
+				if (
+					initializedRef.current &&
+					!mapHook.map?.map.getLayer(layerId.current) &&
+					!recreationInProgress.current
+				) {
+					initializedRef.current = false;
+					recreationInProgress.current = true;
+					console.log("Recreate Layer " + layerId.current);
+					createMapLibreElements();
+				}
+			},
+			mapHook.componentId
+		);
+
+		if (recreationInProgress.current) {
+			recreationInProgress.current = false;
+		}
+	};
+
+	const createMapLibreElements = useCallback(() => {
+		if (!mapHook.map || initializedRef.current || mapHook.map?.map.getLayer(layerId.current))
+			return;
+
+		initializedRef.current = true;
+
+		if (recreationInProgress.current) {
+			mapHook.cleanup();
+		}
+
+		if (props.imgSrc) {
+			createImage(mapHook, props, () => {
+				createLayer(mapHook, props, createMapLibreElements);
+			});
+		} else {
+			createLayer(mapHook, props, createMapLibreElements);
+		}
+	}, [props, mapHook]);
+
+	useEffect(() => {
+		if (initializedRef.current) return;
+
+		createMapLibreElements();
+	}, [createMapLibreElements]);
+
+	useEffect(() => {
+		if (
+			!mapHook.map ||
+			(mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
+			!props.options
+		) {
+			return;
+		}
+
+		(mapHook.map.map.getSource(layerId.current) as GeoJSONSource).setData(
+			props.options.source.data
+		);
+	}, [props.options.source.data, props]);
+
+	return <></>;
 };
 
 export default MlImageMarkerLayer;

package/src/components/MlLayer/MlLayer.stories.js

@@ -5,11 +5,11 @@ import MlLayer from "./MlLayer";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlLayer",
-  component: MlLayer,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlLayer",
+	component: MlLayer,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 

package/src/components/MlLayer/MlLayer.test.js

@@ -8,110 +8,110 @@ import MlLayer from "./MlLayer";
 import { uuid_regex } from "../../setupTests";
 
 const MlLayerTestComponent = (props) => {
-  const [layerVisible, setLayerVisible] = useState(true);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const mapContext = useContext(MapContext);
-
-  return (
-    <>
-      <MapLibreMap />
-
-      {layerVisible && (
-        <MlLayer
-          options={{
-            source: {
-              type: "geojson",
-              data: {},
-            },
-          }}
-        />
-      )}
-
-      <button
-        className="toggle_layer_visible"
-        onClick={() => {
-          setLayerVisible(!layerVisible);
-        }}
-      >
-        toggle layer visible
-      </button>
-      <button
-        className="trigger_refresh"
-        onClick={() => {
-          setRefreshTrigger(refreshTrigger + 1);
-        }}
-      >
-        refresh
-      </button>
-      <div className="layers_json">
-        {mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
-      </div>
-      <div className="sources_json">
-        {mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
-      </div>
-    </>
-  );
+	const [layerVisible, setLayerVisible] = useState(true);
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const mapContext = useContext(MapContext);
+
+	return (
+		<>
+			<MapLibreMap />
+
+			{layerVisible && (
+				<MlLayer
+					options={{
+						source: {
+							type: "geojson",
+							data: {},
+						},
+					}}
+				/>
+			)}
+
+			<button
+				className="toggle_layer_visible"
+				onClick={() => {
+					setLayerVisible(!layerVisible);
+				}}
+			>
+				toggle layer visible
+			</button>
+			<button
+				className="trigger_refresh"
+				onClick={() => {
+					setRefreshTrigger(refreshTrigger + 1);
+				}}
+			>
+				refresh
+			</button>
+			<div className="layers_json">
+				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
+			</div>
+			<div className="sources_json">
+				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
+			</div>
+		</>
+	);
 };
 
 const createWrapper = () =>
-  mount(
-    <MapComponentsProvider>
-      <MlLayerTestComponent />
-    </MapComponentsProvider>
-  );
+	mount(
+		<MapComponentsProvider>
+			<MlLayerTestComponent />
+		</MapComponentsProvider>
+	);
 
 describe("<MlLayer>", () => {
-  it("should add a Layer with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
-    const wrapper = createWrapper();
+	it("should add a Layer with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
+		const wrapper = createWrapper();
 
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
-    ).toEqual(true);
-  });
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
+		).toEqual(true);
+	});
 
-  it("should remove a Layer with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
-    const wrapper = createWrapper();
+	it("should remove a Layer with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
+		const wrapper = createWrapper();
 
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
-    ).toEqual(true);
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
+		).toEqual(true);
 
-    wrapper.find(".toggle_layer_visible").simulate("click");
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".toggle_layer_visible").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
-    ).toEqual(false);
-  });
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
+		).toEqual(false);
+	});
 
-  it("should add a Source with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
-    const wrapper = createWrapper();
+	it("should add a Source with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
+		const wrapper = createWrapper();
 
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
-    ).toEqual(true);
-  });
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
+		).toEqual(true);
+	});
 
-  it("should remove a Source with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
-    const wrapper = createWrapper();
+	it("should remove a Source with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
+		const wrapper = createWrapper();
 
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
-    ).toEqual(true);
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
+		).toEqual(true);
 
-    wrapper.find(".toggle_layer_visible").simulate("click");
-    wrapper.find(".trigger_refresh").simulate("click");
+		wrapper.find(".toggle_layer_visible").simulate("click");
+		wrapper.find(".trigger_refresh").simulate("click");
 
-    expect(
-      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
-    ).toEqual(false);
-  });
+		expect(
+			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
+		).toEqual(false);
+	});
 });