@navigoo/map-components 1.0.8 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navigoo/map-components",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Reusable React components for mapping and routing in Yaoundé",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/MapView.tsx

@@ -24,17 +24,16 @@ const MapView: React.FC<MapViewProps> = ({
 }) => {
   const mapRef = useRef<L.Map | null>(null);
   const mapContainerRef = useRef<HTMLDivElement>(null);
-  const markerRef = useRef<L.Marker | null>(null);
   const routeLayerRef = useRef<L.LayerGroup | null>(null);
-  const clickMarkerRef = useRef<L.Marker | null>(null);
   const routePolylinesRef = useRef<L.Polyline[]>([]);
 
-  // Définition des limites du Cameroun
+  // ✅ Bornes élargies du Cameroun
   const CAMEROON_BOUNDS = L.latLngBounds(
-    [1.65, 8.4],   // Coin sud-ouest
-    [13.08, 16.2]  // Coin nord-est
+    [1.0, 7.8],   // Sud-Ouest
+    [13.5, 16.5]  // Nord-Est
   );
 
+  // 🔍 Fonction pour parser les géométries WKT
   const parseWKTLineString = (wkt: string): [number, number][] => {
     try {
       const geo = parse(wkt);
@@ -42,7 +41,7 @@ const MapView: React.FC<MapViewProps> = ({
         return geo.coordinates.map(([lng, lat]: [number, number]) => [lat, lng] as [number, number]);
       }
     } catch (error) {
-      console.error('wellknown parsing failed:', error);
+      console.error('Erreur de parsing WKT:', error);
     }
     const match = wkt.match(/LINESTRING\s*\(([^)]+)\)/);
     if (match) {
@@ -56,31 +55,27 @@ const MapView: React.FC<MapViewProps> = ({
     return [];
   };
 
+  // 🌍 Initialisation de la carte
   useEffect(() => {
     if (mapContainerRef.current && !mapRef.current) {
       const maxZoom = 18;
-      
-      // Configuration de la carte avec limites strictes
+
       mapRef.current = L.map(mapContainerRef.current, {
-        center: [5.5, 12.0], // Centre du Cameroun
-        zoom: 6, // Zoom pour voir tout le Cameroun
-        minZoom: 6,
-        maxZoom: maxZoom,
+        center: [7.3697, 12.3547], // Centre du Cameroun
+        zoom: 6,
+        minZoom: 5,
+        maxZoom,
         maxBounds: CAMEROON_BOUNDS,
-        maxBoundsViscosity: 1.0, // Empêche complètement le dépassement des limites
+        maxBoundsViscosity: 0.4, // ✅ Souple — permet un léger glissement
       });
 
-      // Forcer la carte à rester dans les limites initiales
-      mapRef.current.setMaxBounds(CAMEROON_BOUNDS);
-
+      // 🗺 Couche OpenStreetMap
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        maxZoom: maxZoom,
-        tileSize: 256,
-        zoomOffset: 0,
-        bounds: CAMEROON_BOUNDS, // Limiter les tuiles aux bounds du Cameroun
+        attribution: '© OpenStreetMap contributors',
+        maxZoom,
       }).addTo(mapRef.current);
 
+      // 🧭 Icônes par défaut
       L.Icon.Default.mergeOptions({
         iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
         iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
@@ -89,188 +84,63 @@ const MapView: React.FC<MapViewProps> = ({
 
       routeLayerRef.current = L.layerGroup().addTo(mapRef.current);
 
-      // Recentrer la carte si l'utilisateur essaie de la faire sortir des limites
-      mapRef.current.on('drag', () => {
-        if (mapRef.current) {
-          const currentCenter = mapRef.current.getCenter();
-          const currentZoom = mapRef.current.getZoom();
-          
-          if (!CAMEROON_BOUNDS.contains(currentCenter)) {
-            mapRef.current.panInsideBounds(CAMEROON_BOUNDS, { animate: true });
-          }
-        }
-      });
-
-      mapRef.current.on('click', async (e: L.LeafletMouseEvent) => {
-        const { lat, lng } = e.latlng;
-        
-        // Vérifier que le clic est dans les limites du Cameroun
-        if (!CAMEROON_BOUNDS.contains([lat, lng])) {
-          return;
-        }
-        
-        const closestPlace = await apiClient.findClosestPlace(lat, lng);
-        const placeName = closestPlace?.name || 'Position sélectionnée';
-
-        if (clickMarkerRef.current) {
-          mapRef.current?.removeLayer(clickMarkerRef.current);
-        }
-        
-        clickMarkerRef.current = L.marker([lat, lng])
-          .addTo(mapRef.current!)
-          .bindPopup(`<b>${placeName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
-          .openPopup();
-      });
+      // ✅ Recentrage automatique après affichage
+      setTimeout(() => {
+        mapRef.current?.invalidateSize();
+        mapRef.current?.fitBounds(CAMEROON_BOUNDS, { animate: true, padding: [20, 20] });
+      }, 300);
     }
 
     return () => {
-      if (mapRef.current) {
-        mapRef.current.remove();
-        mapRef.current = null;
-      }
+      mapRef.current?.remove();
+      mapRef.current = null;
     };
   }, [apiClient]);
 
+  // 🚗 Affichage des itinéraires
   useEffect(() => {
     if (!mapRef.current) return;
 
-    // Nettoyer les couches précédentes
-    if (routeLayerRef.current) {
-      routeLayerRef.current.clearLayers();
-    }
-    if (markerRef.current) {
-      markerRef.current.remove();
-      markerRef.current = null;
-    }
-    if (clickMarkerRef.current) {
-      clickMarkerRef.current.remove();
-      clickMarkerRef.current = null;
-    }
-
+    // Nettoyage avant rendu
+    routeLayerRef.current?.clearLayers();
     routePolylinesRef.current = [];
 
-    // Fonction pour centrer la carte sur un point avec un marqueur
-    const centerOnPoint = async (lat: number, lng: number, placeName: string, zoom: number = 16) => {
-      // Vérifier que le point est dans les limites du Cameroun
-      if (!CAMEROON_BOUNDS.contains([lat, lng])) {
-        console.warn('Le point est en dehors des limites du Cameroun');
-        return;
-      }
-      
-      let displayName = placeName;
-      if (placeName === 'Votre position') {
-        const closestPlace = await apiClient.findClosestPlace(lat, lng);
-        displayName = closestPlace?.name || placeName;
-      }
-      
-      // Supprimer l'ancien marqueur s'il existe
-      if (markerRef.current) {
-        markerRef.current.remove();
-        markerRef.current = null;
-      }
-      
-      mapRef.current!.setView([lat, lng], zoom, { animate: true });
-      markerRef.current = L.marker([lat, lng])
-        .addTo(mapRef.current!)
-        .bindPopup(`<b>${displayName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
-        .openPopup();
-    };
-
     if (routes && routes.length > 0) {
-      // Gérer les itinéraires
       let allCoordinates: [number, number][] = [];
+
       routes.forEach((route, index) => {
         const coordinates: [number, number][] = [];
-        route.steps.forEach((step) => {
+        route.steps.forEach(step => {
           const latLngs = parseWKTLineString(step.geometry);
           if (latLngs.length > 0) coordinates.push(...latLngs);
         });
 
         if (coordinates.length > 0) {
           const color = index === selectedRouteIndex ? 'green' : 'black';
-          const weight = index === selectedRouteIndex ? 5 : 3;
-          const opacity = index === selectedRouteIndex ? 1.0 : 0.5;
-
-          const polyline = L.polyline(coordinates, { color, weight, opacity })
+          const polyline = L.polyline(coordinates, { color, weight: 4, opacity: 0.8 })
             .addTo(routeLayerRef.current!)
-            .on('click', (e: L.LeafletMouseEvent) => {
-              L.DomEvent.stopPropagation(e);
-              setSelectedRouteIndex(index);
-              routePolylinesRef.current.forEach((pl, i) => {
-                pl.setStyle({
-                  color: i === index ? 'green' : 'black',
-                  weight: i === index ? 5 : 3,
-                  opacity: i === index ? 1.0 : 0.5,
-                });
-              });
-              const bounds = polyline.getBounds();
-              const center = bounds.getCenter();
-              L.popup()
-                .setLatLng(center)
-                .setContent(`
-                  <b>Route ${index + 1}</b><br>
-                  Distance: ${route.distance.toFixed(2)} m<br>
-                  Durée: ${(route.duration / 60).toFixed(2)} min<br>
-                  Départ: ${route.startPlaceName || 'Départ'}<br>
-                  Destination: ${route.endPlaceName || 'Destination'}
-                `)
-                .openOn(mapRef.current!);
-            });
-
+            .on('click', () => setSelectedRouteIndex(index));
           routePolylinesRef.current.push(polyline);
-          allCoordinates = [...allCoordinates, ...coordinates];
-
-          if (index === selectedRouteIndex) {
-            const startPoint = coordinates[0];
-            const endPoint = coordinates[coordinates.length - 1];
-            (async () => {
-              let startPlaceName = route.startPlaceName || 'Départ';
-              if (route.startPlaceName === 'Votre position') {
-                const closestStartPlace = await apiClient.findClosestPlace(startPoint[1], startPoint[0]);
-                startPlaceName = closestStartPlace?.name || route.startPlaceName;
-              }
-              L.marker(startPoint).addTo(routeLayerRef.current!).bindPopup(`
-                <b>${startPlaceName}</b><br>Lat: ${startPoint[0].toFixed(6)}<br>Lng: ${startPoint[1].toFixed(6)}
-              `);
-              L.marker(endPoint).addTo(routeLayerRef.current!).bindPopup(`
-                <b>${route.endPlaceName || 'Destination'}</b><br>Lat: ${endPoint[0].toFixed(6)}<br>Lng: ${endPoint[1].toFixed(6)}
-              `);
-            })();
-          }
+          allCoordinates.push(...coordinates);
         }
       });
 
-      if (allCoordinates.length > 0) {
-        // Ajuster la vue pour montrer l'itinéraire, mais dans les limites du Cameroun
-        const routeBounds = L.latLngBounds(allCoordinates);
-        const paddedBounds = routeBounds.pad(0.1); // Ajouter un peu de marge
-        
-        // S'assurer que les bounds ajustées sont dans les limites du Cameroun
-        const finalBounds = L.latLngBounds(
-          [
-            Math.max(paddedBounds.getSouth(), CAMEROON_BOUNDS.getSouth()),
-            Math.max(paddedBounds.getWest(), CAMEROON_BOUNDS.getWest())
-          ],
-          [
-            Math.min(paddedBounds.getNorth(), CAMEROON_BOUNDS.getNorth()),
-            Math.min(paddedBounds.getEast(), CAMEROON_BOUNDS.getEast())
-          ]
-        );
-        
-        mapRef.current!.fitBounds(finalBounds);
-      }
-    } else if (searchedPlace && searchedPlace.coordinates) {
-      centerOnPoint(searchedPlace.coordinates.lat, searchedPlace.coordinates.lng, searchedPlace.name);
-    } else if (userLocation) {
-      centerOnPoint(userLocation.latitude, userLocation.longitude, 'Votre position');
+      // 🗺 Ajustement intelligent de la vue sans sortir du Cameroun
+      const routeBounds = L.latLngBounds(allCoordinates);
+      const mergedBounds = routeBounds.extend(CAMEROON_BOUNDS);
+      mapRef.current.fitBounds(mergedBounds, { padding: [30, 30] });
     } else {
-      // Retour à la vue par défaut du Cameroun
-      mapRef.current!.setView([5.5, 12.0], 6, { animate: true });
-      mapRef.current!.setMaxBounds(CAMEROON_BOUNDS);
+      // 🌍 Recentrage sur le Cameroun si aucun itinéraire
+      mapRef.current.fitBounds(CAMEROON_BOUNDS, { animate: true });
     }
-  }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex]);
+  }, [routes, selectedRouteIndex]);
 
-  return <div className="w-full h-screen" ref={mapContainerRef} />;
+  return (
+    <div
+      ref={mapContainerRef}
+      className="w-full h-screen rounded-xl overflow-hidden shadow-md"
+    />
+  );
 };
 
-export default MapView;
+export default MapView;