Presentación en el Congreso Geomática Andina 2018

1. Comparación e implementación de
librerías web mapping open source
como herramienta de visualización
del conflicto en Colombia
Cristian Camilo Cruz Rangel
cccruzr.github.io

2. Esquema
1. Introducción y motivación
2. ¿Qué son los mapas web?
3. Leaflet & Mapbox GL
4. Implementación: visualizando patrones del conflicto
5. Conclusiones y trabajo futuro
2

3. Introducción &
Motivación
1

4. Razones técnicas
• Necesidad de visualizar datos → Extraer
información/conocimiento
• Uso de (Free) Open Source Software (F/OSS)
• Integración del web mapping y la cartografía con
otras disciplinas
• Falta de ejemplos cuidadosamente documentados
para seguir como guía
4
INTRODUCTION & MOTIVATION

5. INTRODUCTION & MOTIVATION
5
h ttp s :/ / e lp a is .c o m / in te r n a c io n a l/ 2 0 1 6 / 0 9 / 2 6 / c o lo m b ia / 1 4 7 4 9 1 0 7 2 9 _ 0 3 7 6 1 4 .h tm l
h ttp s :/ / w w w .n y tim e s .c o m / 2 0 1 6 / 1 0 / 0 3 / w o r ld / c o lo m b ia -p e a c e -d e a l-d e fe a t.h tm l
27.09.2016 02.10.2016

6. ¿Qué son los
Mapas Web?
2

7. Web map
• “Un mapa web supone un mapa que más
que estar en la web, es potenciado por la
web”.
• “El uso de la web como medio de
distribución para los mapas puede ser
considerado como un gran avance de la
cartografía”.
7
WEB MAPS
—Foster M. & Woodruff A.
—Neumann A.

8. Tecnologías Web
8
WEB MAPS
Raster Images:
JPG/PNG/GIF
Scalable Vector
Graphics (SVG)
WebGL: Render 2D
+ 3D
HTML Document
Object Model
Asynchronous
JavaScript and XML
(AJAX)
HTML Canvas
(bitmap canvas)
r ig h te y e g r a p h ic s .c o m
u b e r .g ith u b .io / d e c k .g l/
w e b s te p b o o k .c o m
h ttp :/ / 9 e le m e n ts .c o m /

9. N O R S E – L iv e C y b e r A tta c k s : h ttp :/ / m a p .n o r s e c o r p .c o m /
9
WEB MAPS

10. WEB MAPS
R o llin g S to n e s - 5 0 Y r s o f c o n c e r ts : h ttp :/ / r o llin g s to n e s .v iz z u a lity .c o m
10

11. WEB MAPS
T h e R e fu g e e P r o je c t: h ttp :/ / w w w .th e r e fu g e e p r o je c t.o r g
11

12. Web mapping + tecnologías GIS
12
WEB MAPS
A d a p ta d o d e F o s te r M .: h ttp :/ / d u s p v iz .m it.e d u / w e b -m a p -w o r k s h o p /

13. Web mapping + tecnologías GIS
13
WEB MAPS
A d a p ta d o d e F o s te r M .: h ttp :/ / d u s p v iz .m it.e d u / w e b -m a p -w o r k s h o p /

14. WEB MAPS
14A d a p ta d o d e F o s te r M .: h ttp :/ / d u s p v iz .m it.e d u / w e b -m a p -w o r k s h o p /

15. Web map: Propiedades
15
WEB MAPS
NeumannA.:EncyclopediaofGIS
--Sofisticación → ++Sofisticación
Estáticos
(sólo vista)
Vs. Animados
(interactivos)
Simple Vs. Analítico
Basado en archivos
“estáticos”
Vs. Creados dinámicamente
Basados en datos
locales
Vs.
Basados en datos
distribuidos (basesdedatos)
Estático Vs. En tiempo real
Estilo y contenido
pre-definido
Vs.
Estilo y contenido
personalizados
Presentación Vs. Exploración
Audiencia general Vs. Audiencia experta

16. Objetivo del mapa
16
WEB MAPS
• ¿Cuál es mi audiencia?
• Comunicación vs.
Exploración
• Presentar ó revelar
hechos
W o o d r o o f/ F o s te r .: h ttp :/ / d u s p v iz .m it.e d u / w e b -m a p -w o r k s h o p /

