@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js

@@ -4,36 +4,36 @@ import MlVectorTileLayer from "./MlVectorTileLayer";
 import { uuid_regex } from "../../setupTests";
 
 const testComponent = (
-  <MlVectorTileLayer
-    {...{
-      url: "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-      layers: {
-        landuseLine: {
-          "source-layer": "landuse",
-          layout: {
-            "line-cap": "round",
-            "line-join": "round",
-          },
-          paint: { "line-width": 1, "line-color": "#ff0000" },
-        },
-      },
-      sourceOptions: {
-        minzoom: 0,
-        maxzoom: 20,
-      },
-    }}
-  />
+	<MlVectorTileLayer
+		{...{
+			url: "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
+			layers: {
+				landuseLine: {
+					"source-layer": "landuse",
+					layout: {
+						"line-cap": "round",
+						"line-join": "round",
+					},
+					paint: { "line-width": 1, "line-color": "#ff0000" },
+				},
+			},
+			sourceOptions: {
+				minzoom: 0,
+				maxzoom: 20,
+			},
+		}}
+	/>
 );
 
 layerRemovalTest(
-  "<MlVectorTileLayer />",
-  testComponent,
-  new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '_landuseLine".*$'),
-  "MlVectorTileLayer-{uuid}_landuseLine"
+	"<MlVectorTileLayer />",
+	testComponent,
+	new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '_landuseLine".*$'),
+	"MlVectorTileLayer-{uuid}_landuseLine"
 );
 sourceRemovalTest(
-  "<MlVectorTileLayer />",
-  testComponent,
-  new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '".*$'),
-  "MlVectorTileLayer-{uuid}"
+	"<MlVectorTileLayer />",
+	testComponent,
+	new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '".*$'),
+	"MlVectorTileLayer-{uuid}"
 );

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -3,12 +3,12 @@ import useMap from "../../hooks/useMap";
 import PropTypes from "prop-types";
 
 interface MlVectorTileLayerProps {
-  mapId?: string;
-  insertBeforeLayer?: string;
-  layerId?: string;
-  sourceOptions?: any;
-  url?: string;
-  layers?: any;
+	mapId?: string;
+	insertBeforeLayer?: string;
+	layerId?: string;
+	sourceOptions?: any;
+	url?: string;
+	layers?: any;
 }
 
 /**
@@ -18,140 +18,140 @@ interface MlVectorTileLayerProps {
  * @component
  */
 const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const layerIdsRef = useRef({});
