CODEWITHSUNDEEP
angularmapboxmapbox-gl-js
user7393570
user7393570

Reputation: 61

Highlight(colorize) areas depend on size of land area on Mapbox using mapbog gl js

I am using Angular 11, mapbox library. My problem is the following, how I can colorize country area depending on its size?

For example if the area size is 0-20 acres - #E8474B , 21-50 acres - #26B0F9.

I can get bounding box coordinates using mapbox API, but there is a access problem.

Here is geojson object

  {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'geometry': {
                'type': 'MultiPolygon',
                "coordinates":[]
            }
        }
    }

Who can suggest me the right way to solve this problem?

Upvotes: 1

Views: 176

Answers (1)

Nick VN
Nick VN

Reputation: 336

You can use Turf.js' area function to calculate the area of each feature and then use data-driven styling to determine the fill-color of your polygons with a case expression.

const features = [...];
features.forEach((feature) => {
    feature.properties.area = turf.area(feature);
});

The paint property of your layer should look something like this:

//...
paint: {
    'fill-color': [
        'case',
        ['<=', ['get', 'area'], 10],
        'red', // use red when area is <= 10
        ['<=', ['get', 'area'], 20],
        'green', // use green when area is <= 20
        ['<=', ['get', 'area'], 30],
        'blue', // use blue when area is <= 30
        'grey'  // fallback, use grey when none of the above apply
    ],
}
//...

Upvotes: 1

Related Questions