WMS popup functionality

src/components/MapView/DateSelector/index.tsx

@@ -48,7 +48,11 @@ const Input = forwardRef(
     );
   },
 );
-function DateSelector({ availableDates = [], classes }: DateSelectorProps) {
+function DateSelector({
+  availableDates = [],
+  classes,
+  selectedDateRef,
+}: DateSelectorProps) {
   const dispatch = useDispatch();
   const { startDate: stateStartDate } = useSelector(dateRangeSelector);
 
@@ -215,6 +219,7 @@ function DateSelector({ availableDates = [], classes }: DateSelectorProps) {
             includeDates={availableDates.map(
               d => new Date(d + USER_DATE_OFFSET),
             )}
+            ref={selectedDateRef}
           />
 
           <Hidden smUp>
@@ -354,6 +359,7 @@ const styles = (theme: Theme) =>
 
 export interface DateSelectorProps extends WithStyles<typeof styles> {
   availableDates?: number[];
+  selectedDateRef: React.RefObject<DatePicker>;
 }
 
 export default withStyles(styles)(DateSelector);

src/components/MapView/Layers/ImpactLayer/index.tsx

@@ -4,7 +4,7 @@ import { GeoJSONLayer } from 'react-mapbox-gl';
 import { FillPaint, LinePaint } from 'mapbox-gl';
 import { get } from 'lodash';
 import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core';
-import { Extent } from '../raster-utils';
+import { getExtent, Extent } from '../raster-utils';
 import { legendToStops } from '../layer-utils';
 import { ImpactLayerProps } from '../../../../config/types';
 import { LayerDefinitions } from '../../../../config/utils';
@@ -41,27 +41,21 @@ const ImpactLayer = ({ classes, layer }: ComponentProps) => {
     >) || {};
   const dispatch = useDispatch();
 
-  // TODO - Use bbox on the admin boundaries instead.
-  const bounds = map && map.getBounds();
-  const minX = bounds ? bounds.getWest() : 0;
-  const maxX = bounds ? bounds.getEast() : 0;
-  const minY = bounds ? bounds.getSouth() : 0;
-  const maxY = bounds ? bounds.getNorth() : 0;
-
+  const extent: Extent = getExtent(map);
   useEffect(() => {
     // For now, assume that if we have layer data, we don't need to refetch. This could change down the line if we
     // want to dynamically re-fetch data based on changing map bounds.
     // Only fetch once we actually know the extent
+    const [minX, , maxX] = extent;
     if (
       selectedDate &&
       (!data || date !== selectedDate) &&
       minX !== 0 &&
       maxX !== 0
     ) {
-      const extent: Extent = [minX, minY, maxX, maxY];
       dispatch(loadLayerData({ layer, extent, date: selectedDate }));
     }
-  }, [dispatch, layer, maxX, maxY, minX, minY, data, selectedDate, date]);
+  }, [dispatch, layer, extent, data, selectedDate, date]);
 
   if (!data) {
     return selectedDate ? null : (

src/components/MapView/Layers/raster-utils.ts

@@ -3,6 +3,7 @@ import bbox from '@turf/bbox';
 import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
 import * as GeoTIFF from 'geotiff';
 import { buffer } from 'd3-fetch';
+import { Map as MapBoxMap } from 'mapbox-gl';
 import { formatUrl } from '../../../utils/server-utils';
 
 export type TransformMatrix = [number, number, number, number, number, number];
@@ -322,3 +323,15 @@ export function pixelsInFeature(
     );
   }, [] as number[]);
 }
+
+export function getExtent(map?: MapBoxMap): Extent {
+  // TODO - Use bbox on the admin boundaries instead.
+  const bounds = map?.getBounds();
+
+  const minX = bounds?.getWest();
+  const maxX = bounds?.getEast();
+  const minY = bounds?.getSouth();
+  const maxY = bounds?.getNorth();
+
+  return [minX, minY, maxX, maxY].map(val => val || 0) as Extent;
+}

src/components/MapView/index.tsx

