Comparación e implementación de liberías webmapping como herramienta de visualización de conflictos
0 recomendaciones160 vistas
Este documento compara e implementa librerías de mapeo web de código abierto como herramientas para visualizar el conflicto en Colombia. Introduce Leaflet y Mapbox GL, las cuales permiten crear mapas interactivos en el navegador. Luego, usa datos sobre víctimas y masacres para visualizar patrones del conflicto en Colombia a través de mapas de calor, flujos y puntos. Concluye que el mapeo web es útil para el análisis de datos y diseño de políticas, y que las tecnologías como Leaf
Comparación e implementación de liberías webmapping como herramienta de visualización de conflictos
- 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
- 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
- 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