(usa ↔ para navegar) # Somos * Wladimir Szczerban (alias Bolo) *@bolosig* * Geostarter (ICGC): [betaportal.icgc.cat](http://betaportal.icgc.cat) # Somos * Oscar Fonts *@oscarfonts* * [geomati.co](http://geomati.co) GIS Freelance Network # Somos #### Geoinquietos [geoinquiets.cat](http://geoinquiets.cat) # ¿Cómo funciona un mapa web? # Pirámide de teselas ![Pirámide 2](tile_pyramid_2.png) # Pirámide de teselas ![Pirámide 1](tile_pyramid_1.png) # Teselas Vectoriales #### aka *Vector Tiles* o *VT* o *MVT* ![Etapas](etapas.svg) # Diferencias entre teselas raster y teselas vectoriales | Teselas vectoriales | Teselas raster | |---|---| |Estilo se define en el cliente|Estilo se define en el servidor| |Sólo se necesita teselar la información una sola vez y se pueden tener múltiples mapas|Hay que teselas la información para cada mapa| |*Overzoom* se mantiene resolución|*Overzoom* pierde resolución (pixelado)| |Menor tamaño (se recomienda máximo 500kb)|Más fáciles de consumir| |Cache ocupa mucho menos espacio. Fáctible el uso en dispositivos móviles sin conexión|Cache ocupa mucho espacio. Uso en dispositivos móviles requiere mucho espacio de disco| |Acceso nativo a la información del objeto (atributos y geometría), lo que permite un procesamiento muy sofisticado|| |Se ven mejor en dispositivos de alta resolución|| # Ejemplos # Terreno #### https://openicgc.github.io/ [![Terreno](../img/terreno-icgc.png)](https://openicgc.github.io/mapbox_map.html#13/41.3993/2.16145/-55.2/43) # Luces LA [![Luces](../img/luces-la.png)](https://cityhubla.github.io/lacity_exploration_18/index.html#16.38/34.053569/-118.242875/36/55) # Edificios con música [![Edificios](../img/edificios-musica.gif)](https://twitter.com/jessewhazel/status/981379944440877058) #### Demo: https://codepen.io/jwhazel/pen/NYzpWG #### Blog explicativo https://medium.com/@erdag/mappox-mapmadness18-round-4-1251a8c10421 # Temático filtro [![Temático](../img/vt-ny-carto.gif)](https://carto.com/blog/using-mvt-in-carto/) # Filtrado al vuelo ![Temático](../img/ejemplo-turf.gif) # Mapa de calor [![Temático](../img/heatmap.png)](https://blog.mapbox.com/heatmaps-at-scale-for-business-intelligence-285dbbc3d7b3) # Especificación *MVT* #### [Protocol Buffers](https://developers.google.com/protocol-buffers/): Extensión *PBF*... sin [`.proto`](https://github.com/mapbox/vector-tile-spec/blob/master/2.1/vector_tile.proto), no significa nada ![MVT](../img/geo2pbf.gif) #### [MapBox Vector Tile Specification](https://www.mapbox.com/vector-tiles/specification/)