Reputation: 711
I´ve a react application and use MapBox to display points and clusters on the world map. I use the properties of the source inside the "normal" layer. Now I also need to get the properties, or just if a property is set in the source in the cluster layer too.
I´ve using useRef
to create a mapbox element. Then I add my locations with the addSource
method:
map.current
// Add locations source
.addSource("locations", {
type: "geojson",
cluster: true,
clusterRadius: 15,
clusterMaxZoom: 14,
clusterProperties: {
// has_orders: ["any", false, ["==", ["get", "has_orders"], "false"]]
// has_orders: ["==", ["get", "has_orders"], "false"]
has_orders: ["==", "true", ""]
},
data: {
"type": "FeatureCollection",
"features": parseLocationServiceToGeoJson(locations)
}
});
After that I can add the "normal" Layer to the mapbox element:
map
.current
.addLayer({
id: LOCATIONS_LAYER_ID,
type: "circle",
source: "locations",
filter: ['!', ['has', 'point_count']],
paint: {
"circle-color": [
'match',
['get', 'has_orders'],
'true',
"#fb4242",
'false',
"#2cbe66",
/* other */ "#4264fb"
],
"circle-radius": 6,
"circle-stroke-width": 2,
"circle-stroke-color": "#fff"
}
})
And last but not least the cluster layer:
map
.current
// Display cluster
.addLayer({
id: LOCATIONS_LAYER_CLUSTER_ID,
type: "circle",
source: "locations",
filter: ['has', 'point_count'],
paint: {
"circle-color": [
'match',
['get', 'has_orders'],
'true',
"#fb4242",
'false',
"#2cbe66",
/* other */ "#4264fb"
],
"circle-radius": 10,
"circle-stroke-width": 2,
"circle-stroke-color": "#fff",
}
})
.addLayer({
id: LOCATIONS_LAYER_CLUSTER_COUNT_ID,
type: "symbol",
source: "locations",
filter: ['has', 'point_count'],
layout: {
'text-field': ['get', 'point_count'],
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12,
},
paint: {
'text-color': "#fff"
}
})
Upvotes: 0
Views: 44