switch to google maps and add a polyline (#35)

sidewalklabs · Aug 27, 2018 · f0c6695 · f0c6695
1 parent 9149059
commit f0c6695
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/expo_project/components/MapWithMarkers.js b/expo_project/components/MapWithMarkers.js
@@ -50,17 +50,23 @@ class MapWithMarkers extends React.Component {
     return this.state.region ? (
       <MapView
         style={styles.mapStyle}
-        onPress={onMapPress}
-        onLongPress={onMapLongPress}
+        provider="google"
+        onPress={() => onMapPress()}
+        onLongPress={e => onMapLongPress(e.nativeEvent.coordinate)}
         initialRegion={this.state.region}
         showsUserLocation
         scrollEnabled
         zoomEnabled
         pitchEnabled={false}
       >
+        <MapView.Polyline
+          coordinates={MapConfig.polylineCoordinates}
+          strokeColor="#000"
+          strokeWidth={6}
+        />
         {markers.map(marker => {
           const selected = marker.id === activeMarkerId;
-          const key = marker.id;
+          const key = marker.id + (selected ? "-selected" : ""); //trigger a re render when switching states, so it recenters itself
           return (
             <MapView.Marker
               coordinate={marker.coordinate}
@@ -76,7 +82,6 @@ class MapWithMarkers extends React.Component {
               <PersonIcon
                 backgroundColor={marker.color}
                 size={selected ? 24 : 16}
-                shadow
               />
             </MapView.Marker>
           );

diff --git a/expo_project/constants/Map.js b/expo_project/constants/Map.js
@@ -2,7 +2,16 @@ export default {
   defaultRegion: {
     latitude: 43.703805,
     longitude: -79.343568,
-    latitudeDelta: 0.0043,
-    longitudeDelta: 0.0034
-  }
+    latitudeDelta: 0.00043,
+    longitudeDelta: 0.0012
+  },
+  polylineCoordinates: [
+    { latitude: 43.703354, longitude: -79.343594 },
+    { latitude: 43.703555, longitude: -79.343832 },
+    { latitude: 43.70364, longitude: -79.344049 },
+    { latitude: 43.703893, longitude: -79.34427 },
+    { latitude: 43.704307, longitude: -79.343645 },
+    { latitude: 43.703889, longitude: -79.343398 },
+    { latitude: 43.703354, longitude: -79.343594 }
+  ]
 };
diff --git a/expo_project/screens/HomeScreen.js b/expo_project/screens/HomeScreen.js
@@ -164,7 +164,7 @@ class HomeScreen extends React.Component {
   }
 
   resetDrawer(y = MID_DRAWER_TRANSLATE_Y) {
-    if (this._drawerY !== y) {
+    if (this._drawerY !== y && this.state.markers.length) {
       Animated.timing(this.state.pan, {
         toValue: { x: 0, y },
         duration: 200,
@@ -235,14 +235,14 @@ class HomeScreen extends React.Component {
     }
   }
 
-  createNewMarker(e) {
+  createNewMarker(coordinate) {
     const markersCopy = [...this.state.markers];
     const date = moment();
     const dateLabel = date.format("HH:mm");
     const title = "Person " + (markersCopy.length + 1);
 
     const marker = {
-      coordinate: e.nativeEvent.coordinate,
+      coordinate: coordinate,
       color: this.getRandomIconColor(),
       title,
       dateLabel