3D buildings should be before roads

This commit is contained in:
Lukas Martinelli 2017-01-10 18:06:08 +01:00
parent 5eb1fa576b
commit 4e77f40504
2 changed files with 55 additions and 90 deletions

View File

@ -24,8 +24,8 @@ To use it you don't need any access keys and you can host the tiles and assets y
body { margin:0; padding:0; } body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
</style> </style>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' /> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
</head> </head>
<body> <body>
<div id='map'></div> <div id='map'></div>
@ -44,7 +44,7 @@ To use it you don't need any access keys and you can host the tiles and assets y
## Data Sources ## Data Sources
- [OSM2VectorTiles](http://osm2vectortiles.org/) as vector data source - [OpenMapTiles](http://openmaptiles.org/) as vector data source
- [Natural Earth Tiles](http://naturalearthtiles.org) for relief shading - [Natural Earth Tiles](http://naturalearthtiles.org) for relief shading
- [Maki](https://www.mapbox.com/maki-icons/) as icon set - [Maki](https://www.mapbox.com/maki-icons/) as icon set
@ -81,7 +81,7 @@ Green | `#76a723`
**Modify Icons** **Modify Icons**
1. Take the `iconset.json` and upload it to the [Maki Editor]https://www.mapbox.com/maki-icons/#editor(). 1. Take the `iconset.json` and upload it to the [Maki Editor](https://www.mapbox.com/maki-icons/#editor).
2. Apply your changes and download the fonts and icon set again. 2. Apply your changes and download the fonts and icon set again.
3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'` 3. Ensure you format the JSON first with `cat iconset.json | jq -MS '.'`
4. Install [spritezero](https://github.com/mapbox/spritezero) `npm install spritezero-cli` 4. Install [spritezero](https://github.com/mapbox/spritezero) `npm install spritezero-cli`

View File

@ -1176,92 +1176,6 @@
] ]
] ]
}, },
{
"id": "building",
"type": "fill",
"metadata": {},
"source": "openmaptiles",
"source-layer": "building",
"minzoom": 13,
"maxzoom": 14,
"paint": {
"fill-color": "hsl(35, 8%, 85%)",
"fill-outline-color": {
"base": 1,
"stops": [
[
13,
"hsla(35, 6%, 79%, 0.32)"
],
[
14,
"hsl(35, 6%, 79%)"
]
]
}
},
"layout": {
"visibility": "visible"
}
},
{
"id": "building-3d",
"type": "fill-extrusion",
"metadata": {},
"source": "openmaptiles",
"source-layer": "building",
"minzoom": 14,
"paint": {
"fill-extrusion-color": "hsl(35, 8%, 85%)",
"fill-extrusion-height": {
"property": "render_height",
"type": "identity"
},
"fill-extrusion-base": {
"property": "render_min_height",
"type": "identity"
},
"fill-extrusion-opacity": 0.8
},
"layout": {
"visibility": "visible"
}
},
{
"id": "housenum_label",
"type": "symbol",
"metadata": {},
"source": "openmaptiles",
"source-layer": "housenum_label",
"minzoom": 16,
"layout": {
"text-field": "{house_num}",
"text-font": [
"Roboto Condensed Regular"
],
"text-max-width": 7,
"text-size": 9.5,
"visibility": "visible"
},
"paint": {
"text-color": "hsl(35, 2%, 69%)",
"text-halo-color": "hsl(35, 8%, 85%)",
"text-halo-width": 0.5,
"text-opacity": {
"base": 1,
"stops": [
[
16,
0
],
[
16.5,
1
]
]
}
}
},
{ {
"id": "road_motorway_link_casing", "id": "road_motorway_link_casing",
"type": "line", "type": "line",
@ -2187,6 +2101,57 @@
"line-join": "round" "line-join": "round"
} }
}, },
{
"id": "building",
"type": "fill",
"metadata": {},
"source": "openmaptiles",
"source-layer": "building",
"minzoom": 13,
"maxzoom": 14,
"paint": {
"fill-color": "hsl(35, 8%, 85%)",
"fill-outline-color": {
"base": 1,
"stops": [
[
13,
"hsla(35, 6%, 79%, 0.32)"
],
[
14,
"hsl(35, 6%, 79%)"
]
]
}
},
"layout": {
"visibility": "visible"
}
},
{
"id": "building-3d",
"type": "fill-extrusion",
"metadata": {},
"source": "openmaptiles",
"source-layer": "building",
"minzoom": 14,
"paint": {
"fill-extrusion-color": "hsl(35, 8%, 85%)",
"fill-extrusion-height": {
"property": "render_height",
"type": "identity"
},
"fill-extrusion-base": {
"property": "render_min_height",
"type": "identity"
},
"fill-extrusion-opacity": 0.8
},
"layout": {
"visibility": "visible"
}
},
{ {
"id": "bridge_motorway_link_casing", "id": "bridge_motorway_link_casing",
"type": "line", "type": "line",