-  const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
-  const layerPaintConfsRef = useRef({});
-  const layerLayoutConfsRef = useRef({});
-  const initializedRef = useRef(false);
-
-  const createLayer = useCallback(() => {
-    if (!mapHook.map) return;
-
-    initializedRef.current = true;
-
-    if (mapHook.map.map.getLayer(layerId.current)) {
-      mapHook.cleanup();
-    }
-
-    // Add the new layer to the openlayers instance once it is available
-    mapHook.map.addSource(
-      layerId.current,
-      {
-        type: "vector",
-        tiles: [props.url],
-        tileSize: 512,
-        attribution: "",
-        ...props.sourceOptions,
-      },
-      mapHook.componentId
-    );
-
-    for (let key in props.layers) {
-      let _layerId = layerId.current + "_" + key;
-      layerIdsRef.current[key] = _layerId;
-
-      mapHook.map.addLayer(
-        {
-          id: _layerId,
-          source: layerId.current,
-          type: "line",
-          minzoom: 0,
-          maxzoom: 22,
-          layout: {},
-          paint: {
-            "line-opacity": 0.5,
-            "line-color": "rgb(80, 80, 80)",
-            "line-width": 2,
-          },
-          ...props.layers[key],
-        },
-        props.insertBeforeLayer,
-        mapHook.componentId
-      );
-      layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
-
-      // recreate layer if style has changed
-      mapHook.map.on(
-        "styledata",
-        () => {
-          if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
-            console.log("Recreate Layer " + layerId.current);
-            createLayer();
-          }
-        },
-        mapHook.componentId
-      );
-    }
-  }, [mapHook.map, props]);
-
-  useEffect(() => {
-    if (initializedRef.current) return;
-
-    createLayer();
-  }, [createLayer]);
-
-  useEffect(() => {
-    if (!mapHook.map || !initializedRef.current) return;
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    for (var key in props.layers) {
-      if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
-        // update changed paint property
-        let layerPaintConfString = JSON.stringify(props.layers[key].paint);
-
-        if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
-          for (let paintKey in props.layers[key].paint) {
-            mapHook.map.map.setPaintProperty(
-              layerIdsRef.current[key],
-              paintKey,
-              props.layers[key].paint[paintKey]
-            );
-          }
-        }
-        layerPaintConfsRef.current[key] = layerPaintConfString;
-
-        // update changed layout property
-        let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
-
-        if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
-          for (let layoutKey in props.layers[key].layout) {
-            mapHook.map.map.setLayoutProperty(
-              layerIdsRef.current[key],
-              layoutKey,
-              props.layers[key].layout[layoutKey]
-            );
-          }
-        }
-        layerLayoutConfsRef.current[key] = layerLayoutConfString;
-      }
-    }
-  }, [props.layers, mapHook.map]);
-
-  return <></>;
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	const layerIdsRef = useRef({});
+	const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+	const layerPaintConfsRef = useRef({});
+	const layerLayoutConfsRef = useRef({});
+	const initializedRef = useRef(false);
+
+	const createLayer = useCallback(() => {
+		if (!mapHook.map) return;
+
+		initializedRef.current = true;
+
+		if (mapHook.map.map.getLayer(layerId.current)) {
+			mapHook.cleanup();
+		}
+
+		// Add the new layer to the openlayers instance once it is available
+		mapHook.map.addSource(
+			layerId.current,
+			{
+				type: "vector",
+				tiles: [props.url],
+				tileSize: 512,
+				attribution: "",
+				...props.sourceOptions,
+			},
+			mapHook.componentId
+		);
+
+		for (let key in props.layers) {
+			let _layerId = layerId.current + "_" + key;
+			layerIdsRef.current[key] = _layerId;
+
+			mapHook.map.addLayer(
+				{
+					id: _layerId,
+					source: layerId.current,
+					type: "line",
+					minzoom: 0,
+					maxzoom: 22,
+					layout: {},
+					paint: {
+						"line-opacity": 0.5,
+						"line-color": "rgb(80, 80, 80)",
+						"line-width": 2,
+					},
+					...props.layers[key],
+				},
+				props.insertBeforeLayer,
+				mapHook.componentId
+			);
+			layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
+			layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+
+			// recreate layer if style has changed
+			mapHook.map.on(
+				"styledata",
+				() => {
+					if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
+						console.log("Recreate Layer " + layerId.current);
+						createLayer();
+					}
+				},
+				mapHook.componentId
+			);
+		}
+	}, [mapHook.map, props]);
+
+	useEffect(() => {
+		if (initializedRef.current) return;
+
+		createLayer();
+	}, [createLayer]);
+
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
+		for (var key in props.layers) {
+			if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
+				// update changed paint property
+				let layerPaintConfString = JSON.stringify(props.layers[key].paint);
+
+				if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
+					for (let paintKey in props.layers[key].paint) {
+						mapHook.map.map.setPaintProperty(
+							layerIdsRef.current[key],
+							paintKey,
+							props.layers[key].paint[paintKey]
+						);
+					}
+				}
+				layerPaintConfsRef.current[key] = layerPaintConfString;
+
+				// update changed layout property
+				let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+
+				if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
+					for (let layoutKey in props.layers[key].layout) {
+						mapHook.map.map.setLayoutProperty(
+							layerIdsRef.current[key],
+							layoutKey,
+							props.layers[key].layout[layoutKey]
+						);
+					}
+				}
+				layerLayoutConfsRef.current[key] = layerLayoutConfString;
+			}
+		}
+	}, [props.layers, mapHook.map]);
+
+	return <></>;
 };
 
 MlVectorTileLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-   */
-  sourceOptions: PropTypes.object,
-  /**
-   * Object that hold layers
-   */
-  layers: PropTypes.object,
-  /**
-   * String of the URL of a wms layer
-   */
-  url: PropTypes.string,
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: PropTypes.string,
+	/**
+	 * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
+	 */
+	sourceOptions: PropTypes.object,
+	/**
+	 * Object that hold layers
+	 */
+	layers: PropTypes.object,
+	/**
+	 * String of the URL of a wms layer
+	 */
+	url: PropTypes.string,
 };
 
 export default MlVectorTileLayer;

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js

