MapboxGL js deel 2 - NieneB/mgi_workshop GitHub Wiki
No access token!
The link style: 'mapbox://styles/nieneb/cjg3h8yp80oi82rldxukpu0oi', contains everything what is needed to show the vecotor tile map:
- The vector tile source.
- The styling information.
- Fonts and Glyphs
Mapbox Studio's style editor provides the user interface where you can define your map style. Behind the scenes, Studio creates the style.json and hosts it on the Mapbox Styles API when published. This style is then accessible via endpoint to add to your map.
If we use the Mapbox hosting we need an access token. But we can also generate and host this all ourselves! We can do this by making using our own data and making our own style.json file.
The style definition is most commonly supplied in a JSON format. :link: Mapbox provides good documentation on the style specifications
Here we will make our own style.json.
The style.json
The map style itself is written as rules which define its visual appearance using the Mapbox GL Style Specification. It specifies:
- What data to draw Sources
- What order to draw the data in. Layers
- How to style the data when drawing it. Layers
- Which fonts and icons to use. Glyphs & Fonts, Sprites & Icons
This is the basics of a style.json:
{
"version": 8,
"name": "Mijn eigen Stijl",
"sprite": "url",
"glyphs": "url/{fontstack}/{range}.pbf",
"sources": {...},
"layers": [...]
}
The 2 most important for now are the sources and the layers. The sources tell us where our data is coming from. Vector Tiles or GeoJSON data for example. By setting layers we can style every separate layer available in the vector tiles and assigning it colours etc.
:arrow_forward: Have a look at this file style.json in the text editor.
In order to use this we need to add the style file to the JavaScript map definition, instead of the mapbox url. We can also remove the access token now.
var map = new mapboxgl.Map({
container: 'map',
style: 'style.json',
hash: true,
zoom: 11,
pitch: 60,
bearing: 62.4,
center: [ 4.8, 52.4]
});
:arrow_forward: Save the style.json file in :open_file_folder:yourDirectory.
:arrow_forward: Change the code in main.js so we are using our own style file. Remove the access token.
Sources
For now we start with 1 source, namely our vector tiles that are hosted by PDOK:
"sources": {
"pdok":{
"type": "vector",
"tiles": ["http://geodata.nationaalgeoregister.nl/beta/topotiles/{z}/{x}/{y}.pbf"]
}
},
Layers
Next we can create layers, accordingly on what layers are available in the vector data. The first layer is a background layer with the background fill color white. Then we call a admin layer which is available in the vector tiles. We apply a filter to the layer in order to get only the province boundaries.
"layers":[
{
"id": "background",
"type": "background",
"paint": {
"background-color":"#FFFFFF"
}
},
{
"id": "admin",
"type": "fill",
"source": "pdok",
"source-layer": "admin",
"maxzoom": 22,
"minzoom": 0,
"filter": ["==", "lod1", "province"],
"paint": {
"fill-color" :"#54D8CC",
"fill-outline-color": "#ffffff"
}
}
]
:information_source: The "id" is a custom name you give to the layer. You can give it any name you like.
:information_source: The "source" is the name of the source provided in the beginning of the style object. We called it "pdok".
:information_source: The "source-layer" is the name of the data layer in the vector tiles. This information is fixed. We provided all the names of the layers for you already. A bit further on we will explain how you can request the vector tile information.
:information_source: "type" is the rendering type of the layer. It can be one of fill, line, symbol, circle, fill-extrusion, raster or background.
:information_source: "paint" Default paint properties for this layer.
There are more options you can give to a layer. For example:
- filter
- minzoom
- maxzoom
We can go on and on with adding layers.
:arrow_forward: Have a look at http://geodata.nationaalgeoregister.nl/beta/topotiles-viewer/styles/achtergrond.json to see a complete styling JSON for getting a map of the Netherlands.
:arrow_forward: Also have a look at the PDOK Vector Tile documentation on how the vector tile set is build up.
Make a beautiful map visualization.
:arrow_forward: Try adding more layers, like roads and buildings. Change the colors and make your own map!
Change your map settings so you get a nice view. Change colors, add extrusions and layers. Also see if you can use filters.
:link: Make use of the Mapbox style spec: https://www.mapbox.com/mapbox-gl-js/style-spec/
:link: Mapbox also provides a lot of examples: https://www.mapbox.com/mapbox-gl-js/example/simple-map/
Think about
- Color
- Typography
- Icons
- Texture
But also about:
- Hierarchy
- Scale
- Density
- Zoom levels
For inspiration: :link: Have a look at https://www.mapbox.com/resources/guide-to-map-design-part-1.pdf
From here on the steps do not contain any specific action but are just an explanation about the possibilities in the style.json. You can use these to create your own map.
- WebGL support
- Glyphs & Fonts
- Sprites & Icons
- Fill-extrusion
- Interaction
- Styling tips
- Other sources to use
:link: https://www.mapbox.com/help/glossary/
Some styling tips.
- The order of the layers in your
style.jsonis the order of drawing. So first defined layer, "background", is drawn first, the next layer is drawn on top, etc. - The labels placing priority is also dependend on the layer order. Layers at the top have less drawing priority, layers at the bottom of the file have more drawing priority!
- Is your map slow? Check out :link: Improve the performance of your MapboxGL map
- Using a lot a fill-extrusions will also make your map slow.
When you are happy with your map design, let's go and publish it online!
:arrow_right: Go to the next step hosting on github!
Fill-Extrusion
Do you want this cool 3D effect? This is called fill-extrusion.
A fill-extrusion is only possible on polygons!
The type of layer is fill-extrusion:
{
"id": "aardbeving_extrusion",
"type": "fill-extrusion",
"source": "aardbeving_buffer",
"maxzoom": 22,
"minzoom": 11,
"paint":{
"fill-extrusion-height": [
"interpolate",["linear"],["zoom"],
11, ["*", 10, ["get", "DEPTH"]],
15, [ "*", 100 , ["get", "DEPTH"]]
],
"fill-extrusion-color":{
"type": "categorical",
"property": "TYPE",
"stops":[
["ind", "#f3ec9c"],
["tec", "#F5CB5B"]
]
},
"fill-extrusion-opacity": 0.9
}
},
:arrow_forward: Try to get one or more layers in fill-extrusion. (extrusion == 2,5D )
Add another source
It is possible to add multiple sources to your style.json. This can be another tile source or a GeoJSON for example.
Tile Source
Adding a GeoJSON
We can add multiple sources to our style spec. Let's add our points from the GeoJSON.
"aardbeving_points":{
"type": "geojson",
"data": "../cursusdata/aardbevingen_NL.geojson"
}
:arrow_forward: Add the source to the style.json
And define a point layer:
{
"id": "aardbeving",
"type": "circle",
"source": "aardbeving_points",
"maxzoom": 22,
"minzoom": 0,
"paint":{
"circle-radius": 5,
"circle-color":{
"type": "categorical",
"property": "TYPE",
"stops":[
["ind", "#f3ec9c"],
["tec", "#F5CB5B"]
]
}
}
}
Slow?
Adding a lot of GeoJSON's makes the map slow.. Therefore Vector Tiles are so important!
PDOK
BGT en BRT data.
https://github.com/PDOK/vectortiles-bgt-brt
https://forum.pdok.nl/t/vector-tiles-brt-en-bgt-via-pdok/1103/12
http://geodata.nationaalgeoregister.nl/beta/topotiles/{z}/{x}/{y}.pbf
Amsterdam
https://api.data.amsterdam.nl/api/
https://github.com/maptime-ams/vector-tiles-workshop/wiki
https://t1.data.amsterdam.nl/wm/{z}/{x}/{y}.pbf
ESRI
http://blogs.esri.nl/de-topografische-basiskaart-een-vertrouwd-beeld-met-nieuwe-technologie/
https://www.arcgis.com/home/item.html?id=c8cb478cd4da4206a56e2a2fba545ccf
Openmaptiles
https://openmaptiles.com/downloads/europe/netherlands/
Maptiler
https://maps.tilehosting.com/data/v3.json?key=personalkey
https://maps.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=personalkey"
Tilehosting
https://free.tilehosting.com/data/v3.json?key=*****
Want to make your own tiles? Check out the advanced part.