Adding Village Name Using Feature Group

src/map_utils.py

@@ -1,14 +1,14 @@
 from branca.element import Template, MacroElement
 
 labels_unverified_requests="""
-    <li><span style='background:#CE3C28;opacity:0.7;'></span>Rescue / إغاثة</li>
-    <li><span style='background:#ED922E;opacity:0.7;'></span>Medical Assistance / مساعدة طبية</li>
-    <li><span style='background:#FFCA92;opacity:0.7;'></span>Shelter / مأوى</li>
-    <li><span style='background:#37A8DA;opacity:0.7;'></span>Food & Water / طعام وماء</li>
-    <li><span style='background:#575757;opacity:0.7;'></span>Danger / مخاطر (تسرب الغاز، تلف في الخدمات العامة...)</li>
-    <li><span style='background:#6EAA25;opacity:0.7;'></span>Done / تم</li>
-    <li><span style='background:#023020;opacity:0.7;'></span>Partial / تم جزئيا</li>
-    <li><span style='background:#FF91E8;opacity:0.7;'></span>Planned / مخطط لها</li>
+    <li><span style='background:#CE3C28;opacity:0.7;'></span>Rescue / Secours / إغاثة</li>
+    <li><span style='background:#ED922E;opacity:0.7;'></span>Medical Assistance / Assistance Médicale / مساعدة طبية</li>
+    <li><span style='background:#FFCA92;opacity:0.7;'></span>Shelter / Abris / مأوى</li>
+    <li><span style='background:#37A8DA;opacity:0.7;'></span>Food & Water / Nourriture et eau / طعام وماء</li>
+    <li><span style='background:#575757;opacity:0.7;'></span>Dangers / Dangers / مخاطر</li>
+    <li><span style='background:#6EAA25;opacity:0.7;'></span>Done / terminée / تم</li>
+    <li><span style='background:#023020;opacity:0.7;'></span>Partial / Partiellement terminée / تم جزئيا</li>
+    <li><span style='background:#FF91E8;opacity:0.7;'></span>Planned / Prévue / مخطط لها</li>
 """
 labels_verified="""
     <li><span style='background:#CE3C28;opacity:0.7;'></span>High Emergency / طوارئ عالية</li>
@@ -55,7 +55,7 @@ template_1 = """
     style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8);
      border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'>
      
-<div class='legend-title'>Legend / مفتاح الخريطة</div>
+<div class='legend-title'>Legend / Nomenclature / مفتاح الخريطة</div>
 <div class='legend-scale'>
   <ul class='legend-labels'>
 

src/utils.py

@@ -7,6 +7,7 @@ import streamlit as st
 
 EPICENTER_LOCATION = [31.12210171476489, -8.42945837915193]
 BORDER_COLOR = "black"
+DOUARS_URL = "data/regions.json"
 
 # @st.cache_resource
 def parse_gg_sheet(url):
@@ -15,6 +16,12 @@ def parse_gg_sheet(url):
     df = pd.read_csv(url, on_bad_lines="warn")
     return df
 
+def parse_json_file(url):
+    df = pd.read_json(url)
+    df = pd.json_normalize(df.douars)
+    return df
+
+douar_df = parse_json_file(DOUARS_URL)
 
 def is_request_in_list(request, selection_list, options):
     if isinstance(request, float):  # Check if the input is a float (like NaN)
@@ -118,6 +125,27 @@ def add_danger_distances_to_map(map_obj):
         ).add_to(Danger_Distances_group)
 
 
+def add_village_names(douar_df, map_obj): 
+    village_fgroup = folium.FeatureGroup(name='🔵 All the Villages / Tous les villages / جميع القرى', show=False).add_to(map_obj)
+
+    for _, row in douar_df.iterrows():
+        lat = row['lat']
+        lng = row['lng']
+        lat_lng = (lat, lng)
+        dour_name = row['name'].capitalize()
+        maps_url = f"https://maps.google.com/?q={lat_lng}"
+        display_text = f'<br><b>⛰️ Douar:</b> {dour_name}<br><a href="{maps_url}" target="_blank" rel="noopener noreferrer"><b>🧭 Google Maps</b></a>'
+
+        folium.CircleMarker(
+            location=[lat, lng],
+            radius=0.1,
+            tooltip = dour_name, # we might remove the tooltip to avoid crowding the map 
+            popup=folium.Popup(display_text, max_width=200),
+            color= "#0046C8",
+            opacity = 0.7
+        ).add_to(village_fgroup)
+
+
 def init_map():
     m = folium.Map(
         location=[31.228674, -7.992047],
@@ -159,6 +187,7 @@ def init_map():
     # Add danger zones
     add_epicentre_to_map(m)
     add_danger_distances_to_map(m)
+    add_village_names(douar_df, m)
 
     # Add a LayerControl to the map to toggle between layers (Satellite View and Default One)
     folium.LayerControl().add_to(m)