Icons still not overlapping, while overlap set to true

Question

In my mapbox style I have a custom icon image for the data points. Even though in the Position tab the icon-allow-overlap is set to true, one of the icons hides when zoomed out to level 12 or more.

Data points are loaded through geojson:


var geojson = {
    "features": [
        {
          "type": "Feature",
          "properties": {
            "title": "Name of location",
            "description": "address"
          },
          "geometry": {
            "coordinates": [long, lat],
            "type": "Point"
          }
        },
        { more features here }
    ],
};


<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<script>
    mapboxgl.accessToken = 'token';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'my style',
        center: [long, lat],
        zoom: 11.5
    });
    map.scrollZoom.disable();
</script>

For good measure I've also tried adding text to the label (an empty string), and setting text-allow-overlap to true as well, but to no avail. Clustering is not what I'm looking for.

I've found several other issues describing this problem (even though I'm not using tiles but geojson), but none of the given solutions change anything for my usecase.

What am I missing?

@SteveBennett I've added the code from my html, but the issue is already coming up when I'm working with the styles in the mapbox studio. — Kablam, Jun 29 '23 at 13:56
Including the style definition is useful - or at least the relevant layers. — Steve Bennett, Jul 03 '23 at 03:01
@SteveBennett The layer in question is a blank new layer, with a geojson dataset uploaded in it. The geojson is included above, but I can't find any other settings related to hiding data points except for the `icon-allow-overlap`. I'm not sure if or where I can export the style definition for that specific layer from mapbox studio. — Kablam, Jul 03 '23 at 20:24
In your code you can do `console.log(map.getStyle().layers.filter(l => l.source==='mysource'))` — Steve Bennett, Jul 04 '23 at 00:48

score 0 · Answer 1 · answered Jul 02 '23 at 20:01

Found a workaround. Instead of adding the data points to the mapbox studio style as a layer, I'm now adding them to my embedded map user side.

First making the features available:

var geojson = {
    "features": [
        {
            "type": "Feature",
            "properties": {
                "title": "Name of feature",
                "anything": "anything you like, really",
                "this_data": "was used to add information to map popups"
            },
            "geometry": {
                "coordinates": [long, lat],
                "type": "Point"
            }
        }
    ]
};

Then adding them to the map:

geojson.features.forEach(function(marker) {
    var el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

Finally style the divs the way you like, for example:

.marker {
    background-color: #fff;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
}

Because they're defined in the html after the map has been embedded, they won't hide at different zoom levels in my experience.

Icons still not overlapping, while overlap set to true

1 Answers1