Leaflet JS: Tiles misaligned using WMS resource

Question

in Leaflet JS I instantiated a WMS tile layer object, given a base URL of the WMS service.
The wms service projection system is EPSG:32633 (WGS 84 / UTM zone 33N) and I had to use proj4js to project it properly on Leaflet object.

WMS url: webapps.sit.puglia.it/arcgis/services/BaseMaps/Ortofoto2013/‌​…?

var crs = L.CRS.proj4js('EPSG:32633', '+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs'); 
var ortoOpt = { 
    layers: ["0"], 
    format: "image/png", 
    transparent: true, 
    request: "GetMap", 
    version: "1.3.0", 
    service: "WMS", 
    crs: crs 
  }; 
var ortofotoLayer = L.tileLayer.wms(wms_baseurl, ortoOpt); 

Sadly, especially with higher zoom, the tiles appear misaligned, as in the picture.

It's possible to fix this?

Answer 1

In general it is best to allow the WMS and Leaflet determine the CRS of your requests (using the map projection) than to override it using a parameter in the WMS options.

So in your case the options should be:

var ortoOpt = { 
    layers: ["0"], 
    format: "image/png", 
    transparent: true, 
    request: "GetMap", 
    version: "1.3.0", 
    service: "WMS", 
  }; 
var ortofotoLayer = L.tileLayer.wms(wms_baseurl, ortoOpt);