fix map marker issues and set max zoom level

Maroon-Rides · Aug 30, 2024 · 66a7d5e · 66a7d5e
1 parent b63d948
commit 66a7d5e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/app/components/map/MapView.tsx b/app/components/map/MapView.tsx
@@ -305,7 +305,10 @@ const Map: React.FC = () => {
                 rotateEnabled={false}
                 region={defaultMapRegion}
                 onPanDrag={() => setIsViewCenteredOnUser(false)}
+                // this deprcation is ok, we only use it on android
+                maxZoomLevel={Platform.OS == "android" ? 18 : undefined}
                 showsMyLocationButton={false} // we have our own
+                // fix dark mode android map syling
                 customMapStyle={Platform.OS == "android" && theme.mode == "dark" ? DarkGoogleMaps : undefined}
             >
                 {/* Route Polylines */}

diff --git a/app/components/map/markers/BusMarker.tsx b/app/components/map/markers/BusMarker.tsx
@@ -4,6 +4,7 @@ import BusMapIcon from '../BusMapIcon';
 import BusCallout from '../BusCallout';
 import { IVehicle } from 'utils/interfaces';
 import useAppStore from '../../../data/app_state';
+import { Platform } from 'react-native';
 
 interface Props {
     bus: IVehicle,
@@ -31,7 +32,16 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
             tracksViewChanges={false}
             anchor={{x: 0.5, y: 0.5}}
             pointerEvents="auto"
-            style={{ zIndex: 100, elevation: 100 }}
+            style={[
+                { zIndex: 100, elevation: 100}, 
+
+                Platform.OS == "android" && {
+                    width: 42, 
+                    height: 42,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }
+            ]}
             onPress={() => busDefaultDirection()}
         >
             {/* Bus Icon on Map*/}

diff --git a/app/components/map/markers/RoutePlanMarker.tsx b/app/components/map/markers/RoutePlanMarker.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { MapMarker, Marker } from 'react-native-maps';
 import { RoutePlanMapMarker } from 'utils/interfaces';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { getLighterColor } from 'app/utils';
 import useAppStore from 'app/data/app_state';
 
@@ -21,6 +21,13 @@ const RoutePlanMarker: React.FC<Props> = ({ marker }) => {
                 latitude: marker.latitude,
                 longitude: marker.longitude
             }}
+            style={[
+                Platform.OS == "android" && {
+                    height: 72,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }
+            ]}
             tracksViewChanges={false}
             anchor={{x: 0.5, y: 0.5}}
             pointerEvents="auto"