@mapcomponents/react-maplibre 0.1.32 → 0.1.35

package/src/components/MlTransitionGeoJsonLayer/{MlTransitionGeoJsonLayer.js → MlTransitionGeoJsonLayer.tsx}

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import PropTypes from "prop-types";
 
 import * as turf from "@turf/turf";
 
@@ -7,28 +6,95 @@ import useMap from "../../hooks/useMap";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import { Feature, FeatureCollection } from "@turf/turf";
 
 const msPerStep = 50;
 
+interface MlTransitionGeoJsonLayerProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: string;
+  /**
+   * Type of the layer that will be added to the MapLibre instance.
+   * Possible values: "line", "circle", "fill"
+   */
+  type: string;
+  /**
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: any;
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  paint: any;
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: any;
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options: any;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: Feature | FeatureCollection;
+  /**
+   * Id of an existing layer in the mapLibre instance to help specify the layer order
+   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   */
+  insertBeforeLayer: string;
+  /**
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   */
+  onClick: Function;
+  /**
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   */
+  onHover: Function;
+  /**
+   * Leave event handler that is executed whenever a geometry rendered by this component is
+   * left/unhovered.
+   */
+  onLeave: Function;
+  /**
+   * Creates transition animation whenever the geojson prop changes.
+   * Only works with layer type "line" and LineString GeoJSON data.
+   */
+  transitionTime: number;
+}
+
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
- *
- * @component
  */
-const MlTransitionGeoJsonLayer = (props) => {
+const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
   const { geojson, ...restProps } = props;
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
   const initializedRef = useRef(false);
 
   // transition effect variables
-  const oldGeojsonRef = useRef(null);
+  const oldGeojsonRef = useRef<Feature | FeatureCollection>();
   const transitionInProgressRef = useRef(false);
   const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
-  const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
+  const [displayGeojson, setDisplayGeojson] = useState(
+    turf.featureCollection([])
+  );
 
   useEffect(() => {
     return () => {
@@ -76,10 +142,10 @@ const MlTransitionGeoJsonLayer = (props) => {
       props.type === "line" &&
       typeof props.transitionTime !== "undefined" &&
       props.transitionTime &&
-      typeof props.geojson.geometry !== "undefined" &&
+      typeof props.geojson !== "undefined" &&
       JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
     ) {
-      transitionToGeojson(props.geojson);
+      transitionToGeojson();
       oldGeojsonRef.current = props.geojson;
     }
   }, [props, transitionToGeojson]);
@@ -99,67 +165,4 @@ const MlTransitionGeoJsonLayer = (props) => {
   );
 };
 
-MlTransitionGeoJsonLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Type of the layer that will be added to the MapLibre instance.
-   * Possible values: "line", "circle", "fill"
-   */
-  type: PropTypes.string,
-  /**
-   * Layout property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  layout: PropTypes.object,
-  /**
-   * Paint property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  paint: PropTypes.object,
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides: PropTypes.object,
-  /**
-   * Javascript object that is spread into the addLayer commands first parameter.
-   */
-  options: PropTypes.object,
-  /**
-   * GeoJSON data that is supposed to be rendered by this component.
-   */
-  geojson: PropTypes.object,
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer: PropTypes.string,
-  /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-   */
-  onClick: PropTypes.func,
-  /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-   */
-  onHover: PropTypes.func,
-  /**
-   * Leave event handler that is executed whenever a geometry rendered by this component is
-   * left/unhovered.
-   */
-  onLeave: PropTypes.func,
-  /**
-   * Creates transition animation whenever the geojson prop changes.
-   * Only works with layer type "line" and LineString GeoJSON data.
-   */
-  transitionTime: PropTypes.number,
-};
-
 export default MlTransitionGeoJsonLayer;

package/src/components/MlVectorTileLayer/MlVectorTileLayer.doc.en.md

@@ -0,0 +1 @@
+Presentation of vector tiles.

