test map

package.json

@@ -25,6 +25,7 @@
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
+    "ts-node-dev": "^2.0.0",
     "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
@@ -34,8 +35,9 @@
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@material-ui/core": "4.11.3",
-    "@react-google-maps/api": "2.7.0",
+    "@react-google-maps/api": "2.19.3",
     "@types/google.maps": "^3.47.2",
+    "@types/mapbox-gl": "^2.7.21",
     "@types/node": "17.0.10",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
@@ -60,6 +62,7 @@
     "husky": "7.0.4",
     "license-checker": "25.0.1",
     "lint-staged": "12.2.1",
+    "mapbox-gl": "^3.1.0",
     "prettier": "2.5.1",
     "process": "^0.11.10",
     "react": "17.0.2",
@@ -69,11 +72,11 @@
     "react-use": "17.3.2",
     "style-loader": "3.3.1",
     "terser-webpack-plugin": "^5.3.0",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.5.1",
     "typescript": "4.5.4",
     "webpack": "5.66.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.1",
+    "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.7.3"
   },
   "eslintConfig": {

src/components/Container.tsx

@@ -8,13 +8,6 @@ import { View } from '../types/View';
 import { useTrackedState, useUpdate } from '../store';
 import { InputForm } from './InputForm';
 
-const libraries: (
-  | 'drawing'
-  | 'geometry'
-  | 'localContext'
-  | 'places'
-  | 'visualization'
-)[] = ['places'];
 
 type Props = {
   apiKey: string;
@@ -34,49 +27,10 @@ export const Container: React.FC<Props> = (props) => {
     return { address: address };
   };
 
-  const { isLoaded, loadError } = useLoadScript({
-    googleMapsApiKey: props.apiKey,
-    libraries,
-  });
-
-  const geocoder = useGeocoder(isLoaded);
-
-  useEffect(() => {
-    if (geocoder) {
-      update({
-        type: 'SET_GEOCODER',
-        geocoder: geocoder,
-      });
-    }
-    if (geocoder && !isCenterProvided) {
-      geocoder.geocode(getInitialLocation(), (results, status) => {
-        if (results) {
-          update({
-            type: 'SET_VIEW',
-            view: {
-              ...state.view,
-              location: results[0].geometry.location.toJSON(),
-            },
-          });
-        }
-      });
-    } else if (geocoder && isCenterProvided) {
-      update({
-        type: 'SET_VIEW',
-        view: {
-          ...state.view,
-          ...props.view,
-        },
-      });
-    }
-  }, [geocoder, isCenterProvided]);
-
-  const inputHTMLElements = props.directionContainer.getElementsByTagName(
-    'input'
-  );
-  const labelHTMLElements = props.directionContainer.getElementsByTagName(
-    'label'
-  );
+  const inputHTMLElements =
+    props.directionContainer.getElementsByTagName('input');
+  const labelHTMLElements =
+    props.directionContainer.getElementsByTagName('label');
 
   useEffect(() => {
     if ([...labelHTMLElements].length > 0) {
@@ -92,18 +46,9 @@ export const Container: React.FC<Props> = (props) => {
     }
   }, []);
 
-  return !isLoaded ? (
-    <span>Loading the map...</span>
-  ) : loadError ? (
-    <span>
-      Something went wrong. Please contact the survey administrator for
-      assistance.
-    </span>
-  ) : (
+  return (
     <Grid container>
-      <InputForm />
       <Map />
-      <ClearButton />
     </Grid>
   );
 };

src/components/Map.tsx

@@ -1,8 +1,12 @@
 import { Grid, makeStyles } from '@material-ui/core';
 import { GoogleMap, Marker as MapMarker } from '@react-google-maps/api';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useTrackedState, useUpdate } from '../store';
 import { Input } from '../types/Input';
+import mapboxgl from 'mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
+
+mapboxgl.accessToken =
+  'pk.eyJ1Ijoia2VtYWtpbm8iLCJhIjoiY2s1aHJibjRhMDZsNDNscDExM2w1NGJ1OCJ9.mc7KzAHPfIDbt6_ujYvNRw';
 
 const useStyles = makeStyles({
   button: {
@@ -20,6 +24,8 @@ const useStyles = makeStyles({
   },
   mapContainer: {
     paddingTop: '2rem',
+    height: '400px',
+    width: '100%',
     '& [aria-label *= "Street View Pegman Control"]': {
       height: '30px !important',
     },
@@ -31,29 +37,21 @@ export const Map: React.FC = () => {
   const update = useUpdate();
   const state = useTrackedState();
 
-  useEffect(() => {
-    const inputIndexForAddressUpdate = state.inputs.findIndex(
-      (item) => item.location && !item.address
-    );
+  const mapContainer = useRef<any>(null);
+  const map = useRef<any>(null);
+  const [lng, setLng] = useState(-70.9);
+  const [lat, setLat] = useState(42.35);
+  const [zoom, setZoom] = useState(9);
 
-    if (inputIndexForAddressUpdate > -1 && state.geocoder) {
-      const inputForAddressUpdate = state.inputs[inputIndexForAddressUpdate];
-      state.geocoder.geocode(
-        { location: inputForAddressUpdate.location },
-        (results, status) => {
-          if (results) {
-            update({
-              type: 'EDIT_INPUT',
-              input: {
-                ...inputForAddressUpdate,
-                address: results[0].formatted_address,
-              },
-              index: inputIndexForAddressUpdate,
-            });
-          }
-        }
-      );
-    }
+  useEffect(() => {
+    if (map.current) return;
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: [lng, lat],
+      zoom: zoom,
+    });
+    console.log(map.current);
   });
 
   return (
@@ -67,58 +65,9 @@ export const Map: React.FC = () => {
       xs={12}
       className={classes.mapContainer}
     >
-      <GoogleMap
-        id="map"
-        clickableIcons={false}
-        mapContainerStyle={{
-          width: '100%',
-          height: '60vh',
-        }}
-        center={state.view.location}
-        onClick={(event) => {
-          const coordinates = {
-            lat: event!.latLng!.lat(),
-            lng: event!.latLng!.lng(),
-          };
-          update({
-            type: 'EDIT_INPUT',
-            input: { label: 'Clicked location', location: coordinates },
-          });
-        }}
-        zoom={14}
-      >
-        {state.inputs.map((item: Input, index: number) => {
-          if (item.location) {
-            const label: google.maps.MarkerLabel | null =
-              state.inputs[index].label !== ''
-                ? {
-                    text: state.inputs[index].label,
-                    fontWeight: 'bold',
-                  }
-                : null;
-            return (
-              <MapMarker
-                draggable={true}
-                onDragEnd={(event: any) => {
-                  const coordinates = {
-                    lat: event.latLng.lat(),
-                    lng: event.latLng.lng(),
-                  };
-                  update({
-                    type: 'EDIT_INPUT',
-                    index: index,
-                    input: { label: 'Clicked location', location: coordinates },
-                  });
-                }}
-                label={label || undefined}
-                position={item.location}
-              />
-            );
-          } else {
-            return null;
-          }
-        })}
-      </GoogleMap>
+      <div>
+        <div ref={mapContainer} className="map-container" />
+      </div>
     </Grid>
   );
 };

tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
+    "sourceMap": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,

webpack.common.js

@@ -8,7 +8,7 @@ module.exports = {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: 'ts-loader',
       },
     ],
   },