[ERA-7681] - Map Drawing Tools

.env

@@ -9,7 +9,7 @@ REACT_APP_ROUTE_PREFIX=/
 REACT_APP_BASE_MAP_STYLES='mapbox://styles/vjoelm/ciobuir0n0061bdnj1c54oakh?optimize=true'
 
 # Feature flags
-REACT_APP_ENABLE_PATROL_NEW_UI=false
-REACT_APP_ENABLE_REPORT_NEW_UI=false
+REACT_APP_ENABLE_PATROL_NEW_UI=true
+REACT_APP_ENABLE_REPORT_NEW_UI=true
 REACT_APP_ENABLE_GEOPERMISSION_UI=true
 REACT_APP_ENABLE_EVENT_GEOMETRY=false

.env.development

@@ -1,3 +1,3 @@
 REACT_APP_DAS_HOST=https://develop.pamdas.org
 REACT_APP_GA_TRACKING_ID=UA-12413928-16
-REACT_APP_MOCK_EVENTS_API=true
+REACT_APP_MOCK_EVENTS_API=false

package.json

@@ -18,7 +18,7 @@
     "humanize-duration": "^3.27.1",
     "localforage": "^1.7.3",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "^2.4.1",
+    "mapbox-gl": "^2.9.2",
     "mb-isochrone": "^0.1.0",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
@@ -110,7 +110,7 @@
   ],
   "resolutions": {
     "eslint-loader": "3.0.2",
-    "mapbox-gl": "2.4.1",
+    "mapbox-gl": "2.9.2",
     "node-fetch": "2.6.7",
     "immer": "9.0.6"
   }

src/MapDrawingTools/MapLayers.js

@@ -0,0 +1,55 @@
+import React, { memo, useEffect } from 'react';
+
+import { withMap } from '../EarthRangerMap';
+
+import { useMapLayer, useMapSource } from '../hooks';
+
+import { linePaint, lineLayout, circlePaint, fillLayout, fillPaint, symbolPaint, symbolLayout } from './layerStyles';
+
+export const RULER_POINTS_LAYER_ID = 'RULER_POINTS_LAYER_ID';
+
+export const LAYER_IDS = {
+  POINTS: 'draw-layer-points',
+  LINES: 'draw-layer-lines',
+  LABELS: 'draw-layer-labels',
+  FILL: 'draw-layer-fill',
+};
+
+const SOURCE_IDS = {
+  LINE_SOURCE: 'map-line-source',
+  FILL_SOURCE: 'map-fill-source',
+};
+
+const MapDrawingLayers = (props) => {
+  const {
+    data,
+    map,
+  } = props;
+
+  useMapSource(SOURCE_IDS.LINE_SOURCE, data?.drawnLineSegments, { type: 'geojson' });
+  useMapSource(SOURCE_IDS.FILL_SOURCE, data?.fillPolygon, { type: 'geojson' });
+
+  const circleLayer = useMapLayer(LAYER_IDS.POINTS, 'circle', SOURCE_IDS.LINE_SOURCE, circlePaint);
+  useMapLayer(LAYER_IDS.LINES, 'line', SOURCE_IDS.LINE_SOURCE, linePaint, lineLayout);
+  useMapLayer(LAYER_IDS.LABELS, 'symbol', SOURCE_IDS.LINE_SOURCE, symbolPaint, symbolLayout);
+  useMapLayer(LAYER_IDS.FILL, 'fill', SOURCE_IDS.FILL_SOURCE, fillPaint, fillLayout);
+
+  useEffect(() => {
+    if (circleLayer) {
+      const onCircleMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
+      const onCircleMouseLeave = () => map.getCanvas().style.cursor = '';
+
+      map.on('mouseenter', LAYER_IDS.POINTS, onCircleMouseEnter);
+      map.on('mouseleave', LAYER_IDS.POINTS, onCircleMouseLeave);
+
+      return () => {
+        map.off('mouseenter', LAYER_IDS.POINTS, onCircleMouseEnter);
+        map.off('mouseleave', LAYER_IDS.POINTS, onCircleMouseLeave);
+      };
+    }
+  }, [circleLayer, map]);
+
+  return null;
+};
+
+export default memo(withMap(MapDrawingLayers));

