(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/)