[GIS] How to use Proj4Leaflet projections correctly

javascriptleafletproj

I'm loading data layers from a WMS server into a Leaflet map, and I need to give the user a choice of projections. For the WMS server requests, I just need to change the CRS parameter to a different string (the server definitely supports the projection I am using). However, when trying to change the projection of the Leaflet map object (by change, I mean remove and then re-initialise with the new projection), the map does not seem to update correctly, leaving the zoom levels and location completely out of sync with the WMS layers.

I'm using Proj4Leaflet, and I'm focussing on the EPSG:27700 (British National Grid) projection right now. The code I'm currently using is:

context.EPSG27700 = new L.Proj.CRS( 'EPSG:27700',
        '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000' + 
        '+ellps=airy +datum=OSGB36 +units=m +no_defs',
        {
        resolutions: [2800, 1400, 700, 350, 175, 84, 42, 21, 11.2, 5.6, 2.8, 1.4, 0.7, 0.35, 0.14, 0.07],
        });

When I set EPSG27700 as the CRS property of the map, I have to zoom far out to see the WMS layer and the origin moves away from the coordinates I set using the Leaflet setView method.

How do I go about using custom projections like these, and does anyone know of some working examples for this particular projection?

Best Answer

You need to define the affine transformation for transforming the map with the layer's tile origin (upper left corner) coordinates.

context.EPSG27700 = new L.Proj.CRS( 'EPSG:27700',
    '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000' + 
    '+ellps=airy +datum=OSGB36 +units=m +no_defs',
    {
    transformation: new L.Transformation(1, XOrigin, -1, YOrigin), // replace XOrigin & YOrigin with your coordinates
    resolutions: [2800, 1400, 700, 350, 175, 84, 42, 21, 11.2, 5.6, 2.8, 1.4, 0.7, 0.35, 0.14, 0.07],
    });
Related Question