2015-12-15 15:40:39 +00:00
|
|
|
---
|
|
|
|
|
layout: page
|
|
|
|
|
title: Serve Raster Tiles with Docker
|
|
|
|
|
published: true
|
|
|
|
|
---
|
2015-12-15 14:18:31 +00:00
|
|
|
|
|
|
|
|
You can render raster tiles from a Mapbox Studio Classic **.tm2** style project and a vector tiles file
|
|
|
|
|
with the help of Docker and [tessera](https://github.com/mojodna/tessera).
|
|
|
|
|
For a single map you can serve up to 50 users concurrently with a standard 4GB VPS server with Docker installed.
|
|
|
|
|
|
|
|
|
|
## Preparation
|
|
|
|
|
|
2015-12-17 14:01:56 +00:00
|
|
|
1. Download MBTiles
|
2015-12-15 14:18:31 +00:00
|
|
|
2. Clone a visual style project
|
|
|
|
|
3. Add both to the same directory
|
|
|
|
|
|
|
|
|
|
### Download MBTiles
|
|
|
|
|
|
|
|
|
|
On the server download your desired extract of a country or the
|
2015-12-17 14:21:36 +00:00
|
|
|
entire world MBTiles of the [Downloads page](/downloads).
|
2015-12-15 14:18:31 +00:00
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
wget -c https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/world.mbtiles
|
|
|
|
|
```
|
|
|
|
|
|
2015-12-17 14:21:36 +00:00
|
|
|
You can also download a smaller extract like Zurich.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
wget -c https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/zurich.mbtiles
|
|
|
|
|
```
|
|
|
|
|
|
2015-12-15 14:18:31 +00:00
|
|
|
### Clone the Style Project
|
|
|
|
|
|
|
|
|
|
Clone your custom style project or in this example the official OSM Bright style.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
git clone https://github.com/mapbox/mapbox-studio-osm-bright.tm2.git
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Run the raster tile server
|
|
|
|
|
|
|
|
|
|
Make sure you have the style project and the MBTiles file in the same directory.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
├── mapbox-studio-osm-bright.tm2
|
|
|
|
|
└── world.mbtiles
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Now run Docker via the command line to serve raster tiles.
|
2015-12-17 14:01:56 +00:00
|
|
|
The raster tiles will be exposed at port 8080 of your Docker host.
|
2015-12-15 14:18:31 +00:00
|
|
|
|
|
|
|
|
```bash
|
2015-12-17 13:56:56 +00:00
|
|
|
docker run -v $(pwd):/data -p 8080:80 klokantech/tileserver-mapnik
|
2015-12-15 14:18:31 +00:00
|
|
|
```
|
|
|
|
|
|
2015-12-17 14:21:36 +00:00
|
|
|
## Configuration
|
|
|
|
|
|
|
|
|
|
If you visit your docker host on port 8080 you should see your map appearing
|
|
|
|
|
in the interface. If you click on the map thumbnail you will get the configuration
|
|
|
|
|
of different GIS clients and mapping libraries.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You can choose `Source code` in `Leaflet` to get the source code for a Leaflet layer.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You can get the configuration for the most common mapping libraries.
|
|
|
|
|
|
2015-12-15 14:18:31 +00:00
|
|
|
## Use the Map from Leaflet
|
|
|
|
|
|
2015-12-17 14:01:56 +00:00
|
|
|
The server will now provide a TileJSON endpoint at the service URL of the map.
|
2015-12-17 14:23:25 +00:00
|
|
|
For this example the TileJSON endpoint is `http://192.168.99.101:8080/mapbox-studio-osm-bright/index.json`.
|
2015-12-15 14:48:56 +00:00
|
|
|
You can reference this TileJSON endpoint in the leaflet configuration.
|
2015-12-15 14:18:31 +00:00
|
|
|
|
2015-12-17 14:21:36 +00:00
|
|
|
The HTML file will display a full screen Leaflet map using the raster tiles from our
|
2015-12-17 14:23:25 +00:00
|
|
|
raster tile server as a base layer.
|
|
|
|
|
You can now add additional layers on top of it or add interactivity.
|
2015-12-17 13:29:43 +00:00
|
|
|
|
2015-12-15 14:18:31 +00:00
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset=utf-8 />
|
|
|
|
|
<title>A simple map</title>
|
|
|
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
|
|
|
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
|
|
|
|
|
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
|
|
|
|
|
<style>
|
|
|
|
|
body { margin:0; padding:0; }
|
|
|
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id='map'></div>
|
|
|
|
|
<script>
|
|
|
|
|
var map = L.mapbox.map('map', 'mapbox.light', {
|
|
|
|
|
minZoom: 8,
|
|
|
|
|
}).setView([46.806, 8.091], 8);
|
2015-12-17 14:23:25 +00:00
|
|
|
var overlay = L.mapbox.tileLayer('http://192.168.99.101:8080/mapbox-studio-osm-bright/index.json').addTo(map);
|
2015-12-15 14:18:31 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
