Move style to env, manage marker visibility with map events

Author: jurevans

env.d.ts

@@ -3,4 +3,5 @@ declare module '@env' {
   export const GTFS_API_GATEWAY_KEY: string;
   export const WEBSOCKET_GATEWAY_URL: string;
   export const MAPBOX_ACCESS_TOKEN: string;
+  export const MAPBOX_STYLE_URL: string;
 }

src/components/Map.tsx

@@ -2,33 +2,42 @@ import React, { FC } from 'react';
 import { StyleSheet } from 'react-native';
 import MapboxGL from '@react-native-mapbox-gl/maps';
 import { Coordinate } from 'interfaces';
-import { MAPBOX_ACCESS_TOKEN } from '@env';
+import { MAPBOX_ACCESS_TOKEN, MAPBOX_STYLE_URL } from '@env';
 
 type Props = {
   centerCoordinate: Coordinate;
   zoomLevel: number;
   pitch: number;
   children: any;
+  onRegionWillChange?: () => void;
+  onRegionDidChange?: () => void;
 };
 
 MapboxGL.setAccessToken(MAPBOX_ACCESS_TOKEN);
 
-const ANIMATION_DURATION = 1500;
-const styleURL = 'mapbox://styles/jurevans/ckx09yl8v07tm14rupxmhhz3o';
-
+const ANIMATION_DURATION = 1000;
 const styles = StyleSheet.create({
   map: {
     flex: 1,
   },
 });
 
-const Map: FC<Props> = ({ centerCoordinate, zoomLevel, pitch, children }) => {
+const Map: FC<Props> = ({
+  centerCoordinate,
+  zoomLevel,
+  pitch,
+  onRegionWillChange,
+  onRegionDidChange,
+  children,
+}) => {
   return (
     <MapboxGL.MapView
-      styleURL={styleURL}
+      styleURL={MAPBOX_STYLE_URL || MapboxGL.StyleURL.Dark}
       pitchEnabled={true}
       logoEnabled={false}
       compassEnabled={true}
+      onRegionWillChange={onRegionWillChange}
+      onRegionDidChange={onRegionDidChange}
       style={styles.map}>
       <MapboxGL.Camera
         zoomLevel={zoomLevel}

src/screens/map/MapScreen.tsx

@@ -23,7 +23,6 @@ import { StopTimeCallback } from 'components/StopTime';
 const DEFAULT_COORD: Coordinate = [-73.94594865587045, 40.7227534777328];
 const DEFAULT_ZOOM = 11;
 const STOP_ZOOM = 15;
-const ANIMATION_DURATION = 1500;
 
 interface ShapeVars {
   shapeId: string;
@@ -83,8 +82,6 @@ const MapScreen: FC = () => {
           stopId: stopId,
         }),
       );
-      setMarkerVisible(false);
-      setTimeout(() => setMarkerVisible(true), ANIMATION_DURATION);
     },
     [dispatch],
   );
@@ -95,7 +92,7 @@ const MapScreen: FC = () => {
       centerCoordinate: stop?.geom.coordinates || DEFAULT_COORD,
       zoomLevel: STOP_ZOOM,
     }));
-  }, [stop?.geom.coordinates]);
+  }, [stop]);
 
   const shapeLayerId = `line-layer-${trip?.feedIndex}:${trip?.tripId}`;
 
@@ -105,7 +102,9 @@ const MapScreen: FC = () => {
         <Map
           centerCoordinate={centerCoordinate}
           zoomLevel={zoomLevel}
-          pitch={pitch}>
+          pitch={pitch}
+          onRegionWillChange={() => setMarkerVisible(false)}
+          onRegionDidChange={() => setMarkerVisible(true)}>
           {stop?.geom && isMarkerVisible && (
             <StopMarker
               feedIndex={stop.feedIndex}