Vector Tiles from OpenStreetMap
Channel: Lukas
Date: 2016-06-27

This video introduces OSM2VectorTiles - a project to create free downloadable vector tiles from OpenStreetMap.

Project website: http://osm2vectortiles.org/
GitHub: https://github.com/osm2vectortiles/osm2vectortiles

OSM2VectorTiles is an Open Source Project to create free vector tiles from OpenStreetMap data that you can use to create your own maps.

First we need to explain what tiles and vector tiles are. The idea of tiles is to divide the map into many small square images that are joined on the client side. This allows smoother user experience and has many advantages for serving the tiles fast. Since the same tiles always cover the same areas they can be precomputed and cached.

Tiled raster maps are now replaced by vector tiles emerging as the new standard but the same tile principles can be applied to vector data.

Since clients are more powerful it is now possible to render the map on the device itself and only send the actual polygons, line strings and points and their associated metadata to the client which turns it into a beautiful map. This enables next generation user experience with styles customised for the user language, resolution, day or night time.

It also means that now we can create vector tiles only once and let other developers and cartographers style them, which is the goal of OSM2VectorTiles.

You can get vector tiles from commercial providers such as Mapbox. But not everyone can depend on a third party. OSM2VectorTiles is an alternative for all those who want true Open Source vector tiles and complete control over the data. With OSM2VectorTiles you can host the tiles yourself or use them offline without having to tiles yourself. You can download vector tiles for more than 200 countries and around 700 cities.

And you are still able to use industry leading tools from Mapbox.
You can use Mapbox Studio to design your maps and use Mapbox GL JS to create the best possible web maps. Due to the compatibility with Mapbox Streets vector tiles you can switch your already existing styles to OSM2VectorTiles.

The vector tiles can be used together with the Mapbox mobile SDKs. Since you are able to download the vector tiles it is possible to create stunning mapping applications that even work offline. You can stay independent but still create great commercial apps.

With our public CDN it is easy to get started with your first map.
Visit the maps page and copy the HTML code of a map style. Create a HTML file and paste the code. Now open the static HTML page in your browser. The displayed map is now rendered by Mapbox GL JS in the browser and using the free vector tiles from the public CDN.
For production use we recommend that you host the vector tiles yourself to stay independent.

To host the vector tiles yourself choose an extract and download it.
You are downloading a SQLite database containing the vector tiles.
Install a tile server like the NodeJS based tileserver-gl-light.
A tile server is needed to serve the vector tiles via HTTP to web clients.
Start the tile server to serve the downloaded vector tiles to the web.

Visit the public endpoint to check your self hosted vector tiles.
The tile server gives you direct instructions how to embed the vector tiles in your map applications. And that is all you need to do to start serving your own vector tiles.

To create a custom style you download an extract and upload it to Mapbox Studio.
Now inspect the uploaded tiles. Let’s create a new map style based on this tileset. In this example we are going to create a map using the water, border and country layers. Let’s change the color of the water and add borders. For the country labels we are using an old font. Now publish the map.
Mapbox Studio allows you to export the generated Mapbox GL JSON file. You can now edit the file to reference your own tile server and use the style in MapboxGL or mobile SDKs.

We are excited to see what developers will build. Read the documentation on the website and collaborate with us on GitHub (https://github.com/osm2vectortiles/osm2vectortiles).