MapLibre Assets Animation Research

Investigación y prototipo sobre movimiento de assets (PNG/SVG/Canvas/Lottie) en MapLibre GL JS con Svelte/SvelteKit.

Objetivos

• Evaluar diferentes enfoques para animar marcadores en MapLibre GL JS
• Comparar rendimiento entre SymbolLayer, HTML Markers y Canvas Layer
• Demostrar marcadores animados con trayectoria, rotación por heading y velocidad configurable
• Proporcionar guías de mejores prácticas para assets

Características Implementadas

✅ Métodos de Animación

1. SymbolLayer con addImage()

   • Uso de map.addImage() para cargar assets
   • Animación via setData() y requestAnimationFrame
   • Rotación sincronizada con heading
   • Soporte para múltiples marcadores

2. HTML Markers

   • Marcadores DOM personalizados
   • Animación via CSS/JS
   • Rotación con transform: rotate()
   • Mayor flexibilidad en el diseño

3. Canvas Layer

   • Capa personalizada de canvas
   • Renderizado directo de assets
   • Optimizado para múltiples objetos móviles
   • Mejor rendimiento con muchos marcadores

✅ Funcionalidades

• Rutas de Prueba: Generación automática de rutas circulares
• Interpolación: Movimiento suave entre puntos
• Rotación por Heading: Sincronización con dirección de movimiento
• Controles de Reproducción: Play/Pause, velocidad (0.5x-4x), reset
• Monitoreo de Rendimiento: FPS, frame time, conteo de marcadores
• Múltiples Marcadores: Soporte para 1-1000+ marcadores

Instalación y Uso

# Instalar dependencias
npm install

# Ejecutar en modo desarrollo
npm run dev

# Construir para producción
npm run build

# Vista previa de producción
npm run preview

Estructura del Proyecto

src/
├── lib/
│   ├── MapLibreMap.svelte          # Componente base del mapa
│   ├── AnimationControls.svelte    # Controles de animación
│   ├── PerformanceMonitor.svelte   # Monitor de rendimiento
│   ├── SymbolLayerAnimation.svelte # Animación con SymbolLayer
│   ├── HTMLMarkerAnimation.svelte  # Animación con HTML Markers
│   ├── CanvasLayerAnimation.svelte # Animación con Canvas Layer
│   └── animationUtils.js           # Utilidades de animación
├── routes/
│   └── +page.svelte               # Página principal
└── app.css                        # Estilos globales

static/
└── assets/
    ├── car.svg                    # Icono de automóvil
    ├── plane.svg                  # Icono de avión
    └── ship.svg                   # Icono de barco

Guía de Assets

Formatos Recomendados

1. SVG (Recomendado)

   • Escalable sin pérdida de calidad
   • Tamaño de archivo pequeño
   • Soporte nativo en navegadores
   • Ideal para iconos simples

2. PNG

   • Buena calidad para iconos complejos
   • Soporte para transparencia
   • Tamaño de archivo mayor que SVG
   • Requiere múltiples resoluciones

3. Canvas (Para animaciones complejas)

   • Máximo control sobre renderizado
   • Ideal para efectos visuales
   • Requiere más recursos computacionales

Tamaños Recomendados

• @1x: 32x32px (resolución estándar)
• @2x: 64x64px (pantallas de alta densidad)
• @3x: 96x96px (pantallas de muy alta densidad)

Mejores Prácticas

1. Sprites vs Individuales

   • Sprites: Mejor para muchos iconos pequeños
   • Individuales: Mejor para iconos grandes o únicos

2. Optimización

   • Minimizar número de vértices en SVG
   • Usar colores sólidos cuando sea posible
   • Comprimir archivos PNG
   • Considerar WebP para mejor compresión

3. Rendimiento

   • Limitar número de assets únicos
   • Reutilizar assets cuando sea posible
   • Usar Canvas Layer para >100 marcadores
   • Implementar culling (no renderizar fuera del viewport)

Resultados de Rendimiento

SymbolLayer

• ✅ Buen rendimiento hasta ~50 marcadores
• ✅ Fácil implementación
• ❌ Limitado por número de fuentes de datos

HTML Markers

• ✅ Máxima flexibilidad visual
• ✅ Fácil personalización
• ❌ Rendimiento degradado con muchos marcadores
• ❌ No se beneficia de aceleración por hardware del mapa

Canvas Layer

• ✅ Mejor rendimiento con muchos marcadores (>100)
• ✅ Control total sobre renderizado
• ✅ Aceleración por hardware
• ❌ Implementación más compleja
• ❌ Limitado por resolución del canvas

Recomendaciones

1. < 50 marcadores: Usar SymbolLayer
2. 50-100 marcadores: Evaluar según complejidad visual
3. > 100 marcadores: Usar Canvas Layer
4. Animaciones complejas: Canvas Layer o HTML Markers
5. Iconos simples: SymbolLayer con SVG
6. Iconos complejos: HTML Markers o Canvas Layer

Tecnologías Utilizadas

• SvelteKit: Framework de desarrollo
• MapLibre GL JS: Biblioteca de mapas
• Vite: Herramienta de construcción
• SVG: Formato de assets principal

Licencia

Este proyecto es para fines de investigación y demostración.