1

Here: https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/

It's possible to draw 3D buildings by taking advantage of extrusions, however the 3D vector layer source is the Mapbox's underlying extract of the OSM:

The 'building' layer in the mapbox-streets vector source contains building-height. data from OpenStreetMap.

What I'm looking for is to add my custom vector layer (Geojson, WFS) which contains Polygons with Z values (3D)/feature property called height. Thus (in case of GL JS, same exists for Android) to extend this example:

https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/

To support extrusions or whatever it takes to draw 3D buildings in Mapbox GL JS.

I tried 2 approaches:

  1. Simply add to the draw polygon from GeoJson example features with Z values - this is not working. Probably because from graphical perspective there is no automatic conversion from 2D polygon on the surface to 3D Box (like this is why there is a term called extrusions).
  2. So then I tried to add vector source layer to the extrusion example. It seems that the requirements are: (a) 'type': 'fill-extrusion', (b) Feature property 'height', (c) Add paint attribute with the 'fill-extrusion-X' sub attributes. This is the complete code - and this also not works. Where is my mistake?

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add a GeoJSON polygon</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.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> mapboxgl.accessToken = 'my_token'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [10.858185165380299, 48.364322957423497], zoom: 18 }); map.on('load', function () { map.addLayer({ 'id': 'maine', 'type': 'fill-extrusion', 'minzoom': 15, 'source': { 'type': 'geojson', 'data': { 'type': 'Feature', 'properties': { 'id': 1, 'height': 100 }, 'geometry': { 'type': 'Polygon', 'coordinates': [[ [ 10.857372608433057, 48.364322957423497], [ 10.858185165380299, 48.364322957423497], [ 10.858171844774606, 48.363982227426746], [ 10.857409240098711, 48.363991077585354], [ 10.857372608433057, 48.364322957423497]]] } } }, 'paint': { 'fill-extrusion-color': '#aaa', 'fill-extrusion-height': [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"] ], 'fill-extrusion-opacity': .6, 'fill-color': '#088', 'fill-opacity': 0.8 } }); }); </script> </body> </html>

1

Check the error console, it explains that

'fill-color': '#088', 'fill-opacity': 0.8

aren't valid paint properties for fill-extrusion layers.

See the example at https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/ and documentation at https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-fill-extrusion

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.