I have an OpenLayers map with a number of points on the map. Some of those points are labeled via an ol.Overlay. Every 10 seconds, I call to the server and ask if the location of that point has changed, and the labels are re-created.

In the first image below, the application is paused right after the locations have been refreshed and the new label is created, but is not shown yet (the old label will be shut off just prior to showing the new label). The inspector is highlighting the hidden but placed label.

Point #170 hasn't changed position, but initially, the label created for it is situated 13px to the right of where it should be.

enter image description here

I hide the old label, and show the new label (still appearing in the incorrect place) : enter image description here

But, after a fraction of a second of being shown, the new label moves to its correct place:

enter image description here

This creates an annoying flickering appearance in some browsers (Chrome is fine, but in the others it is more apparent).

Is this a result of OpenLayers, or is it more likely to be an issue in my code?

The problem seems to resolve itself after this line (83093) in ol-debug.js:

  new ol.MapEvent(ol.MapEventType.POSTRENDER, this, frameState));
  • Have you tried reloading the map : map.render() or map.renderSync() Jul 20 '15 at 11:51

I temporarily fixed this problem by adding a slight 100ms delay between when the labels were created and when they were switched in for the old labels (using setTimeout). Still looking for a better solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.