Styjun

Why should I allow multiple IPs on a website for a single session?

Subset of knight's move in chess.

Do electrons really perform instantaneous quantum leaps?

What happens if a caster is surprised while casting a spell with a long casting time?

What does 5d4 x 10 gp mean?

Reusable spacecraft: why still have fairings detach, instead of open/close?

A quine of sorts

Checkmate in 1 on a Tangled Board

Does friction always oppose motion?

What is the meaning of 'shout over' in a sentence exactly?

Why isn't UDP with reliability (implemented at Application layer) a substitute of TCP?

Hard for me to understand one tip written in "The as-if rule" of cppreference

Two palindromes are not enough

Why would Dementors torture a Death Eater if they are loyal to Voldemort?

How can an inexperienced GM keep a game fun for experienced players?

How far can gerrymandering go?

Fully submerged water bath for stove top baking?

Is leaving out prefixes like "rauf", "rüber", "rein" when describing movement considered a big mistake in spoken German?

Avoiding repetition when using the "snprintf idiom" to write text

What election rules and voting rights are guaranteed by the US Constitution?

Journal standards vs. personal standards

"I am [the / an] owner of a bookstore"?

Is my guitar action too high or is the bridge too high?

How do I tell my girlfriend she's been buying me books by the wrong author for the last nine months?

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

Mapbox GeoJSON loaded via local URL: icons not showing popup propertiesMapboxGL Javascript API: displaying popup for all markers on map not working on multiple layersIs there a way to add perspective to mapbox GL markers?Styling MapBox GL MarkersMapbox GL JS cannot see markerHow can I change the Mapbox-gl maki icons color?How to add dynamic markers in mapbox?Mapbox GL JS: Trouble creating hover effects on mouseenter and mouseleave when layers are stacked (z-index)Mapbox do not hide markers on specific Zoom levelAdd url redirect to mapbox icon

0

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);
 );

javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker

share|improve this question

edited Mar 25 at 18:41

Jakob Fuchs

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't necessarily know that this is the culprit, but is there a reason you are rewriting your source each time the toggle is used? You might find that a simpler approach would be to leverage setFeatureState instead. (see this example: docs.mapbox.com/mapbox-gl-js/example/hover-styles)
  
  – riastrad
  May 29 at 20:11
  
  

  
  
  
  

add a comment | 

0

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);
 );

javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker

share|improve this question

edited Mar 25 at 18:41

Jakob Fuchs

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't necessarily know that this is the culprit, but is there a reason you are rewriting your source each time the toggle is used? You might find that a simpler approach would be to leverage setFeatureState instead. (see this example: docs.mapbox.com/mapbox-gl-js/example/hover-styles)
  
  – riastrad
  May 29 at 20:11
  
  

  
  
  
  

add a comment | 

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);
 );

javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker

share|improve this question

edited Mar 25 at 18:41

Jakob Fuchs

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

 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,
 
 );

 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);
 );

share|improve this question

edited Mar 25 at 18:41

Jakob Fuchs

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

share|improve this question

edited Mar 25 at 18:41

Jakob Fuchs

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges

asked Mar 25 at 15:40

Jakob FuchsJakob Fuchs

18122 gold badges22 silver badges1111 bronze badges