src/MapDrawingTools/hooks.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { DRAWING_MODES } from '.';
+import { createLineSegmentGeoJsonForCoords, createFillPolygonForCoords } from './utils';
+
+export const useDrawToolGeoJson = (points = [], cursorCoords = null, drawMode = DRAWING_MODES.POLYGON) => {
+  const drawnLinePoints = useMemo(() =>
+    cursorCoords
+      ? [...points, cursorCoords]
+      : [...points],
+  [points, cursorCoords]);
+
+  const shouldCalcPolygonData = drawMode === DRAWING_MODES.POLYGON && drawnLinePoints.length > 2;
+
+  const fillPolygonPoints = useMemo(() =>
+    shouldCalcPolygonData
+      ? [...drawnLinePoints, drawnLinePoints.at(0)]
+      : null, [drawnLinePoints, shouldCalcPolygonData]);
+
+  const geoJsonObject = useMemo(() => {
+    if (drawnLinePoints.length < 2) return null;
+
+    const data = {
+      drawnLineSegments: createLineSegmentGeoJsonForCoords(drawnLinePoints),
+    };
+
+    if (fillPolygonPoints) {
+      data.fillPolygon = createFillPolygonForCoords(fillPolygonPoints);
+    }
+
+    return data;
+
+  }, [drawnLinePoints, fillPolygonPoints]);
+
+  return geoJsonObject;
+};

src/MapDrawingTools/index.js

@@ -0,0 +1,144 @@
+import React, { memo, Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Popup } from 'react-mapbox-gl';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+import length from '@turf/length';
+import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
+
+import { calcPositiveBearing } from '../utils/location';
+import { withMap } from '../EarthRangerMap';
+
+import { useDrawToolGeoJson } from '../MapDrawingTools/hooks';
+import { useMapEventBinding } from '../hooks';
+
+import styles from './styles.module.scss';
+import MapLayers from './MapLayers';
+
+import { LAYER_IDS } from './MapLayers';
+
+export const RULER_POINTS_LAYER_ID = 'RULER_POINTS_LAYER_ID';
+
+export const DRAWING_MODES = {
+  POLYGON: 'polygon',
+  LINE: 'line',
+};
+
+const MapDrawingTools = (props) => {
+  const {
+    children,
+    drawing = true,
+    drawingMode = DRAWING_MODES.POLYGON,
+    onChange = noop,
+    onClickPoint = noop,
+    onClickFill = noop,
+    points,
+    onClickLine = noop,
+    onClickLabel = noop,
+  } = props;
+
+  const [pointerLocation, setPointerLocation] = useState(null);
+
+  const cursorPopupCoords = useMemo(() => pointerLocation ? [pointerLocation.lng, pointerLocation.lat] : points[points.length - 1], [pointerLocation, points]);
+  const data = useDrawToolGeoJson(points, (drawing && cursorPopupCoords), drawingMode);
+  const dataContainer = useRef(data);
+
+  const lineLength = useMemo(() => {
+    if (!data?.drawnLineSegments) return null;
+
+    return `${length(data.drawnLineSegments).toFixed(2)}km`;
+  }, [data?.drawnLineSegments]);
+
+  const showLayer = pointerLocation || points.length;
+
+  const onMapClick = useCallback(debounce((e) => {
+    const { lngLat } = e;
+    e.preventDefault();
+    e.originalEvent.stopPropagation();
+    onChange([...points, [lngLat.lng, lngLat.lat]], dataContainer.current);
+  }, 100), [onChange, points]);
+
+
+  const onMapDblClick = useCallback((e) => {
+    onMapClick(e);
+
+    e.preventDefault();
+    e.originalEvent.stopPropagation();
+    onMapClick.cancel();
+
+  }, [onMapClick]);
+
+  const onMouseMove = useCallback((e) => {
+    setPointerLocation(e.lngLat);
+  }, []);
+
+  useMapEventBinding('click', onClickLine, LAYER_IDS.LINES);
+  useMapEventBinding('click', onClickPoint, LAYER_IDS.POINTS);
+  useMapEventBinding('click', onClickLabel, LAYER_IDS.LABELS);
+  useMapEventBinding('click', onClickFill, LAYER_IDS.FILL);
+
+  useMapEventBinding('mousemove', onMouseMove, null, drawing);
+  useMapEventBinding('dblclick', onMapDblClick, null, drawing);
+  useMapEventBinding('click', onMapClick, null, drawing);
+
+  useEffect(() => {
+    dataContainer.current = data;
+  }, [dataContainer, data]);
+
+  if (!showLayer) return null;
+
+  return <>
+    {drawing && <CursorPopup coords={cursorPopupCoords} lineLength={lineLength} points={points} />}
+    <MapLayers data={data} />
+    {children}
+  </>;
+};
+
+export default memo(withMap(MapDrawingTools));
+
+PropTypes.propTypes = {
+  points: PropTypes.array,
+};
+
+const CursorPopup = (props) => {
+  const { coords, points, lineLength } = props;
+
+  const popupClassName = `${styles.popup} ${styles.notDone}`;
+  const popupOffset = [-8, 0];
+  const popupAnchorPosition = 'right';
+
+  const popupLocationAndPreviousPointAreIdentical = isEqual(coords, points[points.length - 1]);
+  const showPromptForSecondPoint = popupLocationAndPreviousPointAreIdentical && points.length === 1;
+  return <Popup className={popupClassName} offset={popupOffset} coordinates={coords} anchor={popupAnchorPosition}>
+    {points.length === 0 && <p>Click to start</p>}
+    {!!points.length && <Fragment>
+      {showPromptForSecondPoint && <div>
+        <p>Select another point</p>
+      </div>}
+      {!showPromptForSecondPoint && <Fragment>
+        <p>Bearing: {calcPositiveBearing(points[points.length - 1], coords).toFixed(2)}&deg;</p>
+        <p>Distance: {lineLength}</p>
+        {!!points.length && <>
+          <small>Click to add a point.<br />Hit &quot;enter&quot; or &quot;return&quot; to complete.</small>
+        </>}
+      </Fragment>}
+    </Fragment>}
+  </Popup>;
+};
+
+/*
+  points,
+  drawing,
+  drawingMode,
+  onChange
+  onComplete
+  onClickPoint
+  onClickFill
+  onClickLine
+  onClickLabel
+*/
+
+
+/* how to show popup when completed
+  how to show popup when clicking individual point
+*/

