From 2b6e41184c3826de6e17b80d82e495bb47ba0db4 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 13 Apr 2025 11:25:50 +0000
Subject: feat: Add map state management and enhanced location control

---
 src/controls/LocateControl.ts | 70 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 3 deletions(-)

(limited to 'src/controls/LocateControl.ts')

diff --git a/src/controls/LocateControl.ts b/src/controls/LocateControl.ts
index 4ef8243..8153cf1 100644
--- a/src/controls/LocateControl.ts
+++ b/src/controls/LocateControl.ts
@@ -1,7 +1,71 @@
-import {createControlComponent} from '@react-leaflet/core';
-import {LocateControl as LeafletLocateControl} from 'leaflet.locatecontrol';
+import { createControlComponent } from '@react-leaflet/core';
+import { LocateControl as LeafletLocateControl, LocateOptions } from 'leaflet.locatecontrol';
 import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+import { useApp } from '../AppContext';
 
+interface EnhancedLocateControlProps {
+  options?: LocateOptions;
+}
+
+// Componente que usa el contexto para manejar la localización
+export const EnhancedLocateControl = (props: EnhancedLocateControlProps) => {
+  const map = useMap();
+  const { mapState, setUserLocation, setLocationPermission } = useApp();
+  
+  useEffect(() => {
+    // Configuración por defecto del control de localización
+    const defaultOptions: LocateOptions = {
+      position: 'topright',
+      strings: {
+        title: 'Mostrar mi ubicación',
+      },
+      flyTo: true,
+      onLocationError: (err) => {
+        console.error('Error en la localización:', err);
+        setLocationPermission(false);
+      },
+      onLocationFound: (e) => {
+        setUserLocation([e.latitude, e.longitude]);
+        setLocationPermission(true);
+      },
+      returnToPrevBounds: true,
+      showPopup: false,
+    };
+
+    // Combinamos las opciones por defecto con las personalizadas
+    const options = { ...defaultOptions, ...props.options };
+    
+    // Creamos la instancia del control
+    const locateControl = new LeafletLocateControl(options);
+    
+    // Añadimos el control al mapa
+    locateControl.addTo(map);
+
+    // Si tenemos permiso de ubicación y ya conocemos la ubicación del usuario,
+    // podemos activarla automáticamente
+    if (mapState.hasLocationPermission && mapState.userLocation) {
+      // Esperamos a que el mapa esté listo
+      setTimeout(() => {
+        try {
+          locateControl.start();
+        } catch (e) {
+          console.error('Error al iniciar la localización automática', e);
+        }
+      }, 1000);
+    }
+
+    return () => {
+      // Limpieza al desmontar el componente
+      locateControl.remove();
+    };
+  }, [map, mapState.hasLocationPermission, mapState.userLocation, props.options, setLocationPermission, setUserLocation]);
+
+  return null;
+};
+
+// Exportamos también el control base por compatibilidad
 export const LocateControl = createControlComponent(
-    (props) => new LeafletLocateControl(props)
+  (props) => new LeafletLocateControl(props)
 );
\ No newline at end of file
-- 
cgit v1.3