change map layout

app/routes.py

@@ -24,7 +24,7 @@ from collections import defaultdict
 
 from flask import Blueprint, render_template, request, url_for, redirect
 import folium
-from folium.plugins import MarkerCluster
+from folium.plugins import MarkerCluster, MiniMap
 from pymongo import ASCENDING
 
 
@@ -193,6 +193,8 @@ def geolocalisation():
 
     m = folium.Map(location=[46.603354, 1.888334], zoom_start=6)
     marker_cluster = MarkerCluster().add_to(m)
+    minimap = MiniMap()
+    m.add_child(minimap)
 
     markers = defaultdict(list)
 
@@ -204,25 +206,41 @@ def geolocalisation():
         url = result['url']
         latitude = place['latitude']
         longitude = place['longitude']
-        markers[place_name].append([url, latitude, longitude, filename])
+        name_prince = result['prince_name']
+        dateday = result['date']
+        markers[place_name].append([url, latitude, longitude, filename, name_prince, dateday])
 
     for key, value in markers.items():
         name = key.capitalize()
         latitude = value[0][1]
         longitude = value[0][2]
-        urls = [(url[0], url[3]) for url in value]
+        urls = [(url[0], url[-2], url[-1]) for url in value]
-        # print("urls", urls)
+        actes_place = [f"<a href='{item[0]}' target='_top'>{item[1]} ({item[2]})</a><br />" for item in urls]
-        popup = [f"{name}<br/>"]
+        popup_text =f"""
-        for location, see in urls:
+                <div style='max-height: 200px; overflow-y: auto;'>
-            popup.append(f"<a href='{location}' target='_top'>{see}</a><br/>")
+                    <h2 style="text-align: center;">{name}</h2>
-        popup = "".join(popup)
+                    <div style="font-size: 16px;">
+                        {''.join(actes_place)}
+                    </div>
+                </div>
+            """
+        popup = folium.Popup(popup_text, min_width=100, max_width=400)
         if latitude is not None:
-            folium.Marker(
+            folium.CircleMarker(  # choice : marker (Circle, CircleMarker or Marker, optional)
                 location=[latitude, longitude],
+                radius = 15,
                 popup=popup,
-                icon=folium.Icon(color='lightgray', icon="circle", prefix='fa')
+                color='darkblue',
+                opacity=0.4,
+                fill_color='blue',
+                fill_opacity=0.2
+                # icon=folium.Icon(color='darkblue', icon="cloud", prefix='fa')
             ).add_to(marker_cluster)
             # to remove marker_cluster : .add_to(m)
+            # marker's colors : 'red', 'blue', 'gray', 'darkred', 'lightred', 
+            # 'orange', 'beige', 'green', 'darkgreen', 'lightgreen', 'darkblue',
+            # 'lightblue', 'purple', 'darkpurple', 'pink', 'cadetblue',
+            # 'lightgray', 'black'
 
     geolocalisation = m._repr_html_()
     return render_template("map.html", geolocalisation=geolocalisation)