8

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?

5

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

| improve this answer | |
  • Thanks a million for the swift answer. Fixed all the issues and it works. I have one more question if I may, why don't I see the full map but only part of europe. It is a resolution problem ? – zoobert Dec 20 '16 at 16:01
  • Ok I found my way in the non existent documentation ;-). I needed in the projection to define as well the bounds and the origin. Once added it looked better. Thanks again for your help. – zoobert Dec 20 '16 at 16:59
  • You're welcome. If you find the documentation lacking, remember that both Leaflet and proj4leaflet will be happy to receive pull requests for improving the docs! – IvanSanchez Dec 21 '16 at 9:39
  • Isn't it possible to add wms layer that has crs different than the crs of the map? – senol ozgur Mar 22 '18 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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