CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-gl
Johan Hoeksma
Johan Hoeksma

Reputation: 3746

mapbox change source property

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)
    }

Upvotes: 3

Views: 2175

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126085

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.

Upvotes: 6

Related Questions