I am using GeoServer 2.14.1 and OpenLayers 5 API to view the polygon data to my web map application using WMS service. I have used simple polygon style with black color.When zooming, the color of the data is fully occupied the screen (Chrome & Firefox) and then vanishing tile by tile as shown in the snapshot.

Before zooming

enter image description here

When zooming

enter image description here

Is this because of GeoServer style or do we need to configure anything at the layer publishing or do we need to tweak something in OpenLayers 5 CSS?


If you have configured OpenLayers to use TileWMS it's caused by OpenLayers zooming the canvas then taking noticeably longer to load some new tiles from the source than others, typically when the server response is slow. Setting transition: 0 in the source might improve things slightly, but it won't fix a slow server response.

If it is your base layer you could clear the canvas before composing the layer, so instead of blurring there's an empty space until the tiles load.

layer.on('precompose', function(evt) { 
    evt.context.fillStyle = colour;
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
  • Thanks for your response. Please clarify that transition: 0 to be set as map property or as layer property?
    – venkat
    Dec 19 '18 at 13:27
  • It's an option for ol.source.TileWMS (and most other types of tile source).
    – Mike
    Dec 19 '18 at 13:38

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.