@mapcomponents/react-maplibre 0.1.57 → 0.1.58

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -19,41 +19,41 @@ import MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
 
 var originShift = (2 * Math.PI * 6378137) / 2.0;
 const lngLatToMeters = function (lnglat: LngLat, accuracy = { enable: true, decimal: 1 }) {
-  var lng = lnglat.lng;
-  var lat = lnglat.lat;
-  var x = (lng * originShift) / 180.0;
-  var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);
-  y = (y * originShift) / 180.0;
-  if (accuracy.enable) {
-    x = Number(x.toFixed(accuracy.decimal));
-    y = Number(y.toFixed(accuracy.decimal));
-  }
-  return [x, y];
+	var lng = lnglat.lng;
+	var lat = lnglat.lat;
+	var x = (lng * originShift) / 180.0;
+	var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);
+	y = (y * originShift) / 180.0;
+	if (accuracy.enable) {
+		x = Number(x.toFixed(accuracy.decimal));
+		y = Number(y.toFixed(accuracy.decimal));
+	}
+	return [x, y];
 };
 
 interface MlWmsLoaderProps {
-  /**
-   * WMS URL
-   */
-  url: string;
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: string;
-  /**
-   * URL parameters that will be used in the getCapabilities request
-   */
-  urlParameters: object;
-  /**
-   * URL parameters that will be added when requesting WMS capabilities
-   */
-  wmsUrlParameters: object;
-  /**
-   * URL parameters that will be added when requesting tiles
-   */
-  layerUrlParameters: object;
-  lngLat: LngLat;
-  idPrefix: string;
+	/**
+	 * WMS URL
+	 */
+	url: string;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: string;
+	/**
+	 * URL parameters that will be used in the getCapabilities request
+	 */
+	urlParameters: object;
+	/**
+	 * URL parameters that will be added when requesting WMS capabilities
+	 */
+	wmsUrlParameters: object;
+	/**
+	 * URL parameters that will be added when requesting tiles
+	 */
+	layerUrlParameters: object;
+	lngLat: LngLat;
+	idPrefix: string;
 }
 
 /**
@@ -65,253 +65,253 @@ interface MlWmsLoaderProps {
  * @component
  */
 const MlWmsLoader = (props: MlWmsLoaderProps) => {
-  // 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 { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: any = useWms({
-    url: undefined,
-    urlParameters: props.urlParameters,
-  });
-  let layerType: {
-    visible: boolean;
-    queryable: boolean;
-    Name: string;
-    Title: string;
-    LatLonBoundingBox: Array<number>;
-    EX_GeographicBoundingBox: Array<number>;
-    Abstract: any;
-  };
+	// 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 { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: any = useWms({
+		url: undefined,
+		urlParameters: props.urlParameters,
+	});
+	let layerType: {
+		visible: boolean;
+		queryable: boolean;
+		Name: string;
+		Title: string;
+		LatLonBoundingBox: Array<number>;
+		EX_GeographicBoundingBox: Array<number>;
+		Abstract: any;
+	};
 
-  const initializedRef = useRef(false);
-  const mapRef = useRef<MapLibreGlWrapper>();
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
-  const [layers, setLayers] = useState<Array<typeof layerType>>([]);
+	const initializedRef = useRef(false);
+	const mapRef = useRef<MapLibreGlWrapper>();
+	const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
+	const [layers, setLayers] = useState<Array<typeof layerType>>([]);
 
-  const [featureInfoLngLat, setFeatureInfoLngLat] = useState<{lng:number,lat:number} | undefined>();
-  const [featureInfoContent, setFeatureInfoContent] = useState<string | undefined>(undefined);
+	const [featureInfoLngLat, setFeatureInfoLngLat] = useState<{lng:number,lat:number} | undefined>();
+	const [featureInfoContent, setFeatureInfoContent] = useState<string | undefined>(undefined);
 
-  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 (!initializedRef.current) return;
+	useEffect(() => {
+		if (!initializedRef.current) return;
 
-    setUrl(props.url);
-  }, [props.url]);
+		setUrl(props.url);
+	}, [props.url]);
 
