Added colors and legend

app.py

@@ -207,6 +207,40 @@ def visualize(filtered_data, stop_name):
     4:'Crushed standing room',
     5: 'Full'}
 
+    legend_html = '''
+        <style>
+        .legend-box {
+            position: relative;
+            width: 250px;
+            background-color: white;
+            padding: 10px;
+            border: 2px solid grey;
+            border-radius: 5px;
+            font-size: 14px;
+        }
+        .legend-box div {
+            margin-bottom: 5px;
+        }
+        .legend-box i {
+            width: 20px;
+            height: 10px;
+            display: inline-block;
+            margin-right: 5px;
+        }
+        </style>
+        <div class="legend-box">
+            <b>Occupancy Legend:</b><br>
+            <div><i style="background: green;"></i>Empty</div>
+            <div><i style="background: blue;"></i>Many seats available</div>
+            <div><i style="background: purple;"></i>Few seats available</div>
+            <div><i style="background: pink;"></i>Standing room only</div>
+            <div><i style="background: orange;"></i>Crushed standing room</div>
+            <div><i style="background: red;"></i>Full</div>
+            <div><i style="background: black;"></i>Your stop</div>
+        </div>
+        '''
+    #st.markdown(legend_html, unsafe_allow_html=True)
+
     # Create a folium map centered around a location
     m = folium.Map(location=[filtered_data.iloc[0]["stop_lat"], filtered_data.iloc[0]["stop_lon"]], zoom_start=12)
 
@@ -222,7 +256,49 @@ def visualize(filtered_data, stop_name):
                 [row['stop_lat'], row['stop_lon']],
             
                 popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
-                icon = folium.Icon(color="darkpurple", icon="bus-simple", prefix="fa")
+                icon = folium.Icon(color="black", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 0:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="green", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 1:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="blue", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 2:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="purple", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 3:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="pink", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 4:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="orange", icon="bus-simple", prefix="fa")
+            ).add_to(m)
+        elif row['vehicle_occupancystatus'] == 5:
+            folium.Marker(
+                [row['stop_lat'], row['stop_lon']],
+            
+                popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
+                icon = folium.Icon(color="red", icon="bus-simple", prefix="fa")
             ).add_to(m)
         else:
             folium.Marker(
@@ -230,9 +306,19 @@ def visualize(filtered_data, stop_name):
                 popup=f"Bus stop: {row['stop_name']} Bus occupancy: {categories[row['vehicle_occupancystatus']] }",
                 icon = folium.Icon(icon="bus-simple", prefix="fa")
             ).add_to(m)
+    
+    # Layout: Split screen into two columns
+    col1, col2 = st.columns([3, 1])  # Adjust proportions (3:1) as needed
+
+    # Display Folium map in the first column
+    with col1:
+        st_folium(m, width=700, height=500)
 
+    # Display Legend in the second column
+    with col2:
+        st.markdown(legend_html, unsafe_allow_html=True)
     # Display the map
-    st_folium(m, width=700, height=500)
+    #st_folium(m, width=700, height=500)
 
 def drop_the_duplicates(df):