3D Extrusion with mapbox based on local geojson file

Question

I have seen this example online which does data-driven building extrusion but doesn\'t provide the code at all.

I would very much like to achieve the same thing. I h

Answer 1

Since you added a remote geojson file, you need to change the checks and the way you get and process the data:

  map.on('sourcedata', function(e) {

    // if (e.sourceId !== 'total') return
    if (e.sourceId !== 'data') return
    if (e.isSourceLoaded !== true) return

    var data = {
      "type": "FeatureCollection",
      "features": []
    }

    // e.source.data.features.forEach(function(f) {
    map.querySourceFeatures('data').forEach(function(f) {
      var object = turf.centerOfMass(f)
      var center = object.geometry.coordinates
      var radius = 10;
      var options = {
        steps: 16,
        units: 'meters',
        properties: object.properties
      };
      data.features.push(turf.circle(center, radius, options))
    })
    map.getSource('extrusion').setData(data);
  })

[ https://jsfiddle.net/vd2crsob/ ]