Leaflet map not showing labels from GeoServer

Question

I am trying to develop a map with Leaflet 1.9.3 and GeoServer 2.22.0. When I preview the GeoServer layer, the labels appears at all zoom levels as expected. But when its added to a Leaflet map, I noticed some specific labels do not show at specific zoom level. On closer inspection I noticed that the labels are positioned at about the edge of the Leaflet tiles. Is there a setting that can ensure that Leaflet shows all labels from GeoServer layer? I have looked at similar questions that suggest various vendor options. Below are the vendor options I used in GeoServer. The problem seems to be from the Leaflet maps.

label-conflict-resolution: false;
label-fit-goodness:0.3;
label-partials: false;
mark-label-obstacle: false;
label-max-displacement: 1000;

Answer 1

The behavior you're observing could be due to Leaflet's default behavior of only displaying tiles that fit completely within the map's viewport. When the label falls at the edge of the tile, it might not be visible when the tile is displayed in the map.

To ensure that the labels are displayed, you can try setting the noWrap option to true in the TileLayer configuration. This tells Leaflet to display all tiles, even if they extend beyond the edge of the map.

Here's an example:

L.tileLayer('http://yourgeoserver/geoserver/gwc/service/tms/1.0.0/layername@EPSG:4326@png8', {
  maxZoom: 19,
  tms: true,
  noWrap: true
}).addTo(map);

You can also try adjusting the buffer option to ensure that a larger area around the label is included in the tile. The default value for this option is 128, but you can increase it if needed.