Técnicas de optimización para visualización en mapas 🗺️

Raúl Jiménez Ortega | @hhkaos

Dataviz

 

preguntar quien ha hecho una visualiz con +1000 datos en un mapa , +10.000, +100.000, … Quería contaros cómo fue mi primera experiencia (o drama) que acontenció por estas fechas hacer 10 años, marzo/abril de 2014. Nada más empezar mi nuevo trabajo en Esri, se acercó mi jefe muy emocionado y me dijo… Raúl, el responsable de marketing ha hablado con la gente de El País, el periódico, y vamos a hacer una Geoporra para la final de la Champions League del mes que viene (Madrid - Atlético) …

Montamos un servidor de mapas PostgreSQL Final de la Champions League Yo nuevo en mapas, vamos a crear unos índices espaciales, postgres…. petaba

Bueno Periódico, página de clasificados, b2b, agencias

Raúl Jiménez Ortega | @hhkaos

• De Nerja (Málaga)☀️⛴️ ; viviendo en Almería 🌵😎
• Padre de familia 👨‍👩‍👦‍👦
• Geek 👨🏻‍💻
• Product Engineer @ Esri 🥑🇺🇸
• 10 años de GeoDevelopers.org 🗺️🌍

¿Qué podemos optimizar?

1. Tiempos de carga inicial

2. Fluidez de la interacción

FPS Visor web usando <svg> para pintar ~35K municipios de Francia
(45MB de JSON; +2M vértices)

3. Costes

Modelos de precios de mapas base

Ver: Intro a los mapas base

TECNOLOGÍAS

Estado del arte

Mapas estáticos

• Ejemplos
• Código
• Tecnologías

• ArcGIS Print Service (new API coming soon)
• Geoapify Static Maps API
• Google Map Static API
• Mapbox Static Images API
• MapTiler API
• Mapquest Static Map API
• Thunderforest Static Map API
• …

Las posibilidades varian entre proveedores

Mapas dinámicos

• Ejemplo
• Código
• Tecnologías

• amCharts
• Charts.js
• D3.js geo
• Highcharts
• jVectorMap
• Leaflet
• Raphael.js (mapael)
• SimpleMaps
• …

Mapas interactivos

usan una combinación de canvas y SVG (Limitados a 2D. ) Hasta decenas de miles de puntos, cientos/miles de polígonos combinar con herramientas de análisis espacial en el cliente (filtros espaciales), etc. Buscador de direcciones. Mayores extensiones. Todos permiten mapas de fondo, mapas satélite, etc.

• Ejemplo
• Código
• Tecnologías

• ArcGIS JS SDK 3.x (deprecated)
• Google Maps JavaScript API
• Leaflet^*
• OpenLayers

Mapas inmersivos

WebGL/OpenGL, mayor número de elementos, efectos tipo photoshop, personalizar cambiar el estilo del mapa, rotarlo, 3D,

• Ejemplo
• Código
• Tecnologías

• ArcGIS Maps SDK for JavaScript
• Azure Maps
• CesiumJS
• Deck.gl
• HERE
• Kepler.gl
• Mapbox GL JS
• MapLibre GL JS
• TomTom Maps SDK Web JS

TIEMPOS DE CARGA

Optimizando datasets de cientos de miles o millones de datos y tiempos de respuesta del servidor

Reduce los bytes enviados por la red

Ratio, tiempo de compresión y descompresión por algoritmo | Fuente: OpenCPU

GeoJSON estándard (RFC 7946)

Reduce el tamaño del dataset

Relación entre el número de decimales de una coordenada y la precisión

Y… por supuesto no envíes propiedades que no necesites, elimina espacios, etc (uglify)

Las coordenadas GeoJSON suelen tener por defecto una precisión extrema, a menudo con 15-17 decimales, lo que equivale a una escala atómica. Para la mayoría de las aplicaciones prácticas, se puede reducir la precisión de las coordenadas a unos 6 decimales, lo que equivale aproximadamente a una escala de 1 cm. Esto reduce el tamaño del archivo sin comprometer la usabilidad.

Polígonos o líneas

• TopoJSON
• Convierte y simplifica

Trocea los datos

Data Chunking y visualizaciones sensibles a la escala

• Teselado
• FeatureLayer
• Vector
• Raster
• Tecnologías

• ArcGIS Data Hosting
• GeoServer
• Koop
• Mapbox Tiling Service
• MapTiler GeoData Hosting
• MapServer
• Martin
• Tegola

Cachea, cachea, cachea!

Crea índices espaciales

FLUIDEZ DE LA INTERACCIÓN

• Agrupación = Clustering 🔍
• Mapas de calor = Heatmaps 🔥
• “Contenerización” = Binning 📦
• Análisis en cliente = Client-side analysis 📏📐

Optimizar la renderización/pintado (webgl, renderers) Reducir los tiempos de respuesta (usa la info en el browser) Usa WebGL para grandes cantidades de datos Mueve la máxima cantidad al cliente

Clustering 🔍

para datos de tipo punto

• Intro
• Clase predominante
• Estadísticas
• Variables visuales
• Gráfico circular

Heatmaps 🔥

• Intro
• Dinámico
• Estático
• 3D

Binning 📦

• Intro
• Simple
• Estadísticas

Haz todo lo que puedas en cliente

• Análisis espacial
• Cálculos geométricos
• Estadísticas
• Filtrado
• Pixel

usando blending

COSTES

Open data

• amCharts geodata
• ArcGIS Hub
• Datos abiertos del Gobierno de España
• Free SVG Maps
• Infraestructuras de Datos Espaciales (e.g. IGN)
• OpenStreetMap
• …

Dataviz

Dataviz

CONCLUSIONES

¿Cuál es la mejor tecnología?

¿Cuál es la mejor tecnología?

Depende del caso de uso, y de las necesidades:

• 🎨 De diseño / personalización
• 🤏 De interacción
• 📦 De los tipos de datos
• 📱 De los dispositivos
• ⏱️ De tiempos de carga
• 🧑‍🦽 De accesibilidad
• …

Si pudiese viajar en el tiempo…

Habría:

• Troceado usando feature layers (no imágenes)
• Usado clusters (no puntos)
• Habría usado caché (near real-time)
• Estadísticas en el cliente (no servidor)
• Usado protomaps

¡Gracias!

x.com/hhkaos | github.com/hhkaos/ppt-dataviz/

Autor: Miroslav Umlauf