Leaflet Map using Proj4Leaflet to display a projected TMS base map from MapProxy

osgb_map.js

// Bounding box of our TMS that define our area of interest
var bbox = [-600000, -300000, 1300000, 1600000];

// Resolutions of our TMS that the tiles will be displayed at calculated so
// that at resolution 0 the bounds fit one 256x256 tile: (maxx - minx)/256
var res = [7421.875, 3710.9375, 1855.46875, 927.734375];

// Define the Proj4Leaflet coordinate reference system base on British National Grid
var crs = L.CRS.proj4js(
    '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',
    new L.Transformation(1, -bbox[0], -1, bbox[3])
);

// Define a scale custom function to calculate
// the scale based on the current zoom. Prior to
// v0.4 the scale function was a member of the map
crs.scale = function(zoom) {
    return 1 / res[zoom];
};

var map = new L.Map('map', {
    crs: crs,
    continuousWorld: true,
    worldCopyJump: false
});

var mapUrl = 'http://my.mapproxy.server/tms/1.0.0/layername_EPSG27700/{z}/{x}/{y}.png';

var tilelayer = new L.TileLayer(mapUrl, {
    tms: true,
    maxZoom: res.length - 1,
    minZoom: 0,
    continuousWorld: true,
    attribution: 'Copyright 2012'
});
map.addLayer(tilelayer);

// Centre on London zoom to the maximum extent
map.setView(new L.LatLng(51.33129296535873, -0.6680291327536106), 0);

JavaScript required to create a Leaflet map configured with a British National Grid projection and a TMS backed layer provided by MapProxy using Proj4Leaflet to enable the use of a custom projection.

Based on the Proj4Leaflet example Thanks to @perliedman and @bartvde for their help with the original and the post Leaflet v0.4 update.

Things of note:

• I think that Leaflet requires that each resolution must be half of the preceeding resolution.
• You can get the appropriate Proj4 coordinate system definition from the awesome spatialreference.org, for instance the definition used above can be found here: http://spatialreference.org/ref/epsg/27700/ then click on Proj4.
• Prior to Leaflet v0.4 TileLayer had a scheme property that had to be set to tms, post v0.4 you set the tms property to true.
• In my previous example I think I messed up the Transformation parameters. The current version uses: 1, -minx, -1, maxy. The transformation is used when going from projected coordiates to grid coordinates, further detail in @perliedman's blog post: http://blog.kartena.se/local-projections-in-a-world-of-spherical-mercator/.
• Coordinates are still defined in LatLong.
• You should be able to determine everything required to set up a TMS layer from spatialreference.org together with the GetCapabilites document which for the example MapProxy server used above would be available at: http://my.mapproxy.server/tms/1.0.0/layername_EPSG27700

Matt thx very much for the gist.
Have you got a full example working anywhere?
I'm having trouble understanding which js in proje4leaflet's example does what.

Peter

Thanks Matt!

I was just having a play with Leaflet and a WMS in EPSG27700, your code has got me up and going.

Cheers,

Ed

From memory, the projection might not be quite right (offset by ca 200m). Try removing the DATUM declaration, and replace with a correct towgs84:

+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs

how to overlay maps on openlayers API by tms server I render maps by mapnik but doesn't dysplay on openlayers API
please help any one !!!