I have MapBox map with clustered-points of cities.
On these clusters, I display the number of address by cities with the clusterProperties "sumAddress: ["+", ["get", "nbAdresses"]]".
If y want display the number of cities dynamically, it doesn't work:
layout: {
"text-field": "{sumAddress}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 10,
},
And if I replace "{sumAddress}" by string number "1", it's correctly displayed!
Why does the code work with clusters and not with unclustered points?
Complete code:
this.map.on("style.load", () => {
this.map.addSource("cities", {
type: "geojson",
data: this.clustersCoords,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50,
clusterProperties: {
sumAddress: ["+", ["get", "nbAdresses"]], // number of address by cities
},
});
this.map.addLayer({
id: "clusters",
type: "circle",
source: "cities",
filter: ["has", "point_count"],
paint: {
"circle-color": [
"step",
["get", "point_count"],
"#ef9a9a",
100,
"#ea524f",
750,
"#b83523",
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40,
],
},
});
this.map.addLayer({
id: "cluster-label",
type: "symbol",
source: "cities",
filter: ["has", "point_count"],
layout: {
"text-field": "{sumAddress}", // correctly displayed on the clusters
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12,
},
paint: {
"text-color": "#fff",
},
});
// final point, circle displayed but not the symbol whith the dynamic text-field:
this.map.addLayer({
id: "unclustered-point",
type: "circle",
source: "cities",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#f6ccd2",
"circle-radius": 14,
"circle-stroke-width": 2,
"circle-stroke-color": "#fff",
},
});
this.map.addLayer({
id: "uncluster-label",
type: "symbol",
source: "cities",
filter: ["!", ["has", "point_count"]],
layout: {
"text-field": "{sumAddress}", // not displayed, why ?
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 10,
},
paint: {
"text-color": "#000",
},
});
});