CDC #35 - Reverting point bounding box logic; Adding story with GeoJS…

…ON; Adding story with point

packages/geospatial/src/components/MapDraw.js

@@ -3,11 +3,7 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import {
   bbox,
-  destination,
   feature,
-  featureCollection,
-  getCoord,
-  point,
   type FeatureCollection,
   type GeometryCollection
 } from '@turf/turf';
@@ -24,11 +20,6 @@ import _ from 'underscore';
 import DrawControl from './DrawControl';
 import './MapDraw.css';
 
-const BEARING_SW = 225;
-const BEARING_NE = 45;
-
-const POINT_DISTANCE = 10;
-
 type Props = {
   /**
    * GeoJSON structured data to be displayed on the map.
@@ -68,30 +59,6 @@ const MapDraw = (props: Props) => {
   const drawRef = useRef<MapboxDraw>();
   const mapRef = useRef<MapRef>();
 
-  /**
-   * Returns the bounding box for the current data set. Points are handled differently so that the bounding box
-   * does not zoom too much and shows relevant information close to the point.
-   *
-   * @type {function(): *}
-   */
-  const getBoundingBox = useCallback(() => {
-    let boundingBox;
-
-    if (props.data.type === GeometryTypes.point) {
-      const coordinates = getCoord(props.data);
-      const p = point(coordinates);
-
-      const sw = destination(p, POINT_DISTANCE, BEARING_SW);
-      const ne = destination(p, POINT_DISTANCE, BEARING_NE);
-
-      boundingBox = bbox(featureCollection([sw, ne]));
-    } else {
-      boundingBox = bbox(props.data);
-    }
-
-    return boundingBox;
-  }, [props.data]);
-
   /**
    * Calls the onChange prop with all of the geometries in the current drawer.
    *
@@ -114,7 +81,7 @@ const MapDraw = (props: Props) => {
   useEffect(() => {
     if (loaded && props.data) {
       // Sets the bounding box for the current geometry.
-      const boundingBox = getBoundingBox();
+      const boundingBox = bbox(props.data);
 
       if (_.every(boundingBox, _.isFinite)) {
         const [minLng, minLat, maxLng, maxLat] = boundingBox;

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

@@ -3,6 +3,7 @@
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import MapDraw from '../../../geospatial/src/components/MapDraw';
+import data from '../data/boston.json';
 
 export default {
   title: 'Components/Geospatial/MapDraw',
@@ -19,6 +20,17 @@ export const Default = () => (
   />
 );
 
+export const GeoJSON = () => (
+  <MapDraw
+    data={data}
+    mapStyle={`https://api.maptiler.com/maps/basic-v2/style.json?key=${process.env.REACT_APP_MAP_TILER_KEY}`}
+    onChange={action('onChange')}
+    style={{
+      marginBottom: '2em'
+    }}
+  />
+);
+
 export const Point = () => (
   <MapDraw
     data={{