Saltar a contenido

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 vendedores
  • getUserInfo() → 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 y Promise.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 y L.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: funciones getSellers() y getUserInfo().
  • 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.