2.9 KiB
| layout | title | published |
|---|---|---|
| page | Getting Started | true |
Getting Started
In this tutorial you will learn how to serve vector tiles from a MBTiles file and how to display them in your browser.
Serve Vector Tiles
In order to render your map with Mapbox GL JS you need install a simple tileserver that supports serving vector tiles.
npm install -g tileserver-vector
Apart from the vector tiles you also need to serve the fonts and icons needed in your styles. We prepared a repository containing Mapbox GL example styles and the necessary font and icon files.
git clone https://github.com/osm2vectortiles/mapbox-gl-styles.git
cd mapbox-gl-styles
The most essential part is choosing the vector tiles you want to serve.
Head over to the Downloads section and choose your country or city extract or even the entire planet.
The vector tiles are stored in the MBTiles SQLite database you downloaded now.
Download the MBTiles file into the same directory and name it osm2vectortiles.mbtiles.
curl -o osm2vectortiles.mbtiles https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/zurich.mbtiles
Now start the tileserver in the same directory.
tileserver-vector
If you visit localhost:3000 you will be greeted with the following page.
Display a map in your browser
Now that the vector tiles are available, we can move on to display a map in your browser. The following HTML file defines a full-screen map using a custom Mapbox GL style.
The bright-v9.json file defines how each feature of the map should be styled and where the assets like vector tiles, fonts and icons are stored.
Following you can see a simplified version of the style.
The vector tiles server we created before is now referenced as the source.
You can open the HTML file with your browser to checkout the webmap.
Use our Public CDN for serving vector tiles
If you don't want to serve the vector tiles yourself, you can use our public CDN. Klokan Technologies provides a free and fast CDN serving vector tiles of the entire planet for development purposes and testing.
The free CDN service is not recommended for production use in mobile or web applications and commercial use is prohibited without permission. The service is made for demonstration of the open-source technology developed in this project and for designers, but should not be used on servers or in any final products.
Using the Service
To use the public CDN instead of your local running server you need to replace the vector tile source in the style json with the url of the public CDN.