@navigoo/map-components 1.0.7 → 1.0.9

package/package.json

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

package/src/components/MapView.tsx

@@ -29,6 +29,12 @@ const MapView: React.FC<MapViewProps> = ({
   const clickMarkerRef = useRef<L.Marker | null>(null);
   const routePolylinesRef = useRef<L.Polyline[]>([]);
 
+  // 📍 Définition des limites du Cameroun
+  const CAMEROON_BOUNDS = L.latLngBounds(
+    [1.65, 8.4],   // Coin sud-ouest
+    [13.08, 16.2]  // Coin nord-est
+  );
+
   const parseWKTLineString = (wkt: string): [number, number][] => {
     try {
       const geo = parse(wkt);
@@ -50,26 +56,23 @@ const MapView: React.FC<MapViewProps> = ({
     return [];
   };
 
-useEffect(() => {
+  useEffect(() => {
     if (mapContainerRef.current && !mapRef.current) {
-      const maxZoom = 16;
+      const maxZoom = 18;
+      
+      // 🌍 Configuration initiale de la carte
       mapRef.current = L.map(mapContainerRef.current, {
-        center: [7.365, 12.3], // Centre approximatif du Cameroun
-        zoom: 7, // Zoom ajusté pour voir l'ensemble du Cameroun
-        minZoom: 6,
-        maxZoom: maxZoom,
-        maxBounds: [
-          [1.65, 8.4], // Coin sud-ouest du Cameroun
-          [13.08, 16.2], // Coin nord-est du Cameroun
-        ],
+        center: [7.3697, 12.3547], // Centre géographique du Cameroun
+        zoom: 6,
+        minZoom: 5, // Permet un léger recul
+        maxZoom,
+        maxBounds: CAMEROON_BOUNDS,
         maxBoundsViscosity: 1.0,
       });
 
       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,
+        attribution: '© OpenStreetMap contributors',
+        maxZoom,
       }).addTo(mapRef.current);
 
       L.Icon.Default.mergeOptions({
@@ -78,150 +81,57 @@ useEffect(() => {
         shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
       });
 
-
       routeLayerRef.current = L.layerGroup().addTo(mapRef.current);
 
-      mapRef.current.on('click', async (e: L.LeafletMouseEvent) => {
-        const { lat, lng } = e.latlng;
-        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 = null;
-        } else {
-          clickMarkerRef.current = L.marker([lat, lng])
-            .addTo(mapRef.current!)
-            .bindPopup(`<b>${placeName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
-            .openPopup();
-        }
-      });
+      // 🧭 Afficher tout le Cameroun dès le départ
+      mapRef.current.fitBounds(CAMEROON_BOUNDS, { animate: false });
     }
 
     return () => {
-      if (mapRef.current) {
-        mapRef.current.remove();
-        mapRef.current = null;
-      }
+      mapRef.current?.remove();
+      mapRef.current = null;
     };
   }, [apiClient]);
 
   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
+    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) => {
-      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) {
-        mapRef.current!.fitBounds(L.latLngBounds(allCoordinates));
-      }
-    } else if (searchedPlace && searchedPlace.coordinates) {
-      centerOnPoint(searchedPlace.coordinates.lat, searchedPlace.coordinates.lng, searchedPlace.name);
-    } else if (userLocation) {
-      centerOnPoint(userLocation.latitude, userLocation.longitude, 'Votre position');
-    } else {
-      mapRef.current!.setView([7.365, 12.3], 7, { animate: true });
+      // 🗺 Ajustement intelligent de la vue
+      const routeBounds = L.latLngBounds(allCoordinates);
+      const mergedBounds = routeBounds.extend(CAMEROON_BOUNDS); // Ne jamais sortir du pays
+      mapRef.current.fitBounds(mergedBounds, { padding: [30, 30] });
+    } 
+    else if (!routes?.length) {
+      // 🌍 Recentrage sur tout 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;