CODEWITHSUNDEEP
javascriptmapbox
Jamie
Jamie

Reputation: 10896

Mapbox add background image on circle

I'm using mapbox and I've clustered my data. Now I want to show a background image (instead of a black background!) when a user has zoomed to a point.

I add it like this:

this.map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "earthquakes",
    filter: ["!has", "point_count"],
    paint: {
        "circle-color": "black",
        "circle-radius": 8,
        "circle-stroke-width": 4,
        "circle-stroke-color": "#fff",
    }
});

enter image description here

I'm loading my geojson like this:

this.map.addSource("earthquakes", {
    type: "geojson",
    data: this.locations,
    cluster: true,
    clusterMaxZoom: 14, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

this.map.addLayer({
    id: "clusters",
    type: "circle",
    source: "earthquakes",
    filter: ["has", "point_count"],
    paint: {
        "circle-color": [
            "step",
            ["get", "point_count"],
            "#002e5b",
            100,
            "#002e5b",
            750,
            "#002e5b"
        ],
        "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40
        ],
    }
});

So how can I get a background image instead of a black background?

Upvotes: 2

Views: 783

Answers (1)

Madison Draper
Madison Draper

Reputation: 21

You can add another layer of points with your custom image that becomes visible at z14. This way the custom image will cover the black circles.

I recommend making the black circle extremely small or nonexistent so it doesn't conflict with the custom images.

Upvotes: 1

Related Questions