Mapbox-gl-js: Do not hide markers at specified zoom level?

[misterfresh]

I have a map where I set maxZoom at 9. At the moment for testing purposes I would like to show all markers at that zoom level, even if they overlap.

How can I do that?

Thanks.

[mourner]

See icon-allow-overlap in the style spec https://www.mapbox.com/mapbox-gl-style-spec/#symbol

[misterfresh]

Thanks.

With the following code markers still can't seem to overlap :

    var style = require('./../../conf/outdoors-v7.json');
    style.layers.push({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-12",
            "icon-allow-overlap": true,
            "icon-ignore-placement": true,
            "text-field": "{title}",
            "text-font": "Open Sans Semibold, Arial Unicode MS Bold",
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        },
        "paint": {
            "text-size": 12
        }
    });

[SimonaJ]

This is an old thread but in case anyone else runs into this issue -

you also have to add 'text-allow-overlap': true, probably because your layer has text-field property and if it is not set, mapbox somehow ignores icon-allow-overlap: true and hides icons anyway.

[haffla]

@SimonaJ in my case I don't even have text. Just an icon. But still most of my icons are not visible (up to a certain zoom level) even though they are 'miles away' from other icons.
This is what I have now. Would appreciate any hints.

map.addLayer({
      id: constants.MAP_LAYER_ID,
      type: 'symbol',
      source: constants.MAP_SOURCE_DATA_ID,
      layout: {
          'icon-image': 'monument-15',
          'icon-allow-overlap': true,
          'icon-ignore-placement': true,
          'icon-padding': 0,
          'text-allow-overlap': true // doesnt make sense I know, but I tried this
      }
  });

[sidonaldson]

I'm also finding this. Do the docs hide a clue?

What exactly does data-driven styling mean? As this isn't supported yet.

[woshitom]

@haffla when you add your source, do not add this option:

cluster: true

or set it to false:

                    map.addSource("shops", {
                        type: "geojson",
                        data: your_data
                    });

[liushengxian]

run into this problem, too.

My code as following:

layout: { "icon-image": "my-icon", "icon-allow-overlap": true, "icon-padding": 1, "icon-size": 0.8, "text-allow-overlap": true, "icon-ignore-placement": true , }

In fact, there's no text at all. But still most of my icons are not visible (up to a certain zoom level) even though they are 'miles away' from other icons.

[leogoesger]

Anyone finding a solution for this? I am facing the same issue.

{
    id: source,
    source: source,
    type: 'symbol',
    interactive: true,
    layout: {
      'icon-image': 'someiamge'
      'icon-allow-overlap': true,
      'symbol-avoid-edges': true,
      'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
      'text-size': 8,
      'text-transform': 'uppercase',
      'text-letter-spacing': 0.05,
      'text-offset': [0, 1.3],
    },
    paint: {
      'text-color': '#ffffff',
    },
  }

[leogoesger]

I solved my issue by adding 'text-allow-overlap': true, and 'icon-allow-overlap': true,.

[jsina]

@leogoesger How could I add have a box with background like a box to show textField on it?

[zhuxiaomengjj]

It's probably caused by the source, not the style. In the source tile there are distributed to several zoom levels, so, you can't see them all in one zoom level

[hb0]

In my case switching from 'symbol-placement': 'line' to 'symbol-placement': 'line-center' helped.