17. Los datos importan…
17
WEB MAPS
• Limpieza de datos (data
wrangling)
• Estandarizados,
normalizados,
organizados
• ¿Formato y tipo de
almacenamiento?

18. JavaScript coding
18
WEB MAPS
JavaScript
WebMapping Tutorials:
http://duspviz.mit.edu/tutorials/#webmapping

19. Leaflet &
Mapbox GL
3

20. LEAFLET & MAPBOX GL
• Es la librería JavaScript open-source más popular para la
creación de mapas interactivos
• Diseñada teniendo en mente características como simpleza,
desempeño y usabilidad
• Compatible con la mayoría de plataformas móviles y desktop,
además de ser extensible con plugins oficiales y creados por los
usuarios
20

21. 21
LEAFLET & MAPBOX GL
“Slippy maps” se
componen de
mosaicos (tiles)
256px
256px
.PNG

22. LEAFLET & MAPBOX GL
Niveles de Zoom
Cada nivel de zoom duplica el tamaño del mapa en
ambas direcciones. El número de imágenes está dado
por el nivel de zoom: 4z
Las imágenes son distribuidas
mediante una URL estándar:
https://server-URL/{z}/{x}/{y}.png
22
Zoom 0 Zoom 1 Zoom 2
Estándares

23. LEAFLET & MAPBOX GL
• Librería JavaScript open-source que implementa
WebGL → utiliza el GPU (procesador gráfico)
• Ofrece soporte nativo y un alto desempeño para el
renderizado de mosaicos vectoriales, basados –en su
mayoría- en datos de OpenStreetMap
• Permite al usuario crear y usar estilos personalizados
fácilmente + datos 3D
23

24. LEAFLET & MAPBOX GL
24
Mapbox GL
Vector rendering framework
Client-side
512px
512px
.PBF
Mapbox Studio: https://www.mapbox.com/help/studio-manual/
Style JSON
Instrucciones de
estilo
Sprites+Gliphs
Íconos & fuentes
Tilesets
Datos espaciales

25. Comparación: tamaño del mosaico
Raster tiles
• Tamaño promedio (256×256 px):
~63 KB (OpenStreetMap)
• Conjunto completo de mosaicos pre-
renderizados PNG:
~54 GB (OpenStreetMap)
25
LEAFLET & MAPBOX GL
Estadísticas de mosaicos raster
(OpenStreetMap®)
Vector tiles
• Tamaño promedio (512×512 px):
~50 KB (Mapbox) ~40 KB (Mapzen)
• Conjunto completo de mosaicos PBF:
~51 GB (OpenMapTiles)

26. 26
Zoom level 1
Zoom level 10
Zoom level 18~24 raster tiles ~6 vector tiles
(Map centrado Bogotá)
Comparación: consumo de datos
LEAFLET & MAPBOX GL

27. 27
Leaflet
(zoom discreto)
Mapbox : https://www.mapbox.com/maps/
Mapbox GL
(zoom continuo)
El overzooming permite que los
mosaicos vector sean
renderizados varios niveles más
allá del zoom previsto
→ Transiciones más fluidas
Comparación: Overzooming
LEAFLET & MAPBOX GL

28. Comparación: compatibilidad
28
LEAFLET & MAPBOX GL
Can I use…: https://caniuse.com/

29. 29
Comparación: compatibilidad
LEAFLET & MAPBOX GL
Can I use…: https://caniuse.com/

30. 30
Comparación: compatibilidad
LEAFLET & MAPBOX GL
Can I use…: https://caniuse.com/

31. Comparación: personalización
31
LEAFLET & MAPBOX GL
Leaflet Providers : http://leaflet-extras.github.io/leaflet-providers/preview/
• Los raster tiles usados en Leaflet requieren pre-
renderizado → Mapnik (OSM to PNG)
• Ejecutado usualmente en el servidor

32. 32
M a p b o x S tu d io : h ttp s :/ / w w w .m a p b o x .c o m / s tu d io
• Los estilos de los vector tiles de Mapbox pueden ser
editados en línea → Mapbox Studio
• El renderizado se ejecuta en el cliente
Comparación: personalización
LEAFLET & MAPBOX GL

33. 33
Mapbox Designer Maps: https://www.mapbox.com/designer-maps/
Mapbox ofrece los llamados designer styles
Odyssey Vintage Whaam! Scenic Standard Termzen
urth
Comparación: personalización
LEAFLET & MAPBOX GL

