All tweaks added

frontend/src/components/activity/ActivityMap.jsx

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'react'
 import L from 'leaflet'
 import { sportColor } from '../../utils/format'
 
-// Fix Leaflet default icon issue with bundlers
 delete L.Icon.Default.prototype._getIconUrl
 L.Icon.Default.mergeOptions({
   iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
@@ -10,103 +9,87 @@ L.Icon.Default.mergeOptions({
   shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
 })
 
+const TILE_LAYERS = {
+  dark: {
+    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
+  },
+  street: {
+    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
+  },
+  satellite: {
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    attribution: '© <a href="https://www.esri.com/">Esri</a>',
+  },
+}
+
 function decodePolyline(encoded) {
-  // Simple polyline decoder
   const coords = []
   let index = 0, lat = 0, lng = 0
-
   while (index < encoded.length) {
     let b, shift = 0, result = 0
-    do {
-      b = encoded.charCodeAt(index++) - 63
-      result |= (b & 0x1f) << shift
-      shift += 5
-    } while (b >= 0x20)
+    do { b = encoded.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5 } while (b >= 0x20)
     lat += (result & 1) ? ~(result >> 1) : result >> 1
-
     shift = 0; result = 0
-    do {
-      b = encoded.charCodeAt(index++) - 63
-      result |= (b & 0x1f) << shift
-      shift += 5
-    } while (b >= 0x20)
+    do { b = encoded.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5 } while (b >= 0x20)
     lng += (result & 1) ? ~(result >> 1) : result >> 1
-
     coords.push([lat / 1e5, lng / 1e5])
   }
   return coords
 }
 
-export default function ActivityMap({ polyline, dataPoints, hoveredDistance, sportType }) {
+export default function ActivityMap({ polyline, dataPoints, hoveredDistance, sportType, mapType = 'dark' }) {
   const mapRef = useRef(null)
   const mapInstanceRef = useRef(null)
   const markerRef = useRef(null)
   const trackRef = useRef(null)
+  const tileLayerRef = useRef(null)
 
   useEffect(() => {
     if (!mapRef.current || mapInstanceRef.current) return
-
-    mapInstanceRef.current = L.map(mapRef.current, {
-      zoomControl: true,
-      attributionControl: true,
-    })
-
-    // Use CartoDB dark tiles (no API key needed)
-    L.tileLayer(
-      'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
-      {
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
-        maxZoom: 19,
-      }
-    ).addTo(mapInstanceRef.current)
-
-    return () => {
-      mapInstanceRef.current?.remove()
-      mapInstanceRef.current = null
-    }
+    mapInstanceRef.current = L.map(mapRef.current, { zoomControl: true, attributionControl: true })
+    const tile = TILE_LAYERS['dark']
+    tileLayerRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: 19 })
+      .addTo(mapInstanceRef.current)
+    return () => { mapInstanceRef.current?.remove(); mapInstanceRef.current = null }
   }, [])
 
-  // Draw route when polyline changes
+  // Switch tile layer when mapType changes
+  useEffect(() => {
+    if (!mapInstanceRef.current) return
+    const tile = TILE_LAYERS[mapType] || TILE_LAYERS.dark
+    if (tileLayerRef.current) {
+      tileLayerRef.current.remove()
+    }
+    tileLayerRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: 19 })
+      .addTo(mapInstanceRef.current)
+  }, [mapType])
+
+  // Draw route
   useEffect(() => {
     if (!mapInstanceRef.current || !polyline) return
-
-    if (trackRef.current) {
-      trackRef.current.remove()
-    }
-
+    if (trackRef.current) trackRef.current.remove()
     const coords = decodePolyline(polyline)
     if (!coords.length) return
-
-    trackRef.current = L.polyline(coords, {
-      color: sportColor(sportType),
-      weight: 3,
-      opacity: 0.9,
-    }).addTo(mapInstanceRef.current)
-
+    trackRef.current = L.polyline(coords, { color: sportColor(sportType), weight: 3, opacity: 0.9 })
+      .addTo(mapInstanceRef.current)
     mapInstanceRef.current.fitBounds(trackRef.current.getBounds(), { padding: [20, 20] })
-
-    // Start/end markers
     if (coords.length > 0) {
-      const startIcon = L.divIcon({
-        html: '<div style="width:12px;height:12px;background:#22c55e;border:2px solid white;border-radius:50%"></div>',
+      const dot = (color) => L.divIcon({
+        html: `<div style="width:12px;height:12px;background:${color};border:2px solid white;border-radius:50%"></div>`,
         iconSize: [12, 12], iconAnchor: [6, 6], className: '',
       })
-      const endIcon = L.divIcon({
-        html: '<div style="width:12px;height:12px;background:#ef4444;border:2px solid white;border-radius:50%"></div>',
-        iconSize: [12, 12], iconAnchor: [6, 6], className: '',
-      })
-      L.marker(coords[0], { icon: startIcon }).addTo(mapInstanceRef.current)
-      L.marker(coords[coords.length - 1], { icon: endIcon }).addTo(mapInstanceRef.current)
+      L.marker(coords[0], { icon: dot('#22c55e') }).addTo(mapInstanceRef.current)
+      L.marker(coords[coords.length - 1], { icon: dot('#ef4444') }).addTo(mapInstanceRef.current)
     }
   }, [polyline, sportType])
 
-  // Move position marker when timeline is hovered
+  // Position marker on timeline hover
   useEffect(() => {
     if (!mapInstanceRef.current || !dataPoints || !hoveredDistance) return
-
     const point = dataPoints.find(p => p.distance_m >= hoveredDistance)
     if (!point?.latitude || !point?.longitude) return
-
     if (markerRef.current) {
       markerRef.current.setLatLng([point.latitude, point.longitude])
     } else {
@@ -114,8 +97,7 @@ export default function ActivityMap({ polyline, dataPoints, hoveredDistance, spo
         html: '<div style="width:14px;height:14px;background:#fff;border:3px solid #3b82f6;border-radius:50%;box-shadow:0 0 6px rgba(59,130,246,0.8)"></div>',
         iconSize: [14, 14], iconAnchor: [7, 7], className: '',
       })
-      markerRef.current = L.marker([point.latitude, point.longitude], { icon })
-        .addTo(mapInstanceRef.current)
+      markerRef.current = L.marker([point.latitude, point.longitude], { icon }).addTo(mapInstanceRef.current)
     }
   }, [hoveredDistance, dataPoints])