Merge pull request #107 from Reveille-Rides/bwees/map-layering

fix elevations and layering of callouts and bus icons
Maroon-Rides · Jan 30, 2024 · 74b3b9b · 74b3b9b
2 parents 3379182 + 764c52c
commit 74b3b9b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/app/components/map/BusCallout.tsx b/app/components/map/BusCallout.tsx
@@ -15,7 +15,9 @@ interface Props {
 // Bus callout with amentities
 const BusCallout: React.FC<Props> = ({ directionName, fullPercentage, amenities, tintColor, routeName }) => {    
     return (
-        <Callout>
+        <Callout
+            style={{ zIndex: 1000, elevation: 1000 }}
+        >
             <View style={{ width: 160 }}>
                 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                     <BusIcon name={routeName} color={tintColor} isCallout={true} />

diff --git a/app/components/map/StopCallout.tsx b/app/components/map/StopCallout.tsx
@@ -36,7 +36,15 @@ const StopCallout: React.FC<Props> = ({ stop, tintColor, routeName }) => {
     }, [stopEstimates])
 
     return (
-        <Callout style={{ alignItems: 'center', width: contentSize[0], height: contentSize[1] }}>
+        <Callout 
+            style={{ 
+                alignItems: 'center',
+                width: contentSize[0],
+                height: contentSize[1],
+                zIndex: 1000,
+                elevation: 1000 
+            }}
+        >
             <View onLayout={handleLayout} >
                 <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", alignSelf: "flex-start" }}  >
                     <BusIcon name={routeName} color={tintColor} isCallout={true} style={{ marginRight: 8 }} />

diff --git a/app/components/map/markers/BusMarker.tsx b/app/components/map/markers/BusMarker.tsx
@@ -29,7 +29,7 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
             tracksViewChanges={false}
             anchor={{x: 1, y: 1}}
             pointerEvents="auto"
-            style={{ zIndex: 1000, elevation: 1000 }}
+            style={{ zIndex: 100, elevation: 100 }}
         >
             {/* Bus Icon on Map*/}
             <BusMapIcon color={busColor} borderColor={borderColor} heading={bus.location.heading} iconColor={iconColor} />