reimplement geocoder

hackoregon · Apr 27, 2019 · 6a84d82 · 6a84d82
1 parent d39020e
commit 6a84d82
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js b/packages/2018-disaster-resilience/src/components/YouAndYourNeighbors/index.js
@@ -42,14 +42,11 @@ const mapContainer = css`
   }
 `;
 
-const LAT = 45.5231;
-const LONG = -122.6765;
 const ZOOM = 13.5;
 
 const geocoderOptions = {
   bbox: [-123.1847001376, 45.2458284187, -122.2151566806, 45.8544896021],
   zoom: 13.5,
-  trackProximity: true,
   placeholder: "Enter your address"
 };
 
@@ -122,14 +119,14 @@ export class YouAndYourNeighbors extends React.Component {
           />
           <div className={mapContainer}>
             <BaseMap
-              initialLongitude={LONG}
-              initialLatitude={LAT}
+              initialLongitude={selectedCoords.longitude}
+              initialLatitude={selectedCoords.latitude}
               initialZoom={ZOOM}
               navigation={false}
-              // TODO: Reimplement Geocoder
-              // geocoder
-              // geocoderOptions={geocoderOptions}
-              // geocoderOnChange={geocoderChange}
+              locationMarker={coordsProperties}
+              geocoder
+              geocoderOptions={geocoderOptions}
+              geocoderOnChange={geocoderChange}
               mapGLOptions={mapGLOptions}
             >
               {data && (

diff --git a/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js b/packages/2018-disaster-resilience/src/state/you-and-your-neighbors/index.js
@@ -15,7 +15,7 @@ const INITIAL_STATE = {
   coordsPending: false,
   coordsError: null,
   coordsData: null,
-  selectedCoords: null
+  selectedCoords: { latitude: 45.5231, longitude: -122.6765 }
 };
 
 const reducer = (state = INITIAL_STATE, action) => {
@@ -65,7 +65,7 @@ const reducer = (state = INITIAL_STATE, action) => {
     case SET_COORDS:
       return {
         ...state,
-        selectedCoords: action.selectedCoords
+        selectedCoords: action.payload
       };
     default:
       return state;

diff --git a/packages/component-library/src/BaseMap/BaseMap.js b/packages/component-library/src/BaseMap/BaseMap.js
@@ -1,8 +1,7 @@
 /* TODO: Fix linting errors */
-/* eslint-disable */
 
 import React, { Component } from "react";
-import MapGL, { NavigationControl } from "react-map-gl";
+import MapGL, { NavigationControl, Marker } from "react-map-gl";
 import Dimensions from "react-dimensions";
 import { css } from "emotion";
 import PropTypes from "prop-types";
@@ -98,6 +97,7 @@ class BaseMap extends Component {
       mapboxStyle,
       mapboxToken,
       geocoder,
+      locationMarker,
       navigation,
       geocoderOptions,
       geocoderOnChange,
@@ -144,6 +144,18 @@ class BaseMap extends Component {
               />
             )}
           </div>
+          {locationMarker && (
+            <Marker
+              latitude={viewport.latitude}
+              longitude={viewport.longitude}
+              offsetLeft={-20}
+              offsetTop={-10}
+            >
+              <span role="img" aria-label="star">
+                ❌
+              </span>
+            </Marker>
+          )}
           {geocoder && mounted && (
             <Geocoder
               mapRef={{ current: this.mapRef.current }}

diff --git a/packages/component-library/stories/BaseMap.story.js b/packages/component-library/stories/BaseMap.story.js
@@ -42,6 +42,7 @@ const geocoderMap = () => {
       mapboxStyle={mapboxStyle}
       geocoder
       geocoderOptions={{ placeholder: "🚀search to blast off✨", zoom: 9.5 }} // additional geocoder options https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md
+      locationMarker
       mapGLOptions={{ dragPan: false }} // additional react-map-gl options https://github.com/uber/react-map-gl/blob/master/src/components/interactive-map.js
     />
   );