Adding Village Names with Popup + Updating the Legend

app.py

@@ -20,11 +20,12 @@ from src.text_content import (
     REVIEW_TEXT,
     SLOGAN,
 )
-from src.utils import add_latlng_col, init_map, parse_gg_sheet
+from src.utils import add_latlng_col, init_map, parse_gg_sheet, parse_json_file
 
 TOKEN = os.environ.get("HF_TOKEN", None)
 REQUESTS_URL = "https://docs.google.com/spreadsheets/d/1gYoBBiBo1L18IVakHkf3t1fOGvHWb23loadyFZUeHJs/edit#gid=966953708"
 INTERVENTIONS_URL = "https://docs.google.com/spreadsheets/d/1eXOTqunOWWP8FRdENPs4cU9ulISm4XZWYJJNR1-SrwY/edit#gid=2089222765"
+DOUARS_URL = "https://raw.githubusercontent.com/fqa-cyber/nt3awnou/main/regions.json"
 api = HfApi(TOKEN)
 
 
@@ -117,6 +118,21 @@ def show_requests(filtered_df):
             ),
         ))
 
+def display_douars(douar_df):
+    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>'
+
+        fg.add_child(folium.CircleMarker(
+            location=[lat, lng],
+            radius=1,
+            tooltip = dour_name, # we might remove the tooltip to avoid crowding the map 
+            popup=folium.Popup(display_text, max_width=200),
+        ))
 
 def display_google_sheet_tables(data_url):
     """Display the google sheet tables for requests and interventions"""
@@ -232,6 +248,8 @@ df = parse_gg_sheet(REQUESTS_URL)
 df = add_latlng_col(df, process_column=15)
 interventions_df = parse_gg_sheet(INTERVENTIONS_URL)
 interventions_df = add_latlng_col(interventions_df, process_column=12)
+douar_df = parse_json_file(DOUARS_URL)
+
 m = init_map()
 fg = folium.FeatureGroup(name="Markers")
 
@@ -267,6 +285,15 @@ show_interventions = st.checkbox(
     value=True,
 )
 
+# Selection of all Moroccan Douars
+# Maybe create a two streamlit columns with intervention checkbox | Douar Checkbox
+# We might remove this checkbox and always show it in the map
+
+#show_douars = st.checkbox(
+#    "Display All the villages | عرض جميع القرى | Afficher tous les villages",
+#    value=True,
+#)
+
 # Categories of villages
 
 st.markdown(
@@ -321,6 +348,13 @@ if show_interventions:
     ]
     display_interventions(interventions_df)
 
+# Displaying douars with checkbox
+#if show_douars:
+#    display_douars(douar_df)
+
+
+# Display automatically the douars without checkbox
+display_douars(douar_df)
 # Show requests
 show_requests(filtered_df)
 

src/map_utils.py

@@ -37,17 +37,18 @@ template = """
     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'>
-    <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><div class='circle' style='background:#2F7FEC;opacity:0.7;'></div> All the Villages / Tous les villages / جميع القرى</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>Danger / Danger /مخاطر (تسرب الغاز، تلف في الخدمات العامة...)</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>
   </ul>
 </div>
 </div>
@@ -87,6 +88,15 @@ template = """
     margin-left: 0;
     border: 1px solid #999;
     }
+  .circle {
+    position:relative;
+    border-radius: 50%;
+    margin-right: 1.2em;
+    margin-left: 1em;
+    width: 10px;
+    height: 10px; 
+    float:left;
+  }
   .maplegend .legend-source {
     font-size: 80%;
     color: #777;

src/utils.py

@@ -12,6 +12,11 @@ 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
+
 # Session for Requests
 # session = requests.Session()
 # @st.cache_data(persist=True)