CODEWITHSUNDEEP
mapboxmapbox-gl-js
Jesse
Jesse

Reputation: 161

circle-radius bigger with a data-driven property

I want to paint bigger circles when the data property--total is bigger. deviceGeojson is the data, I think I should write some code within 'circle-raduis' but I dont know how to get it.

var deviceGeojson = [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.961027, -37.795947]
            },
            "properties": {
                "PC": 100,
                "Mobile": 200,
                "Laptop": 300,
                "total": 600
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.960205, -37.797596]
            },
            "properties": {
                "PC": 100,
                "Mobile": 200,
                "Laptop": 300,
                "total": 600
            }
        }
        ];

map.addLayer({
                'id': 'test',
                'type': 'circle',
                'source' : {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": deviceGeojson,
                    }

            },
            'paint':{
                'circle-color': '#00b7bf',
                'circle-radius': {

                },
                'circle-stroke-width': 1,
                'circle-stroke-color': '#333',
            }
        });

I dont know how to write the code within 'paint',Thank you

Upvotes: 1

Views: 917

Answers (1)

Manish
Manish

Reputation: 5213

You can use expressions to get value of a property:

"circle-radius": ['get', 'total']

Or if you were to device the value of total property by say 20, you'd do something like this:

"circle-radius": ['/', ['get', 'total'], 20],

You can read more about expressions here: https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

Upvotes: 2

Related Questions