When visualizing clusters with Mapbox's GL JS, how can I show clusters as circles which size/colours are proportional to the average of clustered points' property 'Rev', instead of proportional to the point-count property, as my code is doing it now.
Is there any way to do this simply, or should I look into other methods?
Here's my GeoJson file, followed by the HTML/JS code:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.19829231731719,
47.90908511753154
]
},
"properties": {
"Rev": 35936
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.7755325786427,
47.7306063942337
]
},
"properties": {
"Rev": 47200
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.12815267767228,
47.73181417578077
]
},
"properties": {
"Rev": 39752
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.72131588657607,
47.62538657582257
]
},
"properties": {
"Rev": 68409
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.76859244063696,
47.65315010018514
]
},
"properties": {
"Rev": 58096
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.68193070272407,
47.59749128620617
]
},
"properties": {
"Rev": 47041
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.8242039862955,
47.55099465271122
]
},
"properties": {
"Rev": 51853
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.70419192685726,
47.60802452425318
]
},
"properties": {
"Rev": 72618
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.69693913078216,
47.57162728442453
]
},
"properties": {
"Rev": 52554
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.77082212541431,
47.58519630791069
]
},
"properties": {
"Rev": 47701
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.72274437525938,
47.57540476604761
]
},
"properties": {
"Rev": 63610
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.72121927445753,
47.45263352979493
]
},
"properties": {
"Rev": 38567
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.76290287271861,
47.55429851907238
]
},
"properties": {
"Rev": 35469
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.74269793343025,
47.53953686427654
]
},
"properties": {
"Rev": 49121
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.76163591227777,
47.50644185305855
]
},
"properties": {
"Rev": 47919
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.84542950324599,
47.61777915571298
]
},
"properties": {
"Rev": 60426
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.77801075058724,
47.51816149102929
]
},
"properties": {
"Rev": 47905
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.80767455969733,
47.52848409139136
]
},
"properties": {
"Rev": 45401
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.89213548996228,
47.53451007871581
]
},
"properties": {
"Rev": 65160
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.27195393835159,
47.61583697105699
]
},
"properties": {
"Rev": 41483
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.84749023832796,
47.53243876693115
]
},
"properties": {
"Rev": 56875
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.8314888595886,
47.51782244114296
]
},
"properties": {
"Rev": 46844
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.80527536508978,
47.50451498771553
]
},
"properties": {
"Rev": 55438
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.87559172093075,
47.44430331307405
]
},
"properties": {
"Rev": 64614
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.04097664266915,
47.4746664178687
]
},
"properties": {
"Rev": 49051
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.79453993380347,
47.29481960119973
]
},
"properties": {
"Rev": 54271
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.27362522622246,
46.93872952966501
]
},
"properties": {
"Rev": 40496
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.95310271439685,
47.50726480344612
]
},
"properties": {
"Rev": 50724
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.85227048096456,
47.12576043063685
]
},
"properties": {
"Rev": 41971
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.80575131531626,
47.64731392392495
]
},
"properties": {
"Rev": 43599
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.30450455023757,
47.50616020238343
]
},
"properties": {
"Rev": 41448
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-52.99853696654008,
47.46071325746318
]
},
"properties": {
"Rev": 43216
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-55.6341634538055,
47.0235441308108
]
},
"properties": {
"Rev": 36876
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-54.59106469230987,
47.58288998217581
]
},
"properties": {
"Rev": 41589
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-54.78972204950092,
47.01558950634211
]
},
"properties": {
"Rev": 45855
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-56.18216646812429,
47.90876337708686
]
},
"properties": {
"Rev": 35796
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-55.70784429742714,
47.87535928809802
]
},
"properties": {
"Rev": 33708
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.92125736143824,
47.76215387234033
]
},
"properties": {
"Rev": 34958
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-58.6714380511899,
48.68732029080497
]
},
"properties": {
"Rev": 35595
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-58.59978250200671,
48.22999943196341
]
},
"properties": {
"Rev": 32829
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-58.54838602886607,
48.54786691695791
]
},
"properties": {
"Rev": 35398
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.6584168422964,
48.99080773133051
]
},
"properties": {
"Rev": 53009
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.39261664236924,
49.33955194626351
]
},
"properties": {
"Rev": 36144
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-58.0409231988025,
49.0206817167341
]
},
"properties": {
"Rev": 36464
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.86226837634594,
48.94064825318665
]
},
"properties": {
"Rev": 44829
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-58.14944772884918,
49.00481125619757
]
},
"properties": {
"Rev": 36875
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.97295124074003,
48.91990398869032
]
},
"properties": {
"Rev": 37959
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-57.89350628857931,
48.93652298696046
]
},
"properties": {
"Rev": 53291
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-56.49906193316706,
48.8227639083209
]
},
"properties": {
"Rev": 34094
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-54.58950143236479,
48.95764271638678
]
},
"properties": {
"Rev": 48675
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-55.66330038586263,
48.95778743717311
]
},
"properties": {
"Rev": 40344
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-55.45649488665619,
48.7019018412633
]
},
"properties": {
"Rev": 36571
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-54.90874253491071,
48.76734107890486
]
},
"properties": {
"Rev": 39920
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-54.33974197493689,
48.59373660344468
]
},
"properties": {
"Rev": 36012
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.16774644648342,
48.55634939882323
]
},
"properties": {
"Rev": 32312
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.81331044039514,
48.28629035968544
]
},
"properties": {
"Rev": 34997
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.79701198717154,
48.03064642044428
]
},
"properties": {
"Rev": 47900
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.78741872849682,
49.07728414094627
]
},
"properties": {
"Rev": 34643
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-53.93968612391672,
49.53745719648462
]
},
"properties": {
"Rev": 35068
}
}
]
}<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoicm9kb2xwaGVnIiwiYSI6ImNqZjlzdnhndTBsdnMycW9mb3BpbHE4azMifQ._NTOVMlFUt17lxImA6WEIg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/rodolpheg/cjkvlobk505l92ro0caogtdl0',
center: [-56, 48],
zoom: 5
});
var min = 8000;
var max = 100000;
var color1 = 'F03434';
var color2 = '446CB3';
map.on('load', function() {
map.addSource("rev-statcan", {
type: "geojson",
data: "geoJsonStatCanRevCourt.geojson",
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 40
});
map.addLayer({
id: "clusters",
type: "circle",
source: "rev-statcan",
filter: ["has", "point_count"],
paint: {
"circle-color": {
property: "point_count",
type: "interval",
stops: [
[0, "#71AAC4"],
[100, "#71AAC5"],
[750, "#71AAC6"],
]
},
"circle-radius": {
property: "point_count",
type: 'exponential',
stops: [
[0, 10],
[2000, 50]
]
}
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "rev-statcan",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "circle",
source: "rev-statcan",
filter: ["!has", "point_count"],
paint: {
'circle-color': {
property: 'Rev',
type: 'exponential',
stops: [
[8000, '#' + color1],
[100000, '#' + color2]
]
},
'circle-radius': {
property: 'Rev',
type: 'exponential',
stops: [
[8000, 2],
[100000, 30]
]
}
}
});
});
</script>
</body>
</html>
