Documentación del Componente SellersMap.jsx
El componente SellersMap
es una vista interactiva basada en Leaflet que permite visualizar en un mapa la ubicación de todos los vendedores registrados y del usuario autenticado.
Funcionalidad General
- Muestra un mapa centrado inicialmente en San Salvador (
[13.697, -89.232]
). - Usa OpenStreetMap y la librería Leaflet para renderizar el mapa.
- Agrega marcadores personalizados para:
- Vendedores
- Usuario actual
- Muestra los datos recuperados desde servicios API:
getSellers()
→ obtiene la lista de vendedoresgetUserInfo()
→ obtiene la ubicación del usuario
Estado y Hooks
Estado | Tipo | Descripción |
---|---|---|
mapLoaded |
boolean | Indica si Leaflet se cargó correctamente |
sellers |
array | Lista de vendedores con coordenadas de ubicación |
user |
object | Usuario autenticado con ubicación |
loading |
boolean | Indica si los datos aún están cargando |
mapRef |
ref | Referencia DOM al contenedor del mapa |
Lógica del Componente
1. Carga de datos
- Se usan
useEffect
yPromise.all()
para obtener la información del usuario y vendedores al montar el componente.
2. Carga dinámica de Leaflet
- Se inserta el CSS y JS de Leaflet manualmente si aún no están presentes en
window
.
3. Renderizado del mapa
- Se crean instancias de
L.map
,L.tileLayer
,L.marker
yL.divIcon
. - Los marcadores se agrupan en un
featureGroup
para ajustar el zoom automáticamente.
Personalización de Marcadores
Vendedores
- Ícono circular verde con animación de pulso.
- Tooltip interactivo con nombre del vendedor.
Usuario
- Ícono azul con sombra y texto.
- Popup que indica "Tú".
Funcionalidades Interactivas
- Hover: muestra
popup
con datos del marcador. - Click: centra el mapa sobre el marcador seleccionado.
- Control personalizado: botón "🎯" que ajusta el mapa para mostrar todos los marcadores visibles.
- Control de escala: añadido con
L.control.scale()
.
Dependencias
Leaflet
: para la renderización del mapa.UserService
: funcionesgetSellers()
ygetUserInfo()
.lucide-react
: íconos del encabezado.- React:
useState
,useEffect
,useRef
.
Vista Renderizada
- Encabezado con título y descripción.
- Contenedor de mapa con mínimo de 400px de alto.
- Indicador de carga animado (
spinner
) mientras se obtienen datos o se carga Leaflet.
Consideraciones
- Todos los íconos y estilos son personalizados para mejorar la UX.
- Uso de referencias DOM seguras y limpieza del mapa al desmontar.
- Es completamente reutilizable y responsivo.