I am using GeoServer to render WMS for variable sized points based on a data attribute. This technique is documented in GeoServers SLD Cookbook here. The SLD that I am creating validates successfully in GeoServer's SLD section of the Admin screen and renders correctly in the OpenLayers preview. However, when rendering in a Leaflet.js map a specific area of the map consistently returns seemingly incorrect tiles resulting in a 'chopping' like effect. This may be obvious but I have noticed that the sharp edges are a result of a tile edge where one tile renders a portion of the point and the other is missing the remaining portion of the point. Since GeoServer is serving complete tiles this seems like Leaflet is retrieving certain tiles that are out of date for that zoom level.

enter image description here

I don't think this is a browser caching issue because the 'chopping' is consistent no matter how many times I recreate the database view and GeoServer services the layer is created from. One theory I have is that the

Does anyone have any idea why this may be happening and/or how to approach fixing it?

1 Answer 1


The OpenLayers demo requests a single tile so there's no tiling issues to work around. When individual tiles are requested, as in the case by Leaflet.js, GeoServer renders each tile individually without knowing about the other surrounding tiles.

This is most often run into when labels show up for a large feature once in each tile, but your symptoms looks like it's probably the same issue.

You can look at Meta-Tiling

Meta-tiling prevents issues with duplicated labels when using a tiled client such as OpenLayers. When meta-tiling is used, images are rendered and then split into smaller tiles (by default in a 3x3 pattern) before being served. In order for meta-tiling to work, the tile size must be set to 256x256 pixels, and the tiled and tilesorigin parameters must be specified.

Or you can try a Leaflet.js plugin to get Single-tile support. leaflet.wms looks promising but requires version 0.8-dev. I'm using Leaflet.NonTiledLayer in a project with the labels issue and it's working well.

  • Thanks! This makes sense and fits with what I am seeing. I already have meta-tiling enabled and am trying to avoid rendering a single large tile but may have to for points in this case.
    – jmapping
    Apr 9, 2015 at 20:34
  • UPDATE - I implemented Leaflet.NonTiledLayer as a test and this indeed fixes the issue. The visual effect while zooming is less than ideal but it does prove that you are correct. Thanks again for the help!
    – jmapping
    Apr 9, 2015 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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