@navigoo/map-components 1.0.3 → 1.0.5

package/package.json

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

package/src/components/MapView.tsx

@@ -53,11 +53,11 @@ const MapView: React.FC<MapViewProps> = ({
   useEffect(() => {
     if (mapContainerRef.current && !mapRef.current) {
       mapRef.current = L.map(mapContainerRef.current, {
-        center: [3.8480, 11.5021], // Centre par défaut : Yaoundé
-        zoom: 12,
-        minZoom: 11,
+        center: [7.365, 12.3], // Centre approximatif du Cameroun
+        zoom: 7, // Zoom ajusté pour voir l'ensemble du Cameroun
+        minZoom: 6,
         maxZoom: 16,
-        maxBounds: [[3.7, 11.4], [4.0, 11.6]],
+        maxBounds: [[1.65, 8.4], [13.08, 16.2]], // Limites pour le Cameroun
         maxBoundsViscosity: 1.0,
       });
 
@@ -102,17 +102,35 @@ const MapView: React.FC<MapViewProps> = ({
   useEffect(() => {
     if (!mapRef.current) return;
 
-    if (routeLayerRef.current) routeLayerRef.current.clearLayers();
-    if (markerRef.current) markerRef.current.remove();
-    if (clickMarkerRef.current) clickMarkerRef.current.remove();
+    // 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;
+    }
+
     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!)
@@ -121,6 +139,7 @@ const MapView: React.FC<MapViewProps> = ({
     };
 
     if (routes && routes.length > 0) {
+      // Gérer les itinéraires
       let allCoordinates: [number, number][] = [];
       routes.forEach((route, index) => {
         const coordinates: [number, number][] = [];
@@ -191,7 +210,7 @@ const MapView: React.FC<MapViewProps> = ({
     } else if (userLocation) {
       centerOnPoint(userLocation.latitude, userLocation.longitude, 'Votre position');
     } else {
-      mapRef.current!.setView([3.8480, 11.5021], 12, { animate: true });
+      mapRef.current!.setView([7.365, 12.3], 7, { animate: true });
     }
   }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex]);