src/MapDrawingTools/layerStyles.js

@@ -0,0 +1,33 @@
+import { DEFAULT_SYMBOL_PAINT } from '../constants';
+
+export const linePaint = {
+  'line-color': 'orange',
+  'line-dasharray': [2, 4],
+  'line-width': 2,
+};
+
+export const lineLayout = {
+  'line-join': 'round',
+  'line-cap': 'round',
+};
+
+export const symbolLayout = {
+  'text-allow-overlap': true,
+  'icon-allow-overlap': true,
+  'symbol-placement': 'line-center',
+  'text-font': ['Open Sans Regular'],
+  'text-field': ['get', 'lengthLabel'],
+};
+
+export const symbolPaint = {
+  ...DEFAULT_SYMBOL_PAINT,
+  'text-halo-width': 2,
+};
+
+export const circlePaint = {
+  'circle-radius': 5,
+  'circle-color': 'orange',
+};
+
+export const fillLayout = { visibility: 'visible' };
+export const fillPaint = { 'fill-color': 'red', 'fill-opacity': 0.4 };

src/MapDrawingTools/utils.js

@@ -0,0 +1,25 @@
+import { lineString, polygon } from '@turf/helpers';
+import length from '@turf/length';
+import lineSegment from '@turf/line-segment';
+
+export const createLineSegmentGeoJsonForCoords = (coords) => {
+  const lineSegments = lineSegment(lineString(coords));
+
+  lineSegments.features = lineSegments.features.map(feature => {
+    const lineLength = length(feature);
+    const lengthLabel = `${lineLength.toFixed(2)}km`;
+
+    return {
+      ...feature,
+      properties: {
+        ...feature.properties,
+        length: lineLength,
+        lengthLabel,
+      }
+    };
+  });
+
+  return lineSegments;
+};
+
+export const createFillPolygonForCoords = (coords) => polygon([coords]);