Update src/modules/map_dashboard.py

src/modules/map_dashboard.py

@@ -120,117 +120,153 @@ def show_map_dashboard(client, sheet_name):
                 st.caption(f"Rev: {row['Revenus']} XOF")
 
     with col_map:
-        # Préparation des données pour Pydeck
-        clients_layer_data = df_map[['lon', 'lat', 'ID', 'Adresse']].copy()
-        
-        # Données HQ
-        hq_data = pd.DataFrame({
-            'lon': [2.396667],
-            'lat': [48.913418],
-            'name': ['HQ - VORTEX'],
-            'elevation': [500]
-        })
-        
-        # Configuration de la vue 3D
-        view_state = pdk.ViewState(
-            latitude=48.913418,
-            longitude=2.396667,
-            zoom=13,
-            pitch=60,  # Inclinaison 3D
-            bearing=0
-        )
-        
-        layers = []
-        
-        # Layer 1: Colonnes 3D pour les clients (losanges bleus)
-        layers.append(
-            pdk.Layer(
-                'ColumnLayer',
-                data=clients_layer_data,
-                get_position='[lon, lat]',
-                get_elevation=200,
-                elevation_scale=1,
-                radius=30,
-                get_fill_color=[37, 193, 247, 200],
-                pickable=True,
-                auto_highlight=True,
-            )
-        )
-        
-        # Layer 2: HQ Pyramide Rouge (style Palantir)
-        layers.append(
-            pdk.Layer(
-                'ColumnLayer',
-                data=hq_data,
-                get_position='[lon, lat]',
-                get_elevation='elevation',
-                elevation_scale=1,
-                radius=50,
-                get_fill_color=[255, 50, 50, 255],
-                pickable=True,
-            )
-        )
-        
-        # Layer 3: Lignes de connexion (si activées)
-        if show_dist:
-            arc_data = []
-            for _, row in df_map.iterrows():
-                arc_data.append({
-                    'source_lon': 2.396667,
-                    'source_lat': 48.913418,
-                    'target_lon': row['lon'],
-                    'target_lat': row['lat']
-                })
-            
-            arc_df = pd.DataFrame(arc_data)
-            
-            layers.append(
-                pdk.Layer(
-                    'ArcLayer',
-                    data=arc_df,
-                    get_source_position='[source_lon, source_lat]',
-                    get_target_position='[target_lon, target_lat]',
-                    get_source_color=[255, 215, 0, 180],
-                    get_target_color=[37, 193, 247, 150],
-                    get_width=2,
-                    pickable=True,
-                )
-            )
-        
-        # Layer 4: Zone de densité (si activée)
-        if show_cluster:
-            avg_lat = df_map['lat'].mean()
-            avg_lon = df_map['lon'].mean()
-            
-            circle_data = pd.DataFrame({
-                'lon': [avg_lon],
-                'lat': [avg_lat],
-                'radius': [2000]
+        # Préparer les données des clients
+        clients_markers = []
+        for _, row in df_map.iterrows():
+            clients_markers.append({
+                'lon': row['lon'],
+                'lat': row['lat'],
+                'id': row['ID'],
+                'adresse': row['Adresse']
             })
-            
-            layers.append(
-                pdk.Layer(
-                    'ScatterplotLayer',
-                    data=circle_data,
-                    get_position='[lon, lat]',
-                    get_radius='radius',
-                    get_fill_color=[84, 189, 75, 80],
-                    pickable=False,
-                )
-            )
         
-        # Rendu final sans attribution
-        st.pydeck_chart(pdk.Deck(
-            map_style='mapbox://styles/mapbox/dark-v10',
-            initial_view_state=view_state,
-            layers=layers,
-            tooltip={
-                'html': '<b>{ID}</b><br>{Adresse}',
-                'style': {
-                    'backgroundColor': '#1a1a1a',
-                    'color': '#25C1F7',
-                    'fontFamily': 'Space Grotesk'
-                }
-            }
-        ))
-        
+        # Créer le HTML avec Mapbox GL
+        mapbox_html = f"""
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <meta charset="utf-8">
+            <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
+            <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
+            <style>
+                body {{ margin: 0; padding: 0; }}
+                #map {{ position: absolute; top: 0; bottom: 0; width: 100%; }}
+            </style>
+        </head>
+        <body>
+            <div id="map"></div>
+            <script>
+                mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; // Token public Mapbox
+                
+                const map = new mapboxgl.Map({{
+                    container: 'map',
+                    style: 'mapbox://styles/mapbox/satellite-streets-v12', // Vue satellite
+                    center: [2.396667, 48.913418],
+                    zoom: 15,
+                    pitch: 60, // Vue 3D inclinée
+                    bearing: 0,
+                    antialias: true
+                }});
+                
+                map.on('load', () => {{
+                    // Activer les bâtiments 3D
+                    map.addLayer({{
+                        'id': '3d-buildings',
+                        'source': 'composite',
+                        'source-layer': 'building',
+                        'filter': ['==', 'extrude', 'true'],
+                        'type': 'fill-extrusion',
+                        'minzoom': 14,
+                        'paint': {{
+                            'fill-extrusion-color': '#aaa',
+                            'fill-extrusion-height': ['get', 'height'],
+                            'fill-extrusion-base': ['get', 'min_height'],
+                            'fill-extrusion-opacity': 0.8
+                        }}
+                    }});
+                    
+                    // Marqueur HQ (Pyramide Rouge)
+                    const hqEl = document.createElement('div');
+                    hqEl.style.width = '30px';
+                    hqEl.style.height = '30px';
+                    hqEl.style.backgroundImage = 'linear-gradient(135deg, #ff3232 0%, #aa0000 100%)';
+                    hqEl.style.transform = 'rotate(45deg)';
+                    hqEl.style.border = '2px solid #fff';
+                    hqEl.style.boxShadow = '0 0 20px rgba(255, 50, 50, 0.8)';
+                    
+                    new mapboxgl.Marker({{element: hqEl}})
+                        .setLngLat([2.396667, 48.913418])
+                        .setPopup(new mapboxgl.Popup().setHTML('<strong>HQ - VORTEX</strong>'))
+                        .addTo(map);
+                    
+                    // Marqueurs Clients (Losanges Bleus)
+                    const clients = {clients_markers};
+                    clients.forEach(client => {{
+                        const el = document.createElement('div');
+                        el.style.width = '20px';
+                        el.style.height = '20px';
+                        el.style.background = 'linear-gradient(135deg, #25C1F7 0%, #0080ff 100%)';
+                        el.style.transform = 'rotate(45deg)';
+                        el.style.border = '1px solid #fff';
+                        el.style.boxShadow = '0 0 15px rgba(37, 193, 247, 0.6)';
+                        el.style.cursor = 'pointer';
+                        
+                        new mapboxgl.Marker({{element: el}})
+                            .setLngLat([client.lon, client.lat])
+                            .setPopup(new mapboxgl.Popup().setHTML(`<strong>${{client.id}}</strong><br>${{client.adresse}}`))
+                            .addTo(map);
+                        
+                        // Lignes de connexion (si activé)
+                        {'if (true) {' if show_dist else 'if (false) {'}
+                            map.addLayer({{
+                                'id': 'line-' + client.id,
+                                'type': 'line',
+                                'source': {{
+                                    'type': 'geojson',
+                                    'data': {{
+                                        'type': 'Feature',
+                                        'geometry': {{
+                                            'type': 'LineString',
+                                            'coordinates': [
+                                                [2.396667, 48.913418],
+                                                [client.lon, client.lat]
+                                            ]
+                                        }}
+                                    }}
+                                }},
+                                'paint': {{
+                                    'line-color': '#FFD700',
+                                    'line-width': 2,
+                                    'line-opacity': 0.6
+                                }}
+                            }});
+                        }}
+                    }});
+                    
+                    // Zone de cluster (si activé)
+                    {'if (true) {' if show_cluster else 'if (false) {'}
+                        map.addLayer({{
+                            'id': 'cluster-zone',
+                            'type': 'circle',
+                            'source': {{
+                                'type': 'geojson',
+                                'data': {{
+                                    'type': 'Feature',
+                                    'geometry': {{
+                                        'type': 'Point',
+                                        'coordinates': [{df_map['lon'].mean()}, {df_map['lat'].mean()}]
+                                    }}
+                                }}
+                            }},
+                            'paint': {{
+                                'circle-radius': {{
+                                    'stops': [[0, 0], [20, 300]]
+                                }},
+                                'circle-color': '#54BD4B',
+                                'circle-opacity': 0.3,
+                                'circle-stroke-width': 2,
+                                'circle-stroke-color': '#54BD4B'
+                            }}
+                        }});
+                    }}
+                }});
+                
+                // Contrôles de navigation
+                map.addControl(new mapboxgl.NavigationControl());
+            </script>
+        </body>
+        </html>
+        """
+        
+        # Afficher la carte
+        st.components.v1.html(mapbox_html, height=600)