-  const getFeatureInfo = useCallback(
-    (ev) => {
-      if (!mapRef.current) return;
-      setFeatureInfoLngLat(undefined);
-      setFeatureInfoContent(undefined);
-      let _bounds = mapRef.current.map.getBounds();
-      let _sw = lngLatToMeters(_bounds._sw);
-      let _ne = lngLatToMeters(_bounds._ne);
-      let bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
-      let _getFeatureInfoUrlParams = {
-        REQUEST: "GetFeatureInfo",
+	const getFeatureInfo = useCallback(
+		(ev) => {
+			if (!mapRef.current) return;
+			setFeatureInfoLngLat(undefined);
+			setFeatureInfoContent(undefined);
+			let _bounds = mapRef.current.map.getBounds();
+			let _sw = lngLatToMeters(_bounds._sw);
+			let _ne = lngLatToMeters(_bounds._ne);
+			let bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
+			let _getFeatureInfoUrlParams = {
+				REQUEST: "GetFeatureInfo",
 
-        BBOX: bbox.join(","),
-        SERVICE: "WMS",
-        INFO_FORMAT:
-          capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf("text/html") !== -1
-            ? "text/html"
-            : "text/plain",
-        FEATURE_COUNT: "10",
-        LAYERS: layers
-          .map((layer: typeof layerType) =>
-            layer.visible && layer.queryable ? layer.Name : undefined
-          )
-          .filter((n) => n),
-        QUERY_LAYERS: layers
-          .map((layer: typeof layerType) =>
-            layer.visible && layer.queryable ? layer.Name : undefined
-          )
-          .filter((n) => n),
-        WIDTH: mapRef.current?.map._container.clientWidth,
-        HEIGHT: mapRef.current?.map._container.clientHeight,
-        srs: "EPSG:3857",
-        CRS: "EPSG:3857",
-        version: "1.3.0",
-        X: ev.point.x,
-        Y: ev.point.y,
-        I: ev.point.x,
-        J: ev.point.y,
-        buffer: "50",
-      };
+				BBOX: bbox.join(","),
+				SERVICE: "WMS",
+				INFO_FORMAT:
+					capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf("text/html") !== -1
+						? "text/html"
+						: "text/plain",
+				FEATURE_COUNT: "10",
+				LAYERS: layers
+					.map((layer: typeof layerType) =>
+						layer.visible && layer.queryable ? layer.Name : undefined
+					)
+					.filter((n) => n),
+				QUERY_LAYERS: layers
+					.map((layer: typeof layerType) =>
+						layer.visible && layer.queryable ? layer.Name : undefined
+					)
+					.filter((n) => n),
+				WIDTH: mapRef.current?.map._container.clientWidth,
+				HEIGHT: mapRef.current?.map._container.clientHeight,
+				srs: "EPSG:3857",
+				CRS: "EPSG:3857",
+				version: "1.3.0",
+				X: ev.point.x,
+				Y: ev.point.y,
+				I: ev.point.x,
+				J: ev.point.y,
+				buffer: "50",
+			};
 
-      let _gfiUrl: string | undefined = getFeatureInfoUrl;
-      let _gfiUrlParts;
-      if (_gfiUrl?.indexOf?.("?") !== -1) {
-        _gfiUrlParts = props.url.split("?");
-        _gfiUrl = _gfiUrlParts[0];
-      }
-      let _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
+			let _gfiUrl: string | undefined = getFeatureInfoUrl;
+			let _gfiUrlParts;
+			if (_gfiUrl?.indexOf?.("?") !== -1) {
+				_gfiUrlParts = props.url.split("?");
+				_gfiUrl = _gfiUrlParts[0];
+			}
+			let _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
 
-      let urlParamsObj = {
-        ...Object.fromEntries(_urlParamsFromUrl),
-        ..._getFeatureInfoUrlParams,
-      };
-      // create URLSearchParams object to assemble the URL Parameters
-      // "as any" can be removed once the URLSearchParams ts spec is fixed
-      let urlParams = new URLSearchParams(urlParamsObj as any);
+			let urlParamsObj = {
+				...Object.fromEntries(_urlParamsFromUrl),
+				..._getFeatureInfoUrlParams,
+			};
+			// create URLSearchParams object to assemble the URL Parameters
+			// "as any" can be removed once the URLSearchParams ts spec is fixed
+			let urlParams = new URLSearchParams(urlParamsObj as any);
 
-      fetch(props.url + "?" + urlParams.toString())
-        .then((res) => {
-          if (!res.ok) {
-            throw new Error("FeatureInfo could not be fetched");
-          }
-          return res.text();
-        })
-        .then((text) => {
-          setFeatureInfoLngLat(ev.lngLat);
-          setFeatureInfoContent(text);
-        })
-        .catch((error) => console.log(error));
-    },
-    [capabilities, getFeatureInfoUrl]
-  );
+			fetch(props.url + "?" + urlParams.toString())
+				.then((res) => {
+					if (!res.ok) {
+						throw new Error("FeatureInfo could not be fetched");
+					}
+					return res.text();
+				})
+				.then((text) => {
+					setFeatureInfoLngLat(ev.lngLat);
+					setFeatureInfoContent(text);
+				})
+				.catch((error) => console.log(error));
+		},
+		[capabilities, getFeatureInfoUrl]
+	);
 
