Mapbox GL Cluster location markers show/hide zoom issue

Question

I've followed the cluster example. I have three layers. clusters, unclustered-point and cluster-count. When I zoom in the cluster circles and count text are removed fine BUT NOT all the unclustered-point markers show. They show/hide depending on the zoom level. I want ALL unclustered-point markers to show when the cluster circle is removed. You can see what I mean here in this mp4 example. http://accessibelapp.sensibel.org/map-cluster-issue.mp4 and here is my code (sorry about the bad formatting.

map.addLayer({
    id: "clusters",
    type: "circle",
    source: "posNegPoints",
    filter: ["has", "point_count"],
        paint: {
            "circle-color": [
                "step",
                ["get", "point_count"],
                "#51bbd6",
                100,
                #f1f075",
                750,
                "#f28cb1"
                ],
                "circle-radius": [
                    "step",
                    ["get", "point_count"],
                    20,
                    100,
                    30,
                    750,
                    40
                 ],
                 "circle-stroke-width": 2,
                 "circle-stroke-color": "#ffffff"
            }
        });

map.addLayer({
                    id: "cluster-count",
                    type: "symbol",
                    source: "posNegPoints",
                    filter: ["has", "point_count"],
                    layout: {
                        "text-field": "{point_count_abbreviated}",
                        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                        "text-size": 12
                    }
                });
map.loadImage('http://localhost/sensibel-app/img/good.png', function(error, image) {
                    if (error) throw error;
                    map.addImage('good-icon', image);
                });

                map.loadImage('http://localhost/sensibel-app/img/bad.png', function(error, image) {
                    if (error) throw error;
                    map.addImage('bad-icon', image);
                });

map.addLayer({
                    id: "unclustered-point",
                    type: "symbol",
                    source: "posNegPoints",
                    "layout": {
                        "icon-image": "{PosNeg}-icon" // this could be the issue?
                    }
                });

I think it might have to do with my custom icon-image?

Answer 1

I think adding "icon-allow-overlap": true to the layout array/options solves my issue