package/src/components/MlVectorTileLayer/{MlVectorTileLayer.js → MlVectorTileLayer.tsx}

@@ -2,17 +2,31 @@ import React, { useRef, useEffect } from "react";
 import useMap from "../../hooks/useMap";
 import PropTypes from "prop-types";
 
+interface MlVectorTileLayerProps {
+  mapId?: string;
+  insertBeforeLayer?: string;
+  layerId?: string;
+  sourceOptions?: any;
+  url?: string;
+  layers?: any;
+}
+
 /**
  * Adds a vector-tile source and 0...n vector-tile-layers to the MapLibre instance referenced by
  * props.mapId
  *
  * @component
  */
-const MlVectorTileLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+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 layerId = useRef(
+    props.layerId || "MlVectorTileLayer-" + mapHook.componentId
+  );
   const layerPaintConfsRef = useRef({});
   const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
@@ -58,7 +72,9 @@ const MlVectorTileLayer = (props) => {
         mapHook.componentId
       );
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+      layerLayoutConfsRef.current[key] = JSON.stringify(
+        props.layers[key].layout
+      );
     }
   }, [mapHook.map, props]);
 
@@ -66,13 +82,13 @@ const MlVectorTileLayer = (props) => {
     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.getLayer(layerIdsRef.current[key])) {
+      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.setPaintProperty(
+            mapHook.map.map.setPaintProperty(
               layerIdsRef.current[key],
               paintKey,
               props.layers[key].paint[paintKey]
@@ -86,7 +102,7 @@ const MlVectorTileLayer = (props) => {
 
         if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
           for (let layoutKey in props.layers[key].layout) {
-            mapHook.map.setLayoutProperty(
+            mapHook.map.map.setLayoutProperty(
               layerIdsRef.current[key],
               layoutKey,
               props.layers[key].layout[layoutKey]

package/src/components/MlWmsLayer/{MlWmsLayer.js → MlWmsLayer.tsx}

@@ -27,13 +27,24 @@ const defaultProps = {
   },
 };
 
+interface MlWmsLayerProps {
+  urlParameters?: any;
+  url: string;
+  visible?: boolean;
+  attribution?: string;
+  mapId?: string;
+  sourceOptions?: any;
+  layerOptions?: any;
+  insertBeforeLayer?: string;
+  layerId?: string;
+}
 /**
  * Adds a WMS raster source & layer to the maplibre-gl instance
  *
  * @param {object} props
  * @param {object} props.urlParameters URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object
  * @param {string} props.url WMS URL
- * @param {bool} props.visible Sets layer "visibility" property to "visible" if true or "none" if false
+ * @param {bool}   props.visible Sets layer "visibility" property to "visible" if true or "none" if false
  * @param {string} props.attribution MapLibre attribution shown in the bottom right of the map, if this layer is visible
  * @param {string} props.mapId Id of the target MapLibre instance in mapContext
  * @param {object} props.sourceOptions Object that is passed to the MapLibre.addSource call as config option parameter
@@ -43,8 +54,11 @@ const defaultProps = {
  *
  * @component
  */
-const MlWmsLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+const MlWmsLayer = (props:MlWmsLayerProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
 
   const initializedRef = useRef(false);
   const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
@@ -69,7 +83,8 @@ const MlWmsLayer = (props) => {
     };
     let urlParams = new URLSearchParams(urlParamsObj);
     let urlParamsStr =
-      decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+      decodeURIComponent(urlParams.toString()) +
+      "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 
     mapHook.map.addSource(
       layerId.current,
@@ -95,7 +110,7 @@ const MlWmsLayer = (props) => {
     );
 
     if (!props.visible) {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
   }, [mapHook, props]);
 
@@ -104,9 +119,9 @@ const MlWmsLayer = (props) => {
 
     // toggle layer visibility by changing the layout object's visibility property
     if (props.visible) {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "visible");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "visible");
     } else {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
   }, [props.visible, mapHook.map]);
 

package/src/components/MlWmsLoader/MlWmsLoader.doc.en.md

@@ -0,0 +1 @@
+Presentation of WMS services with the feature of an information query.

package/src/components/MlWmsLoader/{MlWmsLoader.js → MlWmsLoader.tsx}

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
-import PropTypes from "prop-types";
 
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
 import { v4 as uuidv4 } from "uuid";
 
@@ -15,9 +15,11 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import IconButton from "@mui/material/IconButton";
+import {LngLat} from "maplibre-gl";
+import MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
 
 var originShift = (2 * Math.PI * 6378137) / 2.0;
-const lngLatToMeters = function (lnglat, validate, accuracy = { enable: true, decimal: 1 }) {
+const lngLatToMeters = function (lnglat:LngLat, accuracy = { enable: true, decimal: 1 }) {
   var lng = lnglat.lng;
   var lat = lnglat.lat;
   var x = (lng * originShift) / 180.0;
@@ -29,6 +31,32 @@ const lngLatToMeters = function (lnglat, validate, accuracy = { enable: true, de
   }
   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;
+};
+
 /**
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
  * offered by the WMS.
@@ -37,21 +65,23 @@ const lngLatToMeters = function (lnglat, validate, accuracy = { enable: true, de
  *
  * @component
  */
-const MlWmsLoader = (props) => {
+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 = useContext(MapContext);
-  const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl } = useWms({
+  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(undefined);
+  const mapRef = useRef<MapLibreGlWrapper>();
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
-  const [layers, setLayers] = useState([]);
+  const [layers, setLayers] = useState<Array<typeof layerType>>([]);
 
   const [featureInfoLngLat, setFeatureInfoLngLat] = useState(undefined);
-  const [featureInfoContent, setFeatureInfoContent] = useState(undefined);
+  const [featureInfoContent, setFeatureInfoContent] = useState<string|undefined>(undefined);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -79,9 +109,10 @@ const MlWmsLoader = (props) => {
 
   const getFeatureInfo = useCallback(
     (ev) => {
+      if(!mapRef.current) return;
       setFeatureInfoLngLat(undefined);
       setFeatureInfoContent(undefined);
-      let _bounds = mapRef.current.getBounds();
+      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]];
@@ -96,13 +127,13 @@ const MlWmsLoader = (props) => {
             : "text/plain",
         FEATURE_COUNT: "10",
         LAYERS: layers
-          .map((layer, idx) => (layer.visible && layer.queryable ? layer.Name : undefined))
+          .map((layer: typeof layerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
           .filter((n) => n),
         QUERY_LAYERS: layers
-          .map((layer, idx) => (layer.visible && layer.queryable ? layer.Name : undefined))
+          .map((layer: typeof layerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
           .filter((n) => n),
-        WIDTH: mapRef.current._container.clientWidth,
-        HEIGHT: mapRef.current._container.clientHeight,
+        WIDTH: mapRef.current?.map._container.clientWidth,
+        HEIGHT: mapRef.current?.map._container.clientHeight,
         srs: "EPSG:3857",
         CRS: "EPSG:3857",
         version: "1.3.0",
@@ -113,7 +144,7 @@ const MlWmsLoader = (props) => {
         buffer: "50",
       };
 
-      let _gfiUrl = getFeatureInfoUrl;
+      let _gfiUrl : string | undefined = getFeatureInfoUrl;
       let _gfiUrlParts;
       if (_gfiUrl?.indexOf?.("?") !== -1) {
         _gfiUrlParts = props.url.split("?");
@@ -126,7 +157,7 @@ const MlWmsLoader = (props) => {
         ..._getFeatureInfoUrlParams,
       };
       // create URLSearchParams object to assemble the URL Parameters
-      let urlParams = new URLSearchParams(urlParamsObj);
+      let urlParams = new URLSearchParams(urlParamsObj.toString());
 
       fetch(props.url + "?" + urlParams.toString())
         .then((res) => {
@@ -151,9 +182,9 @@ const MlWmsLoader = (props) => {
 
     mapRef.current.on("click", _getFeatureInfo, componentId.current);
     return () => {
-      mapRef.current?.off?.("click", _getFeatureInfo);
+      mapRef.current?.map.off?.("click", _getFeatureInfo);
     };
-  }, [getFeatureInfoUrl]);
+  }, [getFeatureInfo]);
 
   useEffect(() => {
     if (!capabilities?.Service) return;
@@ -167,9 +198,9 @@ const MlWmsLoader = (props) => {
         "MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
       );
 
-      let _LatLonBoundingBox;
+      let _LatLonBoundingBox: Array<number> = [];
       setLayers(
-        capabilities?.Capability?.Layer?.Layer.map((layer, idx) => {
+        capabilities?.Capability?.Layer?.Layer.map((layer: typeof layerType, idx: number) => {
           if (idx === 0) {
             _LatLonBoundingBox = layer.LatLonBoundingBox;
             if (!_LatLonBoundingBox) {
@@ -182,8 +213,8 @@ const MlWmsLoader = (props) => {
       );
 
       // zoom to extent of first layer
-      if (mapRef.current && _LatLonBoundingBox?.length > 3) {
-        mapRef.current.fitBounds([
+      if (mapRef.current && _LatLonBoundingBox.length > 3) {
+        mapRef.current.map.fitBounds([
           [_LatLonBoundingBox[0], _LatLonBoundingBox[1]],
           [_LatLonBoundingBox[2], _LatLonBoundingBox[3]],
         ]);
@@ -206,7 +237,7 @@ const MlWmsLoader = (props) => {
       {error && <p>{error}</p>}
       <h3 key="title">{capabilities?.Service?.Title}</h3>
       {console.log(componentId.current)}
-      {capabilities?.Capability?.Layer?.Layer.map((layer, idx) => (
+      {capabilities?.Capability?.Layer?.Layer.map((idx: number) => (
         <MlLayer
           layerId={"Order-" + componentId.current + "-" + idx}
           key={componentId.current + "-" + idx}
@@ -219,7 +250,7 @@ const MlWmsLoader = (props) => {
       ))}
       <List dense key="layers">
         {wmsUrl &&
-          layers?.map?.((layer, idx) => {
+          layers?.map?.((layer: typeof layerType, idx) => {
             return layer?.Name ? (
               <ListItem
                 key={layer.Name + idx}
@@ -228,7 +259,7 @@ const MlWmsLoader = (props) => {
                     edge="end"
                     aria-label="toggle visibility"
                     onClick={() => {
-                      let _layers = [...layers];
+                      let _layers: Array<typeof layerType> = [...layers];
                       _layers[idx].visible = !_layers[idx].visible;
                       setLayers([..._layers]);
                     }}
@@ -272,27 +303,4 @@ MlWmsLoader.defaultProps = {
   },
 };
 
-MlWmsLoader.propTypes = {
-  /**
-   * WMS URL
-   */
-  url: PropTypes.string.isRequired,
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * URL parameters that will be used in the getCapabilities request
-   */
-  urlParameters: PropTypes.object,
-  /**
-   * URL parameters that will be added when requesting WMS capabilities
-   */
-  wmsUrlParameters: PropTypes.object,
-  /**
-   * URL parameters that will be added when requesting tiles
-   */
-  layerUrlParameters: PropTypes.object,
-};
-
 export default MlWmsLoader;

package/src/custom.d.tsx

@@ -0,0 +1,26 @@
+
+declare module "*.svg" {
+  const content: any;
+  export default content;
+  export { content as ReactComponent };
+}
+declare module "*.js" {
+  const content: any;
+  export default content;
+}
+
+//declare module '@mapcomponents/react-core';
+type MapContextType= {
+  mapIds: [string?];
+  mapExists: Function;
+  maps: [];
+  map: any,
+  getMap: Function;
+  setMap: Function;
+};
+
+interface GeoJSON {
+  type: string,
+  features?: any
+  geometry?: any
+}