While Leaflet is a fantastic mapping library, there’s not a lot of info out there on how to use it with different projections. I thought I’d share some tips I discovered while trying to get Leaflet working with a WMS server that only supports the projected VICGRID94 (EPSG:3111) CRS. Leaflet’s documentation is generally OK, but there’s a few potential roadblocks which took me a while to understand.
First you’ll need Leaflet, proj4js and Proj4Leaflet all installed on your server and linked to your page.
Before you initialise the map instance you’ll need to set up the CRS transform, which goes along the lines of:
// Coordinate to grid transformation matrix
var transformation = new L.Transformation(1, 0, -1, 0);
// Official Spatial Reference from http://www.spatialreference.org/ref/epsg/3111/
var crs = L.CRS.proj4js('EPSG:3111',
'+proj=lcc +lat_1=-36 +lat_2=-38 +lat_0=-37 +lon_0=145 +x_0=2500000 +y_0=2500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
transformation);
You’ll also need to set up scale function, and assign it to your crs object.
// Scale for each level
var res = [2116.670900008467, 1058.3354500042335, 529.1677250021168, 264.5838625010584, 132.2919312505292, 66.1459656252646, 26.458386250105836, 13.229193125052918, 6.614596562526459, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.21166709000084669];
var scale = function(zoom) {
return 1 / res[zoom];
}
crs.scale = scale;
It took me a while to track this one down, but when you’re creating your layers, make sure you set “continuousWord: true” . Failing to set this will result in no tiles being loaded. Here’s an example WMS layer:
var cartolayer = L.tileLayer.wms("http://x.x.x.x/map/wms", {
layers: 'basemap',
format: 'image/png',
continuousWorld: true,
});
Lastly, when initialising the map:
- You must again set the option continuousWorld: true
- You must set “worldCopyJump: false”, or you’ll have problems with the map jumping to a random location when you attempt to drag it (see Leaflet issue #1003)
- Set the crs to the one created earlier
</pre>
var map = new L.Map('map', {
crs: crs,
continuousWorld: true,
center: new L.LatLng(-37.8, 144.9),
zoom: 5,
minZoom: 0,
maxZoom: 13,
worldCopyJump: false
});
Now you should be right to go and take advantage VICGRID with all that Leaflet goodness!
Some information which might be useful is available at:
