0

I am using this example provided by mapbox gl js: Display buildings in 3D

Now the problem is I only want to show some buildings in 3D. How can achieve this? I don't know where to find the source-layer with which the example is working. A hint where to find it and how to customize would help alot.

I also have an own custom GeoJSON for buildings. It would be possible to add height information. But I don't know how to edit my geojson in order to work correctly so it would display the height.

Here is an example how my GeoJSON is structured:

{
    "type": "FeatureCollection",
    "name": "customBuildings",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
            "type": "Feature",
            "properties": {
                "osm_id": "25717939",
                "fclass": "building"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[12.9775952, 52.4079663], [12.9776357, 52.4081339], [12.9778491, 52.4081147], [12.9778086, 52.4079471], [12.9775952, 52.4079663]]]
            }
        }, {
            "type": "Feature",
            "properties": {
                "osm_id": "90582821",
                "fclass": "building"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[12.9759631, 52.4063223], [12.9759875, 52.4064343], [12.9762787, 52.4064107], [12.9762543, 52.4062987], [12.9759631, 52.4063223]]]
            }
        }, ]
}
1

You should add a "height" (or whatever name you choose) to each feature's properties:

"type": "Feature",
"properties": {
    "osm_id": "90582821",
    "fclass": "building",
    "height": 10
},

Height should be in metres. To select features for styling, use a "has" filter for the layer. For the actual style in the layer, use a "type" of "fill-extrusion" and set the "fill-extrusion-*" paint settings. You'll end up with something like this (amongst other settings) in your layer definition:

'filter': ['has', 'height'],
'type': 'fill-extrusion',
'paint': {
  'fill-extrusion-color': 'red',
  'fill-extrusion-height': ['get', 'height'],
  'fill-extrusion-base': 0,
  'fill-extrusion-opacity': 0.6
}

You may find this fiddle very useful (not mine): http://jsfiddle.net/zjLek40n/

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.