CDC #35 - Setting up "geospatial" package

packages/geospatial/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Performant Software Solutions LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/geospatial/index.js

@@ -0,0 +1 @@
+module.exports = require('./build/index');

packages/geospatial/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@performant-software/geospatial",
+  "version": "1.0.26",
+  "description": "TODO: ADD",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "style": "./build/main.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types"
+  },
+  "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@turf/turf": "^6.5.0",
+    "maplibre-gl": "^3.5.2",
+    "react-map-gl": "^7.1.6",
+    "underscore": "^1.13.6"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 19.0.0",
+    "react-dom": ">= 16.13.1 < 19.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/geospatial/src/components/DrawControl.js

@@ -0,0 +1,43 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { forwardRef, useImperativeHandle } from 'react';
+import { useControl, type ControlPosition, type MapRef } from 'react-map-gl';
+
+type Props = {
+  position?: ControlPosition;
+  onCreate?: (evt: { features: Array<any> }) => void;
+  onUpdate?: (evt: { features: Array<any>, action: string }) => void;
+  onDelete?: (evt: { features: Array<any> }) => void;
+};
+
+const DrawControl = forwardRef((props: Props, ref) => {
+  /**
+   * Creates the drawer ref using MapboxDraw.
+   */
+  const drawRef = useControl(
+    () => new MapboxDraw(props),
+    ({ map }: { map: MapRef }) => {
+      map.on('draw.create', props.onCreate);
+      map.on('draw.update', props.onUpdate);
+      map.on('draw.delete', props.onDelete);
+    },
+    ({ map }: { map: MapRef }) => {
+      map.off('draw.create', props.onCreate);
+      map.off('draw.update', props.onUpdate);
+      map.off('draw.delete', props.onDelete);
+    },
+    {
+      position: props.position
+    }
+  );
+
+  /**
+   * Exposes the ref for the MapboxDraw object.
+   */
+  useImperativeHandle(ref, () => drawRef, [drawRef]);
+
+  return null;
+});
+
+export default DrawControl;

packages/geospatial/src/components/MapDraw.css

@@ -0,0 +1 @@
+@import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

packages/geospatial/src/components/MapDraw.js

@@ -0,0 +1,100 @@
+// @flow
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import {
+  bbox,
+  feature,
+  type FeatureCollection,
+  type GeometryCollection
+} from '@turf/turf';
+import maplibregl from 'maplibre-gl';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import Map, { MapRef } from 'react-map-gl';
+import _ from 'underscore';
+import DrawControl from './DrawControl';
+import './MapDraw.css';
+
+type Props = {
+  data: GeometryCollection | FeatureCollection,
+  mapStyle: string,
+  onChange: (features: Array<any>) => void,
+  style?: any
+};
+
+const MapDraw = (props: Props) => {
+  const drawRef = useRef<MapboxDraw>();
+  const mapRef = useRef<MapRef>();
+
+  /**
+   * Calls the onChange prop with all of the geometries in the current drawer.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onChange = useCallback(() => {
+    props.onChange(drawRef.current.getAll());
+  }, [props.onChange]);
+
+  /**
+   * Sets the map style.
+   *
+   * @type {{width: string, height: number}}
+   */
+  const style = useMemo(() => ({ height: 500, width: '100%', ...(props.style || {}) }), [props.style]);
+
+  /**
+   * Updates the map bounding box and drawer when the geometry is changed.
+   */
+  useEffect(() => {
+    if (props.data) {
+      // Sets the bounding box for the current geometry.
+      const boundingBox = bbox(props.data);
+
+      if (_.every(boundingBox, _.isFinite)) {
+        const [minLng, minLat, maxLng, maxLat] = boundingBox;
+        const bounds = [[minLng, minLat], [maxLng, maxLat]];
+
+        mapRef.current.fitBounds(bounds, { padding: 40, duration: 1000 });
+      }
+
+      // Handle special case for geometry collection (not supported by mabox-gl-draw)
+      if (props.data.type === 'GeometryCollection') {
+        _.each(props.data.geometries, (geometry) => {
+          drawRef.current.add(feature(geometry));
+        });
+      } else {
+        drawRef.current.add(props.data);
+      }
+    }
+  }, [props.data]);
+
+  return (
+    <Map
+      attributionControl={false}
+      mapLib={maplibregl}
+      ref={mapRef}
+      style={style}
+      mapStyle={props.mapStyle}
+    >
+      <DrawControl
+        ref={drawRef}
+        controls={{
+          line_string: true,
+          point: true,
+          polygon: true,
+          trash: true
+        }}
+        displayControlsDefault={false}
+        onCreate={onChange}
+        onUpdate={onChange}
+        onDelete={onChange}
+      />
+    </Map>
+  );
+};
+
+export default MapDraw;

packages/geospatial/src/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+// Components
+export { default as DrawControl } from './components/DrawControl';
+export { default as MapDraw } from './components/MapDraw';

packages/geospatial/webpack.config.js

@@ -0,0 +1,13 @@
+const { configure } = require('@performant-software/webpack-config');
+const path = require('path');
+
+module.exports = configure(__dirname, {
+  resolve: {
+    alias: {
+      './@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css$': path.resolve(
+        __dirname,
+        '../../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+      )
+    }
+  }
+});

packages/storybook/.env.example

@@ -1,5 +1,6 @@
 A11Y_TAGS=wcag21aa
 BABEL_DISABLE_CACHE=1
+BABEL_SHOW_CONFIG_FOR=.storybook/preview.js
 GOOGLE_MAPS_API_KEY=abcd
+REACT_APP_MAP_TILER_KEY=abcd
 TRANSLATE_URL=https://example.com/translation-server
-BABEL_SHOW_CONFIG_FOR=.storybook/preview.js

packages/storybook/src/geospatial/MapDraw.stories.js

@@ -0,0 +1,17 @@
+// @flow
+
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import MapDraw from '../../../geospatial/src/components/MapDraw';
+
+export default {
+  title: 'Components/Geospatial/MapDraw',
+  component: MapDraw
+};
+
+export const Default = () => (
+  <MapDraw
+    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
+    onChange={action('onChange')}
+  />
+);

react-components.json

@@ -1,6 +1,7 @@
 {
   "packages": [
     "packages/controlled-vocabulary",
+    "packages/geospatial",
     "packages/semantic-ui",
     "packages/shared",
     "packages/user-defined-fields",