@@ -13,52 +13,52 @@ import { v4 as uuidv4 } from "uuid";
  * @component
  */
 const MlWmsFeatureInfoPopup = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+	const mapContext = useContext(MapContext);
 
-  const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsFeatureInfoPopup-") + uuidv4());
+	const initializedRef = useRef(false);
+	const mapRef = useRef(undefined);
+	const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsFeatureInfoPopup-") + uuidv4());
 
-  useEffect(() => {
-    let _componentId = componentId.current;
+	useEffect(() => {
+		let _componentId = componentId.current;
 
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-      // check for the existence of map.style before calling getLayer or getSource
+		return () => {
+			// This is the cleanup function, it is called when this react component is removed from react-dom
+			// try to remove anything this component has added to the MapLibre-gl instance
+			// e.g.: remove the layer
+			// mapContext.getMap(props.mapId).removeLayer(layerRef.current);
+			// check for the existence of map.style before calling getLayer or getSource
 
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
+			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);
+	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);
 
-    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+		mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
+	}, [mapContext.mapIds, mapContext, props.mapId]);
 
-  return <></>;
+	return <></>;
 };
 
 MlWmsFeatureInfoPopup.defaultProps = {
-  mapId: undefined,
+	mapId: undefined,
 };
 
 MlWmsFeatureInfoPopup.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: PropTypes.string,
 };
 export default MlWmsFeatureInfoPopup;

package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.stories.js

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

package/src/components/MlWmsLayer/MlWmsLayer.stories.js

@@ -9,41 +9,41 @@ import mapContextDecorator from "../../decorators/MapContextDecorator";
 import "../../App.css";
 
 const storyoptions = {
-  title: "MapComponents/MlWmsLayer",
-  component: MlWmsLayer,
-  argTypes: {
-    url: {},
-    layer: {},
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlWmsLayer",
+	component: MlWmsLayer,
+	argTypes: {
+		url: {},
+		layer: {},
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (props) => {
-  const [showLayer, setShowLayer] = useState(true);
+	const [showLayer, setShowLayer] = useState(true);
 
-  return (
-    <>
-      <TopToolbar>
-        <Button
-          color="primary"
-          variant={showLayer ? "contained" : "outlined"}
-          onClick={() => setShowLayer(!showLayer)}
-        >
-          WMS
-        </Button>
-      </TopToolbar>
-      <MlWmsLayer visible={showLayer} {...props} />
-    </>
-  );
+	return (
+		<>
+			<TopToolbar>
+				<Button
+					color="primary"
+					variant={showLayer ? "contained" : "outlined"}
+					onClick={() => setShowLayer(!showLayer)}
+				>
+					WMS
+				</Button>
+			</TopToolbar>
+			<MlWmsLayer visible={showLayer} {...props} />
+		</>
+	);
 };
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {
-  url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
-  urlParameters: {
-    layers: "nw_uraufnahme_rw",
-  },
+	url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
+	urlParameters: {
+		layers: "nw_uraufnahme_rw",
+	},
 };
 //

package/src/components/MlWmsLayer/MlWmsLayer.test.js

@@ -6,14 +6,14 @@ import { uuid_regex } from "../../setupTests";
 const testComponent = <MlWmsLayer url="mock" urlParameters={{ layers: "mock" }} />;
 
 layerRemovalTest(
-  "<MlWmsLayer />",
-  testComponent,
-  new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
-  "MlWmsLayer-{uuid}"
+	"<MlWmsLayer />",
+	testComponent,
+	new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
+	"MlWmsLayer-{uuid}"
 );
 sourceRemovalTest(
-  "<MlWmsLayer />",
-  testComponent,
-  new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
-  "MlWmsLayer-{uuid}"
+	"<MlWmsLayer />",
+	testComponent,
+	new RegExp('^.*"MlWmsLayer-' + uuid_regex + '".*$'),
+	"MlWmsLayer-{uuid}"
 );