I want to make a cluster layer with mapbox, yes I made it :D. But I want to be able to turn it off
So I’m making a source
const source = { type: "geojson", data: { "type": "FeatureCollection", "features": [] }, cluster: true, clusterRadius: 10 } this.map.addSource(id, source);
Now I’m able to set the data:
this.map.getSource(this.id).setData({ "type": "FeatureCollection", "features": this.createInnerCircles() })
After this I am setting the layers for the clusters and circles. Now clustering is working
But now: How can I set the cluster: true
to false from my source. Ok, maybe I could throw away the source and make a new one but thats ugly.
So the ugly way is
const SOURCE = this.map.getSource(id); SOURCE._options.cluster = false; this.map.removeSource(id); this.map.addSource(id, SOURCE._options);
Oops, thats not working, now I’m getting:
Source "test" cannot be removed while layer "test-outer" is using it.
Update
I was able to enable / disable clustering thx to @Steve Bennett
setCluster(isVisable, clusterRadius = 10) { const style = this.map.getStyle() style.sources.test.cluster = isVisable; if(isVisable) { style.sources.test.clusterRadius = clusterRadius; } this.map.setStyle(style) }
Advertisement
Answer
The general approach to changing properties that don’t have a specific method for them is:
const style = map.getStyle() style.sources.X.Y = Z; map.setStyle(style)
Mapbox GL JS will perform a diff and then make the changes you need.