CODEWITHSUNDEEP
mapboxmapbox-gl-js
Brad
Brad

Reputation: 73

mapbox gl fill-extrusion-height-transition not working

I've been trying to use fill-extrusion-height with a transition, and it doesn't seem to be working. Other transitions (like fill-extrusion-height-opacity) are working.

Anyone bumped up against this or have any ideas? I've gone through the github issues for mapbox gl and it confirms extrusion height should be transitionable

Example of what's happening here: https://jsfiddle.net/xpvt214o/331073/

mapboxgl.accessToken = 'pk.eyJ1IjoidGFkaXJhbWFuIiwiYSI6IktzUnNGa28ifQ.PY_hnRMhS94SZmIR2AIgug';
var map = new mapboxgl.Map({
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-74.0066, 40.7135],
    zoom: 15.5,
    pitch: 45,
    bearing: -17.6,
    container: 'map'
});

$('button').click(function() {
map.setPaintProperty('3d-buildings', 'fill-extrusion-height', 75);
})

// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on('load', function () {
    // Insert the layer beneath any symbol layer.
    var layers = map.getStyle().layers;

    var labelLayerId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
        }
    }

    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',

            // use an 'interpolate' expression to add a smooth transition effect to the
            // buildings as the user zooms in
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-height-transition':{
                duration: 2000,
                delay: 0
            },
            'fill-extrusion-opacity': .6
        }
    }, labelLayerId);
});

Upvotes: 1

Views: 2673

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126295

I think it works fine. Your example is switching from a data-driven property to a constant, and that doesn't seem to be transitionable. But transitioning from one constant to another works, as you see in this slightly tweaked version of your code:

https://jsfiddle.net/tyf76u0d/2/

 $('button').click(function() {

        map.setPaintProperty('3d-buildings', 'fill-extrusion-height', Math.random()*250 + 50);

    })

Upvotes: 3

Related Questions