LeafletJS GeoServer WMS EPSG:27700

A sample page showing a Leaflet JS map using GeoServer WMS with data in British National Grid (EPSG:27700).  It uses the Proj4Leaflet plugin to set the display projection to EPSG:27700 as it is not one of the default supported projections.

<!DOCTYPE html>
<html>
 <head>
 <title>Leaflet JS + GeoServer WMS</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
 <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" /><![endif]-->
 <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
 <script type="text/javascript" src="js/proj4js-compressed.js"></script>
 <script type="text/javascript" src="js/proj4leaflet.js"></script>
 <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
 <div id="map"></div>
 <div class="overlay title"><h2>Leaflet JS + GeoServer WMS</h2></div>
 <script type="text/javascript">

 var crs = 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
 ]});

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

 var OS50K = L.tileLayer.wms("http://localhost:8080/geoserver/GISLIVE/ows", {
 layers: 'GISLIVE:OS50K',
 format: 'image/png',
 transparent: true,
 continuousWorld: true,
 attribution: "&copy; Crown Copyright and database right 2013."
 }); 

 var OS25K = L.tileLayer.wms("http://localhost:8080/geoserver/GISLIVE/ows", {
 layers: 'GISLIVE:OS25K',
 format: 'image/png',
 transparent: true,
 continuousWorld: true,
 attribution: "&copy; Crown Copyright and database right 2013."
 }); 

 var baseMaps = {
 "OS50K": OS50K,
 "OS25K": OS25K
 };

 L.control.layers(baseMaps).addTo(map);
 map.addLayer(OS50K, OS25K);
 map.setView([56.647675, -2.888002], 8);
 L.control.scale().addTo(map);
 </script>
 </body>
</html>

4 thoughts on “LeafletJS GeoServer WMS EPSG:27700”

  1. I think your projection is not quite right, and will lead to a ca 200m offset WSW of external data from correct EPSG:27700. Try changing the projection definition to:

    +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

  2. I think the CRS definition is not quite right, and could lead to displacement of ca 200m. Try replacing the DATUM declaration with a TOWGS84 parameter:

    +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

  3. Yeah, you’re probably right. Thanks for the pointer. I’ll check it and update it. I hacked that together very quickly once upon a time without really thinking too hard about it…

Leave a Reply

Your email address will not be published. Required fields are marked *