Stop scroll capture on crash map and upgrade react-map-gl to v7

atd-vze/package.json

@@ -18,7 +18,6 @@
     "@coreui/icons": "0.3.0",
     "@coreui/react": "^2.5.1",
     "@handsontable/react": "^3.1.3",
-    "@math.gl/web-mercator": "^3.6.3",
     "@turf/bbox": "^6.5.0",
     "@turf/difference": "6.0.1",
     "apollo-boost": "^0.4.4",
@@ -37,9 +36,8 @@
     "graphql": "^14.4.2",
     "handsontable": "12.1.3",
     "lodash.get": "^4.4.2",
-    "mapbox-gl": "^0.47.0",
+    "mapbox-gl": "^3.2.0",
     "multiselect-react-dropdown": "^2.0.25",
-    "nebula.gl": "^0.15.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-apollo": "^3.0.0",
@@ -49,9 +47,7 @@
     "react-csv-reader": "^3.0.6",
     "react-datepicker": "^2.9.6",
     "react-dom": "^16.8.6",
-    "react-map-gl": "^5.1.1",
-    "react-map-gl-draw": "^0.15.0",
-    "react-map-gl-geocoder": "^2.0.11",
+    "react-map-gl": "^7.1.7",
     "react-router-config": "^5.0.1",
     "react-router-dom": "^5.1.2",
     "react-test-renderer": "^16.8.6",
@@ -84,12 +80,22 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 9",
-    "not op_mini all"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "not safari < 10",
+      "not chrome < 51",
+      "not android < 5",
+      "not ie < 12"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}",

atd-vze/src/helpers/environment.js

@@ -0,0 +1 @@
+export const isDev = window.location.hostname === "localhost";

atd-vze/src/helpers/map.js

@@ -1,9 +1,25 @@
 import React from "react";
 import { Source, Layer } from "react-map-gl";
 
+const TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;
 // This API key is managed by CTM. Contact help desk for maintenance and troubleshooting.
 const NEARMAP_KEY = process.env.REACT_APP_NEARMAP_KEY;
 
+export const defaultInitialState = {
+  latitude: 30.2747,
+  longitude: -97.7406,
+  zoom: 17,
+};
+
+export const mapParameters = {
+  touchPitch: false,
+  dragRotate: false,
+  boxZoom: false,
+  maxBounds: [[-99, 29], [-96, 32]],
+  mapboxAccessToken: TOKEN,
+  mapStyle: "mapbox://styles/mapbox/satellite-streets-v11",
+};
+
 export const LOCATION_MAP_CONFIG = {
   mapStyle: "mapbox://styles/mapbox/satellite-streets-v11",
   sources: {
@@ -105,3 +121,11 @@ export const LabeledAerialSourceAndLayer = () => {
     </>
   );
 };
+
+/**
+ * Shorten a coordinate to 6 decimal places
+ * @param {string|number} coordinate - latitude or longitude
+ * @returns {string} - truncated coordinate
+ */
+export const truncateCoordinate = coordinate =>
+  parseFloat(coordinate).toFixed(6);

atd-vze/src/views/Crashes/CrashDiagram.js

@@ -12,13 +12,14 @@ import {
 } from "reactstrap";
 import axios from "axios";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { isDev } from "../../helpers/environment";
 
 const CrashDiagram = props => {
   const [rotation, setRotation] = useState(0);
 
   // Set S3 folder for diagram depending on environment
   const s3Folder =
-    process.env.NODE_ENV === "production" ? "production" : "staging";
+    process.env.NODE_ENV === "production" || isDev ? "production" : "staging";
 
   const requestCR3 = () => {
     const requestUrl = `${process.env.REACT_APP_CR3_API_DOMAIN}/cr3/download/${props.crashId}`;