Skip to content

Instantly share code, notes, and snippets.

@walkermatt
Created July 2, 2012 18:25
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save walkermatt/3034742 to your computer and use it in GitHub Desktop.
Save walkermatt/3034742 to your computer and use it in GitHub Desktop.
Leaflet Map using Proj4Leaflet to display a projected TMS base map from MapProxy
// 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);
@pkorac
Copy link

pkorac commented Mar 22, 2013

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

@edwhittaker
Copy link

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

@tomchadwin
Copy link

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

@abersh
Copy link

abersh commented Jan 13, 2016

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 !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment