[GIS] Leaflet + Proj4Leaflet + EPSG3995 +WMS

coordinate systemgeoserverleafletproj4jswms

I am trying to support a WMS layer with a North Polar Stereographic projection (EPSG3995) on Leaflet but cannot make it to work.

I used Proj4Leaflet and have created the projection with the resolutions given by GeoServer (the WMS layer is served by GeoServer, see joined image).

EPSG3995 Resolutions

On the following jsfiddle: https://jsfiddle.net/gaubert/Lyojcrzo/
I have tried to implement it and if you zooming on the leaflet map, you will see that the tiles are out place?

What is missing to make it work? Do I need to implement a transform or project method?

Best Answer

There are several problems here.

First, let me quote from http://leafletjs.com/examples/wms/wms.html (emphasis mine):

Also note that Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 and CRS:4326 (See the documentation for L.CRS). If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet. Other than that, just use the right CRS when initializing your map, and any WMS layers added will use it:

var map = L.map('map', {
    crs: L.CRS.EPSG4326
});

var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
    layers: 'nasa:bluemarble'
}).addTo(map);

The code in your fiddle does the opposite, it specifies the CRS as an option for the wms layer, instead of as an option for the map:

wmsBKLayer = new L.tileLayer.wms('http://eumetview.eumetsat.int/geoserv/wms', {
    layers: 'bkg-raster:bkg-raster',
    crs: customCRS
}

var map = new L.map('map', {
   // No CRS option here!!
});

Specify the CRS in the map options, and you should be fine.

Second, object instantiation. Leaflet uses camelCase with first uppercase letter for classes (e.g. L.TileLayer is a class), and camelCase starting with lowercase letter for factory methods (e.g. L.tileLayer is a factory method).

var foo = L.tileLayer(...);     // Preferred
var foo = new L.TileLayer(...); // OK, but not preferred
var foo = L.TileLayer(...);     // Nope, one cannot call a class
var foo = new L.tileLayer(...); // Nope nope nope nope, one cannot create an instance of a factory

Please read «https://stackoverflow.com/questions/8698726/constructor-function-vs-factory-functions» if you find this confusing.

Third, quoting from https://kartena.github.io/Proj4Leaflet/ :

Are you using Leaflet 1.0 beta 1 or development versions of Leaflet? Then you need to use the development branch of Proj4Leaflet.

This means that there is no released version of proj4leaflet which works with Leaflet 1.

In your fiddle, you are using Leaflet 1.0.2 and proj4leaflet 0.7.2. Those will simply not work together.

Either use a lower version of Leaflet, or build (and deploy and use) a newer version of proj4leaflet. Please note that proj4leaflet could use a bit of help with its maintenance, as @liedman can no longer support it.

If you have the time, I suggest you get in contact with the current maintainers, in order to help with a new release compatible with Leaflet 1.0.0.

If one addresses these three issues, everything will work again. See a working example at:

https://playground-leaflet.rhcloud.com/giwo/edit?html,output

Related Question