Fix map moving to locations

client/package.json

@@ -33,7 +33,6 @@
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
     "victory": "^36.3.1",
-    "viewport-mercator-project": "^7.0.4",
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {

client/src/components/Map/Map.jsx

@@ -102,7 +102,7 @@ class PraxisMarker extends React.Component {
       "/map"
     )
 
-    this.props.history.push(clientRoute)
+    this.props.router?.navigate(clientRoute)
   }
 
   render() {
@@ -148,6 +148,8 @@ class PraxisMap extends Component {
     [7, parcelStop7],
   ]
 
+  mapRef = React.createRef()
+
   // _stops = [
   //   [1, "#f6d2a9;"],
   //   [2, "#f5b78e"],
@@ -162,7 +164,10 @@ class PraxisMap extends Component {
   _createNewViewport = (geojson) => {
     const features = geojson.features
     const { viewport } = this.props.mapState
-    const { longitude, latitude, zoom } = createNewViewport(geojson, viewport)
+    const { longitude, latitude, zoom } = createNewViewport(
+      geojson,
+      this.mapRef
+    )
     const newViewport = {
       ...viewport,
       longitude,
@@ -300,7 +305,7 @@ class PraxisMap extends Component {
         },
         "/map"
       )
-      this.props.history.push(clientRoute)
+      this.props.router?.navigate(clientRoute)
     }
   }
 
@@ -337,6 +342,7 @@ class PraxisMap extends Component {
     return (
       <div className="map">
         <ReactMapGL
+          ref={this.mapRef}
           // TODO: Don't control view state, but still move around
           initialViewState={this.props.mapState.viewport}
           mapOptions={{ attributionControl: false }}

client/src/components/Search/SearchBar.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import { DebounceInput } from "react-debounce-input"
 import PropTypes from "prop-types"
+import { withRouter } from "../../utils/router"
 import {
   handlePrimarySearchQuery,
   handlePrimarySearchAll,
@@ -35,7 +36,7 @@ class SearchBar extends Component {
         }),
         "/map"
       )
-      this.props.history.push(route)
+      this.props.router?.navigate(route)
     }
   }
 
@@ -380,4 +381,4 @@ SearchBar.propTypes = {
   dispatch: PropTypes.func.isRequired,
 }
 
-export default SearchBar
+export default withRouter(SearchBar)

client/src/utils/map.js

@@ -1,8 +1,7 @@
-import { WebMercatorViewport } from "viewport-mercator-project"
 import bbox from "@turf/bbox"
 
 // function to create the new viewport to zoom to
-export function createNewViewport(geojson, mapState) {
+export function createNewViewport(geojson, mapRef) {
   const { features } = geojson
   let featureCount = 0
   if (features && features.length > 0) {
@@ -23,32 +22,24 @@ export function createNewViewport(geojson, mapState) {
   // create the appropriate
   if (features && featureCount > 0) {
     const [minLng, minLat, maxLng, maxLat] = bbox(geojson)
-    // construct a viewport instance from the current state
-    console.log(mapState)
-    const viewport = new WebMercatorViewport(mapState)
-    console.log(viewport)
-    // Note: padding has been known to cause odd errors
-    const { longitude, latitude, zoom } = viewport.fitBounds(
+    mapRef.current.fitBounds(
       [
         [minLng, minLat],
         [maxLng, maxLat],
       ],
       {
-        padding: 10,
+        padding: 40,
       }
     )
-
-    return { longitude, latitude, zoom }
   } else if (geojson.geometry && geojson.geometry.type === "Point") {
     //if it is a point return this
     const [longitude, latitude] = geojson.center
-    return { longitude, latitude, zoom: 15 }
+    mapRef.current.flyTo({ center: [longitude, latitude], zoom: 15 })
   } else {
-    return {
-      latitude: 42.40230199308517,
-      longitude: -83.11182404081912,
+    mapRef.current.flyTo({
+      center: [-83.11182404081912, 42.40230199308517],
       zoom: 10,
-    }
+    })
   }
 }