Skip to content

Instantly share code, notes, and snippets.

@NieneB
Created February 8, 2018 09:08
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save NieneB/558afb44796a90354954d8af453f76b5 to your computer and use it in GitHub Desktop.
05_custom_map_extrusion
{
"version": 8,
"name": "aardbeving",
"glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
"sources": {
"pdok":{
"type": "vector",
"tiles": ["https://geodata.nationaalgeoregister.nl/beta/topotiles/{z}/{x}/{y}.pbf"]
},
"aardbeving_points":{
"type": "geojson",
"data": "https://raw.githubusercontent.com/NieneB/geo_visualisatie_workshop/master/data/aardbevingen_NL.geojson"
},
"aardbeving_buffer":{
"type": "geojson",
"data": "https://raw.githubusercontent.com/NieneB/geo_visualisatie_workshop/master/data/aardbevingen_NL_buffer.geojson"
}
},
"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"
}
},
{
"id": "buildup",
"type": "fill",
"source": "pdok",
"source-layer": "urban",
"maxzoom": 22,
"minzoom": 8,
"filter": ["==", "lod1", "urban_area"],
"paint": {
"fill-color" :"#ffffff",
"fill-opacity": 0.5
}
},
{
"id": "aardbeving",
"type": "circle",
"source": "aardbeving_points",
"maxzoom": 22,
"minzoom": 0,
"paint":{
"circle-radius": {
"stops":[
[0, 3],
[8, 2],
[12, 5],
[14, 10]
]
},
"circle-color":{
"type": "categorical",
"property": "TYPE",
"stops":[
["ind", "#f3ec9c"],
["tec", "#F5CB5B"]
]
}
}
},
{
"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
}
},
{
"id": "labels",
"type": "symbol",
"source": "aardbeving_points",
"maxzoom": 20,
"minzoom": 12,
"layout": {
"symbol-placement": "point",
"text-field":"{DEPTH}",
"text-font": ["Open Sans Regular"],
"text-size": 12,
"text-anchor": "center",
"text-justify": "center",
"text-padding": 20,
"text-allow-overlap": false
},
"paint":{
"text-opacity": 1,
"text-color": "#535353"
}
},
{
"id": "high_prior_labels",
"type": "symbol",
"source": "pdok",
"source-layer": "label",
"maxzoom": 20,
"minzoom": 5,
"filter": [">=", "z_index", 10000],
"layout": {
"visibility": "visible",
"symbol-placement": "point",
"symbol-avoid-edges" : false,
"text-field":"{name}",
"text-font": ["Open Sans Regular"],
"text-size": 20,
"text-max-width": 5,
"text-anchor": "center",
"text-line-height": 1,
"text-justify": "center",
"text-padding": 20,
"text-allow-overlap": false
},
"paint":{
"text-opacity": 1,
"text-color": "#535353"
}
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A basic map with MapboxGL.js</title>
<!--add MapboxGLjs CSS-->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
<!--our own style rules-->
<style type="text/css">
body, html {
height: 90%;
}
#map-container {
height: 100%;
}
</style>
</head>
<body>
<!--The div in which the map will be created-->
<div id="map-container"></div>
<!--load mapboxgl.js-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<!--our own code to create the map-->
<script>
var map = new mapboxgl.Map({
container: 'map-container',
style: '05_mystyle.json',
hash: true,
zoom: 12,
pitch: 60,
bearing: -62,
center: [ 5.9, 50.87]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl(), "top-left");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment