Preventing clipped labels from QGIS Server WMS in Leaflet JS

Question

I'm trying to show in Leaflet a WMS map served with QGIS Server. As you can see in this fiddle below there's a problem with the items in the map; they appear to be clipped somehow. The data which are given by QGIS Server are geographical multipolygons with associated their id in the postgis database.

https://jsfiddle.net/maurizioricci95/vydseLzq/1/

The map is working correctly if imported in QGIS Desktop using directly the WMS URL (http://quegis.labcd.unipi.it/cgi-bin/qgis_mapserv.fcgi). I also tried in Leaflet to request image in PNG format with the transparency but didn't fix the problem.

This is the GetCapabilities of the WMS:

http://quegis.labcd.unipi.it/cgi-bin/qgis_mapserv.fcgi?SERVICE=WMTS&VERSION=1.3.0&REQUEST=GetCapabilities , everything appears to be ok.

It looks like there's some strange behavior/options set in Leaflet but I am not able to figure it out.

Answer 1

You're hitting tiling artifacts. Namely, the labels are being cut between tiles (and the circle markers for the points probably as well); this is easily seen by adding a border to the Leaflet tiles by adding a bit of CSS like .leaflet-tile-loaded { border: 1px dashed red; }, e.g.:

This happens when the rendering engine uses data strictly inside the bounds of the requested image/tile to render said image/tile. Imagine a data point which should be one two pixels away from a tile boundary and that is represented by a 8-pixel radius circle: there should be 6 pixels worth of circle in a tile that doesn't really contain that point.

There are some usual approaches to tile artifacts:

• Use a bigger tile size for your L.TileLayer.WMS. However, this will only make the artifacts appear a bit less frequently, not prevent them.

• Use L.WMS.Overlay for displaying "untiled" WMS images. This will get rid of those artifacts, but will introduce new ones (the rendering will be different depending on the bounding box in some circumstances, antimeridian issues) and will put a lot more strain on the WMS server (as each map pan will trigger a new uncacheable re-render of the map).

• Change the rendering style on the WMS server itself, so that data just outside of the requested bounding box is used on the rendering. This means that points that are not on the current tile should be fetched and their labels rendered, just in case a tiny bit of that label is visible even though the point itself is not.

The third technique is the preferred IMO, but you need to be able to tweak the WMS server itself, and depends on what software is powering the WMS service. (e.g. see for QGIS or for mapserver or for geoserver)