Slippy maps?

The two main methods of webmapping are raster tiles and vector tiles. Raster tiles are the traditional way of displaying maps on the web, where the map is pre-rendered and served as an image. The map is divided into small square images, or tiles, which are served to the user as they navigate around the map.

---

What is a vector tile then?

Instead of a web server sending you a pre-drawn image tile, a vector tile contains the OSM geometry for a particular part of the earth, delivered on demand. It contains instructions on what can be drawn, rather than something already drawn and styled. Below is a snippet of a vector tile in GeoJSON; as you can see it contains mathematical descriptions and metadata of buildings, roads and other features in the OSM base layer.

---

Benefits of vector tiles

Vector tiles offer several important advantages over fully rendered raster tiles:

• Dynamic styling. As vectors, tiles can be styled when requested, allowing for many map styles on global data. Using Mapbox GL JS or the Mapbox Maps SDKs for Android and iOS, you can adjust your map's appearance dynamically, without having to download new tiles.

• Size and speed. Vector tiles are really small, enabling global high resolution maps, fast map loads, and efficient caching. The Mapbox cartographers responsible for Mapbox-provided vector tilesets worked to balance between level of detail and performance.

• Smooth interactions. Because all your map data is loaded in the map client, you can re-render the map quickly, enabling smooth zooming, tilt, and rotation.

• Dynamically querying. You can use this feature to access your map data's properties right from your vector tileset.

---

Tiles before style!

Below is what the data looks like before when it arrives at the clients computer and hasn't had a proper style map applied.