CODEWITHSUNDEEP
javascriptmapsmapboxmapbox-gl-js
LBes
LBes

Reputation: 3456

Can mapbox take a variable as a paint property value?

So let us imagine that I have this zoom event that update the current value of my zoom on the map:

var map_zoom = 8
//Some more code to set up the map
map.on('zoom', function() {
        map_zoom = map.getZoom();
}

Now if I have a layer that draws circle like this:

map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': 'data',
        'paint': {
            'circle-radius': map_zoom,
            'circle-color': 'rgba(252,141,98,1)'

});

And an other layer that draws circle like this:

map.addLayer({
            'id': 'population',
            'type': 'circle',
            'source': 'data',
            'paint': {
                'circle-color': 'rgba(252,141,98,1)'

    });

What would be the difference between these two? I have added on my sample code a onClick event to get the paint properties of individual circles, but it seems that in both cases the 'circle-radius' is a fixed value. That is to say, even in my first case where I set it as depending on the variable that is updated with each zoom level, its value is fixed, even at different zoom levels. Is that normal?

Are mapbox's expressions the only way to modify dynamically a value for a layer or some paint properties?

Upvotes: 1

Views: 1526

Answers (1)

stdob--
stdob--

Reputation: 29172

You can change the behavior of the paint properties through changing the properties of the features (change source) or using the setPaintProperty method:

map.on('zoom', function() {
  var map_zoom = map.getZoom() * 5;
  map.setPaintProperty('total', 'circle-radius', map_zoom);
})

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

Upvotes: 3

Related Questions