34. 34
Stackoverflow trends: https://insights.stackoverflow.com/trends
• Ambas librerías tienen repositorios en GitHub
• Poseen igualmente etiquetas en
Comparación: soporte en línea
LEAFLET & MAPBOX GL
UNPKG es un Content Delivery Network (CDN) para el
gestor de paquetes de JavaScript npm
Leaflet: ~6000 preguntas
Mapbox: ~2900 preguntas

35. Visualizando el conflicto
en Colombia
4

36. 36
RUV: https://rni.unidadvictimas.gov.co/RUV
+8.5 millones de
víctimas
(8.2 M del conflicto)
+6.4 millones sujetas
a reparación
Registro Único de Víctimas
+7.9 millones desplazados
+1 millón homicidios
+380 000 amenazas
+178 000 desapariciones
+120 000 pérdida de propiedad
+100 000 actos terroristas
+24 000 actos violencia sexual
+37 000 secuestros
VISUALIZANDO EL CONFLICTO EN COLOMBIA

37. 37
Rutas del Conflicto
VISUALIZANDO EL CONFLICTO EN COLOMBIA
• Periodismo basado en
datos
• Ganadores del sitio web
del año en los Data
Journalism Awards (2017)
• Registros de las masacres
perpetradas por diferentes
grupos armados (1982 -
2013)

38. 38
Más datos…
VISUALIZANDO EL CONFLICTO EN COLOMBIA

39. 39
Datos: Estandarización
GeoJSON
Geographic
JavaScript Object
Notation
VISUALIZANDO EL CONFLICTO EN COLOMBIA

40. 40
VISUALIZANDO EL CONFLICTO EN COLOMBIA

41. 41
VISUALIZANDO EL CONFLICTO EN COLOMBIA
Jenny, B. et al.: Design principles for origin-destination flow maps

42. 42
VISUALIZANDO EL CONFLICTO EN COLOMBIA
Canvas-Flowmap-Layer
• Curvas Bézier (creadas con la misma fórmula)
• Disminuir la contaminación visual (cluttering) de las
líneas rectas (solape y convergencia)
• Animación tipo “marching-ants” con atenuaciones
(easing)
Bell,S.“FlowMappingontoHTMLCanvas”

43. 43
VISUALIZANDO EL CONFLICTO EN COLOMBIA
Leaflet.heat
• Heatmaps (mapas de calor)
• Basados en intensidad (no en frecuencia)
Leaflet-heat plugin: https://github.com/Leaflet/Leaflet.heat

44. 44
VISUALIZANDO EL CONFLICTO EN COLOMBIA

45. 45
VISUALIZANDO EL CONFLICTO EN COLOMBIA

46. 46
VISUALIZANDO EL CONFLICTO EN COLOMBIA

47. 47
VISUALIZANDO EL CONFLICTO EN COLOMBIA

48. 48
548 masacres
(1982 - 2013)
VISUALIZANDO EL CONFLICTO EN COLOMBIA

49. 99 masacres
(1982 - 2013)
VISUALIZANDO EL CONFLICTO EN COLOMBIA

50. 50
VISUALIZANDO EL CONFLICTO EN COLOMBIA

51. VISUALIZANDO EL CONFLICTO EN COLOMBIA

52. VISUALIZANDO EL CONFLICTO EN COLOMBIA

53. VISUALIZANDO EL CONFLICTO EN COLOMBIA

54. Conclusiones &
Perspectiva al Futuro
5

55. Conclusiones
55
CONCLUSIONES
• Es muy relevante hacer las tecnologías relacionadas con el
mapeo accesibles y fáciles de implementar
• El mapeo y análisis de datos es útil para el diseño y
planeación (políticas públicas)
• Los vector tiles han mejorado notablemente las
posibilidades así como la calidad, presentación, diseño y
tiempos de carga de los mapas web
• De igual modo, se debe procurar la fácil adopción de la
integración back-end (bases de datos)

56. Perspectiva a futuro
56
CONCLUSIONES
• Buen futuro de las tecnologías de web mapping de fácil
implementación:
Tableau, Observable, D3.js, CARTO, Mappa.js, ArcGIS Online, kepler.gl

57. Camilo Cruz
cccruzr.github.io
linkedin.com/in/cccruzr
github.com/cccruzr
¡Gracias por su
atención!