2015-12-15 10:19:32 +00:00
---
layout: page
title: Display Map with Mapbox GL
published: true
---
2015-12-17 13:23:29 +00:00
# Display Map with Mapbox GL
2015-12-15 10:19:32 +00:00
2015-12-17 13:23:29 +00:00
To display a custom Mapbox GL based map you need to create a HTML file and
reference [the public vector tile CDN ](/docs/use-public-cdn/ ).
You are free to download and
2015-12-15 11:29:28 +00:00
host the vector tiles yourself but we provide a fast and distributed CDN service for serving
the PBFs for you.
2015-12-15 10:19:32 +00:00
2015-12-17 13:23:29 +00:00
## Clone example Repository
2015-12-15 11:29:28 +00:00
The easiest way to get started is using the `mapbox-gl-js-exmaple` repository.
2015-12-15 11:19:26 +00:00
Clone the repository and change into the directory.
```
git clone https://github.com/osm2vectortiles/mapbox-gl-js-example.git
```
2015-12-15 11:29:28 +00:00
## Configure Source, Fonts and Sprites
2015-12-15 11:19:26 +00:00
In order for Mapbox GL JS to work you also need to provide the
[fonts ](https://www.mapbox.com/mapbox-gl-style-spec/#glyphs ) and
[sprites ](https://www.mapbox.com/mapbox-gl-style-spec/#sprite ).
These resources are contained in the folder `assets` .
The [Mapbox GL Style JSON ](https://www.mapbox.com/mapbox-gl-style-spec/ ) of OSM Bright is located at `bright-v8.json` .
You can create your own styles with Mapbox Studio.
If you want to serve the Mapbox GL Style JSON without Mapbox you need to configure three URLs.
2015-12-15 11:29:57 +00:00
2015-12-17 13:23:29 +00:00
1. Change the `sources` URL to the free CDN server or use your own server
2015-12-15 11:19:26 +00:00
2. Change the `sprite` URL to the location of your sprites
3. Change the `glyphs` URL to the location of your fonts
```javascript
"sources": {
"mapbox": {
2015-12-17 13:23:29 +00:00
"url": "http://osm2vectortiles.tileserver.com/v1.json",
2015-12-15 11:19:26 +00:00
"type": "vector"
}
},
"sprite": "/assets/sprite",
"glyphs": "/assets/font/{fontstack}/{range}.pbf"
```
2015-12-15 11:29:28 +00:00
## Initialize the Map
2015-12-15 10:19:32 +00:00
2015-12-15 11:29:28 +00:00
In order to serve a MapboxGL based map you need a [Mapbox GL style JSON ](https://www.mapbox.com/mapbox-gl-style-spec/ ) created with [Mapbox Studio ](https://www.mapbox.com/mapbox-studio/ ).
2015-12-15 10:19:32 +00:00
In this example we will serve the free OSM Bright style [provided by Mapbox ](https://github.com/mapbox/mapbox-gl-styles ).
2015-12-15 11:29:28 +00:00
The HTML file defines a full screen map and the CSS and JavaScript files required by Mapbox GL JS.
The `bright-v8.json` style is loaded from the local directory.
2015-12-15 10:19:32 +00:00
2015-12-15 11:19:26 +00:00
Because we use the local sprites and fonts we don't need a Mapbox API key.
2015-12-15 10:19:32 +00:00
2016-02-26 12:25:03 +00:00
{% highlight html %}
2015-12-15 10:19:32 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = 'utf-8' / >
2015-12-15 11:19:26 +00:00
< title > MapBox GL JS with osm2vectortiles Example< / title >
2015-12-15 10:19:32 +00:00
< meta name = 'viewport' content = 'initial-scale=1,maximum-scale=1,user-scalable=no' / >
2015-12-15 11:19:26 +00:00
< script src = '//api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.js' > < / script >
< link href = '//api.tiles.mapbox.com/mapbox-gl-js/v0.10.0/mapbox-gl.css' rel = 'stylesheet' / >
2015-12-15 10:19:32 +00:00
< style >
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
< / style >
< / head >
< body >
2015-12-15 11:19:26 +00:00
2015-12-15 10:19:32 +00:00
< div id = 'map' > < / div >
< script >
2015-12-15 11:19:26 +00:00
mapboxgl.accessToken = 'NOT-REQUIRED-WITH-YOUR-VECTOR-TILES-DATA';
2015-12-15 10:19:32 +00:00
var map = new mapboxgl.Map({
2015-12-15 11:19:26 +00:00
container: 'map',
style: '/bright-v8.json',
center: [8.3221, 46.5928],
zoom: 1,
hash: true
2015-12-15 10:19:32 +00:00
});
2015-12-15 11:19:26 +00:00
map.addControl(new mapboxgl.Navigation());
2015-12-15 10:19:32 +00:00
< / script >
< / body >
< / html >
2016-02-26 12:25:03 +00:00
{% endhighlight %}
2015-12-15 11:29:28 +00:00
## Serve the Map
You need a simple HTTP server for serving the HTML and assets.
If you have Python installed you can run `python -m SimpleHTTPServer`
in the working directory and visit the map at `localhost:8000` .
If you have NodeJS installed you can install a simple http server with `npm install http-server -g`
and run it in the working directory with `http-server` and visit the map at `localhost:8080` .
Or if you are using Docker you can run a container serving the static files at `localhost:8000`
with `docker run --rm -v $(pwd):/usr/share/nginx/html:ro -p 8000:80 nginx` .
It is even possible to host the map on GitHub Pages.
