1

This is what my dataset looks like:

Seattle Crime Dataset

What I want to do is change the extrusion height based on the frequency column. I can successfully display these as points but I'm struggling with it whenever I use fill-extrusion. Can you help point me in the right direction? 

    map.addLayer({
    'id': 'total',
    'type': 'circle',
    'source': {
        type: 'vector',
        url: 'mapbox://askakdagr8.9tklrr8g'
    },
    'source-layer': 'GroupedOutput-9i6ink',
    'paint': {
        // make circles larger as the user zooms from z12 to z22
        'circle-radius': {
            'base': 1.75,
            'stops': [
                [12, 2],
                [22, 180]
            ]
        },
        'circle-color': '#ff7770'
    }
});
askakdagr8
  • 42
  • 5

1 Answers1

2

Since the mapbox-gl-js does not currently have functionality for extruding a circle, you need to replace the points with a polygon, and interpolating the circle, for example, by a function turf.circle:

  map.on('sourcedata', function(e) {
    if (e.sourceId !== 'total') return
    if (e.isSourceLoaded !== true) return

    var data = {
      "type": "FeatureCollection",
      "features": []
    }
    e.source.data.features.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);
  })

[ http://jsfiddle.net/zjLek40n/ ]

stdob--
  • 28,222
  • 5
  • 58
  • 73
  • Is there any news on that? I asked quite a similar question here: https://stackoverflow.com/questions/52359776/data-driven-3d-extrusion-with-mapbox not sure how this would apply in my case. I checked your JSFiddle and it doesn't display anything here anymore. What is the impact on performance when you do use this workaround? Can you combine that with other 3D extrusion layers? – LBes Sep 17 '18 at 13:55
  • @LBes I have not learned anything new about this topic since. The link example now works. – stdob-- Sep 17 '18 at 14:06
  • thanks for updating the code. Would you know if that could work on the 3D building extrusion layer directly? Can that also be applied to clusters? Because I would like my clustered point to also have some kind of height. Feel free to post as an answer on my post, I'd be more than happy to accept as answer (the part with the 3D extrusion of "circles" too). – LBes Sep 17 '18 at 14:10
  • Ok tried to make that work with a local geojson file and it does not work. I have updated my question here if you have time to take a look: https://stackoverflow.com/questions/52372543/3d-extrusion-with-mapbox-based-on-local-geojson-file – LBes Sep 17 '18 at 16:59