Categories
OpenLayers

Spherical Mercator Maps in OpenLayers 2.8

Following on from my previous post, it is indeed much easier to put Spherical Mercator “Google-style” maps into OpenLayers, following the 2.8 release this week.

Spherical Mercator is a pseudo-spatial reference system (SRS) that takes some liberties with strict geographic accuracy, to provide a projection that requires the minimum of maths to compute – as this is done on the fly in the user’s browser for OpenLayers-based maps, this is important. (More details.) Maps using Spherical Mercator often use a very hierarchical tile structure – tiles being the generally 256×256 pixel square GIF or PNG images that form the basis of many of the mainstream online “slippy” maps.

Google Maps, OpenStreetMap and NPE-OSM are three sources of tiles using the Spherical Mercator SRS – which the geographers here at UCL have taken to calling WebMercator, and is also known as EPSG:900913 (the numbers representing Google in l33t-speak…) – it has now also been assigned an official EPSG number of 4375 3857. Yahoo and Microsoft Virtual Earth also use Spherical Mercator but a different naming structure for their tiles. The common CRS for all these raster images allows them to be swapped out easily on web maps, which the Mapstraction project aims to achieve.

OpenLayers has an excellent page about Spherical Mercator and has some simple examples to get such a map up and running.

Anyway, I have a large number of sets of tiles in Spherical Mercator, for a project to be launched in the (hopefully near) future. It is now this easy to set them up as layers in OpenLayers.

The map itself still needs to be set up with care:

var bounds = new OpenLayers.Bounds(-30, 40, 15, 70); 
//Fits comfortably around the UK.

map = new OpenLayers.Map ("map", 
{
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar(),
	new OpenLayers.Control.Attribution(),
	new OpenLayers.Control.MouseDefaults()
        ],
    maxExtent: bounds.clone().transform(
        new OpenLayers.Projection("EPSG:4326"), 
        new OpenLayers.Projection("EPSG:900913")), 
    numZoomLevels: 18,
    maxResolution: "auto",
    units: "m",
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
});

I’ve created a function to create each layer:

function getChoroplethLayer(name, attrib)
{
    return new OpenLayers.Layer.OSM("", 
        "/tiles/" + name + "/${z}/${x}/${y}.png", 
        {numZoomLevels: 14, transitionEffect: "resize", 
          attribution: attrib});
}

Then it’s just a case of running through the layers:

layer_choropleth_1 = getChoroplethLayer("choropleth_1", "X");
layer_choropleth_2 = getChoroplethLayer("choropleth_2", "X");

…and adding them to the map:

map.addLayers([layer_choropleth_1, layer_choropleth_2]);

Easy!

If you want OpenStreetMap’s default Mapnik map tiles themselves, then it’s even easier:

map.addLayer(
    new OpenLayers.Layer.OSM(null, null, 
        {transitionEffect: "resize"}));

3 replies on “Spherical Mercator Maps in OpenLayers 2.8”

Hem… actually I do have version 7.1 of the official database and it’s still 3785, there is no 3875 in the database.

INSERT INTO epsg_coordinatereferencesystem VALUES ( 3785,

‘Popular Visualisation CRS / Mercator’,

3544,

‘projected’,

4499,

Null,

4055,

19847,

Null,

Null,

‘Certain Web mapping and visualisation applications.’,

‘Uses spherical development. Relative to an ellipsoidal development errors of up to 800 metres in position and 0.7% in scale may arise. Some applications call this WGS 84. It is not a recognised geodetic system: see WGS 84 / World Mercator (CRS code 3395)’,

‘Microsoft.’,

‘OGP’,

‘2008-03-14’,

‘2008.114’,

1,

1 );

Leave a Reply

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

Solve this * Time limit is exhausted. Please reload CAPTCHA.