@navigoo/map-components 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navigoo/map-components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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);
@@ -52,18 +58,27 @@ const MapView: React.FC<MapViewProps> = ({
 
   useEffect(() => {
     if (mapContainerRef.current && !mapRef.current) {
+      const maxZoom = 18;
+      
+      // Configuration de la carte avec limites strictes
       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
+        center: [5.5, 12.0], // Centre du Cameroun
+        zoom: 6, // Zoom pour voir tout le Cameroun
         minZoom: 6,
-        maxZoom: 16,
-        maxBounds: [[1.65, 8.4], [13.08, 16.2]], // Limites pour le Cameroun
-        maxBoundsViscosity: 1.0,
+        maxZoom: maxZoom,
+        maxBounds: CAMEROON_BOUNDS,
+        maxBoundsViscosity: 1.0, // Empêche complètement le dépassement des limites
       });
 
+      // Forcer la carte à rester dans les limites initiales
+      mapRef.current.setMaxBounds(CAMEROON_BOUNDS);
+
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-        maxZoom: 16,
+        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
       }).addTo(mapRef.current);
 
       L.Icon.Default.mergeOptions({
@@ -74,20 +89,37 @@ 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 = 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();
         }
+        
+        clickMarkerRef.current = L.marker([lat, lng])
+          .addTo(mapRef.current!)
+          .bindPopup(`<b>${placeName}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`)
+          .openPopup();
       });
     }
 
@@ -119,6 +151,12 @@ const MapView: React.FC<MapViewProps> = ({
 
     // 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);
@@ -203,14 +241,32 @@ const MapView: React.FC<MapViewProps> = ({
       });
 
       if (allCoordinates.length > 0) {
-        mapRef.current!.fitBounds(L.latLngBounds(allCoordinates));
+        // 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');
     } else {
-      mapRef.current!.setView([7.365, 12.3], 7, { animate: true });
+      // Retour à la vue par défaut du Cameroun
+      mapRef.current!.setView([5.5, 12.0], 6, { animate: true });
+      mapRef.current!.setMaxBounds(CAMEROON_BOUNDS);
     }
   }, [apiClient, userLocation, searchedPlace, routes, selectedRouteIndex, setSelectedRouteIndex]);