-  useEffect(() => {
-    if (!mapRef.current) return;
+	useEffect(() => {
+		if (!mapRef.current) return;
 
-    const _getFeatureInfo = getFeatureInfo;
+		const _getFeatureInfo = getFeatureInfo;
 
-    mapRef.current.on("click", _getFeatureInfo, componentId.current);
-    return () => {
-      mapRef.current?.map.off?.("click", _getFeatureInfo);
-    };
-  }, [getFeatureInfo]);
+		mapRef.current.on("click", _getFeatureInfo, componentId.current);
+		return () => {
+			mapRef.current?.map.off?.("click", _getFeatureInfo);
+		};
+	}, [getFeatureInfo]);
 
-  useEffect(() => {
-    if (!capabilities?.Service) return;
+	useEffect(() => {
+		if (!capabilities?.Service) return;
 
-    if (capabilities?.Capability?.Layer?.SRS?.indexOf?.("EPSG:3857") === -1) {
-      console.log(
-        "MlWmsLoader (" + capabilities.Service.Title + "): No WGS 84/Pseudo-Mercator support"
-      );
-    } else {
-      console.log(
-        "MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
-      );
+		if (capabilities?.Capability?.Layer?.SRS?.indexOf?.("EPSG:3857") === -1) {
+			console.log(
+				"MlWmsLoader (" + capabilities.Service.Title + "): No WGS 84/Pseudo-Mercator support"
+			);
+		} else {
+			console.log(
+				"MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
+			);
 
-      let _LatLonBoundingBox: Array<number> = [];
-      setLayers(
-        capabilities?.Capability?.Layer?.Layer.map((layer: typeof layerType, idx: number) => {
-          if (idx === 0) {
-            _LatLonBoundingBox = layer.LatLonBoundingBox;
-            if (!_LatLonBoundingBox) {
-              _LatLonBoundingBox = layer.EX_GeographicBoundingBox;
-            }
-          }
-          layer.visible = capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true;
-          return layer;
-        })
-      );
+			let _LatLonBoundingBox: Array<number> = [];
+			setLayers(
+				capabilities?.Capability?.Layer?.Layer.map((layer: typeof layerType, idx: number) => {
+					if (idx === 0) {
+						_LatLonBoundingBox = layer.LatLonBoundingBox;
+						if (!_LatLonBoundingBox) {
+							_LatLonBoundingBox = layer.EX_GeographicBoundingBox;
+						}
+					}
+					layer.visible = capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true;
+					return layer;
+				})
+			);
 
-      // zoom to extent of first layer
-      if (mapRef.current && _LatLonBoundingBox.length > 3) {
-        mapRef.current.map.fitBounds([
-          [_LatLonBoundingBox[0], _LatLonBoundingBox[1]],
-          [_LatLonBoundingBox[2], _LatLonBoundingBox[3]],
-        ]);
-      }
-    }
-  }, [capabilities]);
+			// zoom to extent of first layer
+			if (mapRef.current && _LatLonBoundingBox.length > 3) {
+				mapRef.current.map.fitBounds([
+					[_LatLonBoundingBox[0], _LatLonBoundingBox[1]],
+					[_LatLonBoundingBox[2], _LatLonBoundingBox[3]],
+				]);
+			}
+		}
+	}, [capabilities]);
 
-  useEffect(() => {
-    if (!mapContext?.mapExists?.(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.map) 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);
-    console.log("set url " + props.url);
-    setUrl(props.url);
-  }, [mapContext.mapIds, mapContext, props.mapId, props.url]);
+	useEffect(() => {
+		if (!mapContext?.mapExists?.(props.mapId) || initializedRef.current) return;
+		// the MapLibre-gl instance (mapContext.map) 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);
+		console.log("set url " + props.url);
+		setUrl(props.url);
+	}, [mapContext.mapIds, mapContext, props.mapId, props.url]);
 