@@ -1,4 +1,10 @@
-import React, { ComponentType, createElement, useEffect, useMemo } from 'react';
+import React, {
+  ComponentType,
+  createElement,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   CircularProgress,
@@ -11,6 +17,7 @@ import { countBy, pickBy } from 'lodash';
 import moment from 'moment';
 // map
 import ReactMapboxGl from 'react-mapbox-gl';
+import DatePicker from 'react-datepicker';
 import { Map } from 'mapbox-gl';
 import MapTooltip from './MapTooltip';
 import Legends from './Legends';
@@ -36,7 +43,11 @@ import {
   layersSelector,
 } from '../../context/mapStateSlice/selectors';
 import { addLayer, setMap, updateDateRange } from '../../context/mapStateSlice';
-import { hidePopup } from '../../context/tooltipStateSlice';
+import {
+  showPopup,
+  hidePopup,
+  addPopupData,
+} from '../../context/tooltipStateSlice';
 import {
   availableDatesSelector,
   isLoading as areDatesLoading,
@@ -50,8 +61,10 @@ import AnalysisLayer from './Layers/AnalysisLayer';
 import {
   DateCompatibleLayer,
   getPossibleDatesForLayer,
+  makeFeatureInfoRequest,
 } from '../../utils/server-utils';
 import { addNotification } from '../../context/notificationStateSlice';
+import { getActiveFeatureInfoLayers, getFeatureInfoParams } from './utils';
 import AlertForm from './AlertForm';
 
 const MapboxMap = ReactMapboxGl({
@@ -86,6 +99,8 @@ function MapView({ classes }: MapViewProps) {
 
   const dispatch = useDispatch();
 
+  const selectedDateRef = useRef<DatePicker>(null);
+
   const { startDate: selectedDate } = useSelector(dateRangeSelector);
   const serverAvailableDates = useSelector(availableDatesSelector);
   const selectedLayersWithDateSupport = selectedLayers
@@ -212,8 +227,43 @@ function MapView({ classes }: MapViewProps) {
         containerStyle={{
           height: '100%',
         }}
-        onClick={() => {
+        onClick={(map: Map, evt: any) => {
           dispatch(hidePopup());
+          // Get layers that have getFeatureInfo option.
+          const featureInfoLayers = getActiveFeatureInfoLayers(map);
+          if (featureInfoLayers.length === 0) {
+            return;
+          }
+
+          const dateFromRef = (selectedDateRef.current?.props.selected as Date)
+            .toISOString()
+            .split('T')[0];
+
+          const params = getFeatureInfoParams(map, evt, dateFromRef);
+          makeFeatureInfoRequest(featureInfoLayers, params).then(
+            (result: any) => {
+              if (result === null) {
+                return;
+              }
+              Object.keys(result).forEach(k => {
+                dispatch(
+                  addPopupData({
+                    [k]: {
+                      data: result[k],
+                      coordinates: evt.lngLat,
+                    },
+                  }),
+                );
+              });
+
+              dispatch(
+                showPopup({
+                  coordinates: evt.lngLat,
+                  locationName: '',
+                }),
+              );
+            },
+          );
         }}
       >
         <>
@@ -247,7 +297,10 @@ function MapView({ classes }: MapViewProps) {
         </Grid>
       </Grid>
       {selectedLayerDates.length > 0 && (
-        <DateSelector availableDates={selectedLayerDates} />
+        <DateSelector
+          availableDates={selectedLayerDates}
+          selectedDateRef={selectedDateRef}
+        />
       )}
     </Grid>
   );

src/components/MapView/utils.ts

@@ -0,0 +1,48 @@
+import { Map } from 'mapbox-gl';
+import { LayerDefinitions } from '../../config/utils';
+import { getExtent } from './Layers/raster-utils';
+import { WMSLayerProps, FeatureInfoType } from '../../config/types';
+
+export const getActiveFeatureInfoLayers = (map: Map): WMSLayerProps[] => {
+  const matchStr = 'layer-';
+  const layerIds =
+    map
+      .getStyle()
+      .layers?.filter(l => l.id.startsWith(matchStr))
+      .map(l => l.id.split(matchStr)[1]) ?? [];
+
+  if (layerIds.length === 0) {
+    return [];
+  }
+
+  const featureInfoLayers = Object.values(LayerDefinitions).filter(
+    l => layerIds.includes(l.id) && l.type === 'wms' && l.featureInfoProps,
+  );
+
+  if (featureInfoLayers.length === 0) {
+    return [];
+  }
+
+  return featureInfoLayers as WMSLayerProps[];
+};
+
+export const getFeatureInfoParams = (
+  map: Map,
+  evt: any,
+  date: string,
+): FeatureInfoType => {
+  const { x, y } = evt.point;
+  const bbox = getExtent(map);
+  const { clientWidth, clientHeight } = map.getContainer();
+
+  const params = {
+    bbox,
+    x: Math.floor(x),
+    y: Math.floor(y),
+    width: clientWidth,
+    height: clientHeight,
+    time: date,
+  };
+
+  return params;
+};

src/config/mozambique/layers.json

@@ -177,7 +177,17 @@
       "name": "Tropical Storms",
       "main": false
     },
-    "base_url": "https://geonode.wfp.org/geoserver"
+    "base_url": "https://geonode.wfp.org/geoserver",
+    "feature_info_props": {
+      "event_name": {
+        "type": "text",
+        "label": "Event name"
+      },
+      "pub_date": {
+        "type": "date",
+        "label": "Publication date"
+      }
+    }
   },
   "adamts_nodes": {
     "title": "Tropical Storms - Nodes",

src/config/types.ts

@@ -166,6 +166,17 @@ export class BoundaryLayerProps extends CommonLayerProps {
   adminLevelLocalNames: string[]; // Same as above, local to country
 }
 
+export enum LabelType {
+  Date = 'date',
+  Text = 'text',
+  Number = 'number',
+}
+
+interface featureInfoProps {
+  type: LabelType;
+  label: string;
+}
+
 export class WMSLayerProps extends CommonLayerProps {
   type: 'wms';
   baseUrl: string;
@@ -185,6 +196,9 @@ export class WMSLayerProps extends CommonLayerProps {
 
   @optional
   wcsConfig?: RawDataConfiguration;
+
+  @optional
+  featureInfoProps?: { [key: string]: featureInfoProps };
 }
 
 export class NSOLayerProps extends CommonLayerProps {
@@ -335,3 +349,25 @@ export type DateRangeType = {
   month: string;
   isFirstDay: boolean;
 };
+
+export interface FeatureInfoType {
+  bbox: number[];
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface requestFeatureInfo extends FeatureInfoType {
+  service: string;
+  request: string;
+  version: string;
+  exceptions: string;
+  infoFormat: string;
+  layers: string;
+  srs: string;
+  queryLayers: string;
+  featureCount: number;
+  format: string;
+  styles: string;
+}