CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-glmapbox-marker
Jakob Fuchs
Jakob Fuchs

Reputation: 386

Mapbox markers flashing when using `icon-allow-overlap`

I have a map that's using mapboxgl-js to hide or show map markers based on some criteria.

Hiding the markers is working as expected, but when I want the markers to show again they flash for some milliseconds then disappear again while the map hides labels (street names etc.) on the underlying layer before they show up again.

See this video: https://streamable.com/debcp

See this codepen: https://codepen.io/jakobfuchs/details/VRRgJO

I came to the conclusion that this is caused by setting 'icon-allow-overlap': true on the marker symbol layer.

Any suggestions how I can keep that setting and avoid the flashing?

The strange thing is that this does not happen 100% of the time but ~95% of the time.

Code samples:

Marker layer:

  map.addLayer({
    id: 'property-layer',
    type: 'symbol',
    source: 'properties',
    filter: ['!has', 'point_count'],
    layout: {
      'symbol-placement': 'point',
      'icon-image': 'marker',
      'icon-size': 1,
      'icon-anchor': 'bottom',
      'icon-allow-overlap': true,
    }
  });

Filter code:

  const filterToggle = document.getElementById('filterToggle');
  filterToggle.addEventListener('change', function(e) {
    if (openPopup) {
      openPopup.remove();
      openPopup = '';
    }
    let properties;
    if (this.checked) {
      properties = {
        type: "FeatureCollection",
        features: features.features.filter((property) => property.properties.availability === 'Available')
      }
    } else {
      properties = features;
    }
    map.getSource('properties').setData(properties);
  });

Upvotes: 4

Views: 6749

Answers (1)

An Ha
An Ha

Reputation: 21

I have faced with the same issue and my solution is use the icon-ignore-placement instead of icon-allow-overlap, and it's still not have any issues

You can find the document here: https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-ignore-placement

Hope this will help, thanks!

Upvotes: 1

Related Questions