-  return (
-    <>
-      {error && <p>{error}</p>}
-      <h3 key="title">{capabilities?.Service?.Title}</h3>
-      {console.log(componentId.current)}
-      {capabilities?.Capability?.Layer?.Layer.map((layer: any, idx: number) => (
-        <MlLayer
-          layerId={"Order-" + componentId.current + "-" + idx}
-          key={componentId.current + "-" + idx}
-          {...(idx > 0
-            ? {
-                insertBeforeLayer: "Order-" + componentId.current + "-" + (idx - 1),
-              }
-            : undefined)}
-        />
-      ))}
-      <List dense key="layers">
-        {wmsUrl &&
-          layers?.map?.((layer: typeof layerType, idx) => {
-            return layer?.Name ? (
-              <ListItem
-                key={layer.Name + idx}
-                secondaryAction={
-                  <IconButton
-                    edge="end"
-                    aria-label="toggle visibility"
-                    onClick={() => {
-                      let _layers: Array<typeof layerType> = [...layers];
-                      _layers[idx].visible = !_layers[idx].visible;
-                      setLayers([..._layers]);
-                    }}
-                  >
-                    {layers[idx].visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-                  </IconButton>
-                }
-              >
-                <ListItemText primary={layer?.Title} secondary={layer?.Abstract} />
-                <MlWmsLayer
-                  key={layer?.Name + idx}
-                  url={wmsUrl}
-                  urlParameters={{ ...props.wmsUrlParameters, layers: layer?.Name }}
-                  visible={layers[idx].visible}
-                  insertBeforeLayer={"Order-" + componentId.current + "-" + idx}
-                />
-              </ListItem>
-            ) : (
-              <></>
-            );
-          })}
-      </List>
-      <p key="description" style={{ fontSize: ".7em" }}>
-        {capabilities?.Capability?.Layer?.Abstract}
-      </p>
+	return (
+		<>
+			{error && <p>{error}</p>}
+			<h3 key="title">{capabilities?.Service?.Title}</h3>
+			{console.log(componentId.current)}
+			{capabilities?.Capability?.Layer?.Layer.map((layer: any, idx: number) => (
+				<MlLayer
+					layerId={"Order-" + componentId.current + "-" + idx}
+					key={componentId.current + "-" + idx}
+					{...(idx > 0
+						? {
+								insertBeforeLayer: "Order-" + componentId.current + "-" + (idx - 1),
+							}
+						: undefined)}
+				/>
+			))}
+			<List dense key="layers">
+				{wmsUrl &&
+					layers?.map?.((layer: typeof layerType, idx) => {
+						return layer?.Name ? (
+							<ListItem
+								key={layer.Name + idx}
+								secondaryAction={
+									<IconButton
+										edge="end"
+										aria-label="toggle visibility"
+										onClick={() => {
+											let _layers: Array<typeof layerType> = [...layers];
+											_layers[idx].visible = !_layers[idx].visible;
+											setLayers([..._layers]);
+										}}
+									>
+										{layers[idx].visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+									</IconButton>
+								}
+							>
+								<ListItemText primary={layer?.Title} secondary={layer?.Abstract} />
+								<MlWmsLayer
+									key={layer?.Name + idx}
+									url={wmsUrl}
+									urlParameters={{ ...props.wmsUrlParameters, layers: layer?.Name }}
+									visible={layers[idx].visible}
+									insertBeforeLayer={"Order-" + componentId.current + "-" + idx}
+								/>
+							</ListItem>
+						) : (
+							<></>
+						);
+					})}
+			</List>
+			<p key="description" style={{ fontSize: ".7em" }}>
+				{capabilities?.Capability?.Layer?.Abstract}
+			</p>
 
-      {featureInfoLngLat && <MlMarker {...featureInfoLngLat} content={featureInfoContent} />}
-    </>
-  );
+			{featureInfoLngLat && <MlMarker {...featureInfoLngLat} content={featureInfoContent} />}
+		</>
+	);
 };
 
 MlWmsLoader.defaultProps = {
-  url: "",
-  urlParameters: {
-    SERVICE: "WMS",
-    VERSION: "1.3.0",
-    REQUEST: "GetCapabilities",
-  },
-  wmsUrlParameters: {
-    TRANSPARENT: "TRUE",
-  },
+	url: "",
+	urlParameters: {
+		SERVICE: "WMS",
+		VERSION: "1.3.0",
+		REQUEST: "GetCapabilities",
+	},
+	wmsUrlParameters: {
+		TRANSPARENT: "TRUE",
+	},
 };
 
 export default MlWmsLoader;