Introduction

The following post presents an implementation of Open Space from Ordnance Survey with the ArcGIS Server JavaScript API.  In the tutorial, I will explain how to create a custom tile layer and extending the esri.layers.TiledMapServiceLayer. This tutorial is inspired from the following ESRI How-to: http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples/layers_custom_tiled.html.

A full example is available at the following location, click on the image.

Open Space & ESRI ArcGIS Server JavaScipt

Open Space & ESRI ArcGIS Server JavaScipt

Background

Ordnance survey has released their Web Mapping API, Open Space for quite a while, . This provides a feed to the various OS mapping layer, including: 1:50K, 1:10K, mini-scale and street view.

Before progressing further with this tutorial, you will need to register with OS to acquire a Key: .

Although Open Space can easily be integrated with the like of Open Layer, the integration with ESRI ArcGIS Server API (JavaScript, Flex, etc) can presents some major advantages:

  • Tighter integration with back-end geo-processing services
  • Scalable framework with the use of DOJO, when using the JavaScript API.
  • Overlay data directly from your geo-database (ArcSDE, Oracle Spatial) using ArcGIS Server.

Thanks to Fiddler (http://www.fiddler2.com/fiddler2/), a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet, it became very quickly visible that Open Space tiling is actually composed by a number of calls to a WMS: http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fopenspace.ordnancesurvey.co.uk%2Fopenspace%2Fsupport.html&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=500&SRS=EPSG%3A27700&BBOX=700000,0,800000,100000&WIDTH=200&HEIGHT=200

Ordnance Survey provides a number of layers, ranging from:  2500, 500,100, 50,25,10,5, 1; which relates to the following level of mapping. A range of Ordnance Survey raster products are displayed at each zoom level:

Ordnance survey has unfortunately made thing a bit more complex at the level of OS Street View. The tile size changes from 200*200 to 250*250.

Integration

In order to use Open Space mapping data with ArcGIS Server Tiled Map Service Layer, one must extend the esri.layers.TiledMapServiceLayer.

Firstly, one must declare the Origin of the tiles. Annoyingly, Open Space only accepts the British National Grid (EPSG 27700), and according to OS there is no plan to extend to Lat / long.  This means that the origin of the tile is different to the coordinates system.

{
“rows”: 200,
“cols”: 200,
“dpi”: 96,
“format”: “PNG32″,
“compressionQuality” : 0,
“origin”: {
“x”:0,
“y”: 1500000
},

Note that the rows and columns size will be fixed to 200 px, depsite the change of tile size at Street View level. The change of tile size will be handled by the scalling references.

After declaring coordinate system, it is now time to declare the zoom level, beraing in mind that the change of tile size.

“lods”: [{ "level": 2500, "scale": 500000, "resolution":2500 },

{ "level": 500, "scale":100000, "resolution": 500},

{ "level": 100, "scale": 20000, "resolution": 100 },

{ "level": 50, "scale": 10000, "resolution":50},

{"level": 25,"scale": 5000,"resolution": 25},

{"level": 10,"scale": 2000,"resolution": 10},

{"level": 5,"scale": 1000,"resolution":5},

{"level": 1,"scale": 250,

/* the resolution must be adjusted as OS tiles are at that level 250 *250 rather 200 *200*/

"resolution": 1.25

}]

Having declared the new “OpenSpace” tile layer, the last remaining operation is the implementation of the GettileUrl function.

 

getTileUrl: function(level, row, col) {

//Change the size of the. At the lowest level OS tile size differs.

if (level > 2) {

width = 200;

height = 200;}

else{

width = 250;

height = 250;

}

//Set the parameters for the OS WMS

var xmin = (map.__LOD.scale * col) + 0;

var ymin = 1500000 – map.__LOD.scale – (map.__LOD.scale * (row));

var xmax = xmin + map.__LOD.scale;

var ymax = ymin + map.__LOD.scale;

/*At level 1000 OS seems to be returning the wrong type of tile, See the folowing http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=6694613F8B469C97E0405F0AF160360A&URL=http%3A%2F%2Fopenspace.ordnancesurvey.co.uk%2Fopenspace%2Fsupport.html&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&LAYERS=500&SRS=EPSG%3A27700&BBOX=700000,0,800000,100000&WIDTH=200&HEIGHT=200*/

if ((xmax > 700000) && (level < 2500) )

{return “”;}

var Key = “795ACB371BF9802AE0405F0AF1607DC5″;

return “http://openspace.ordnancesurvey.co.uk/osmapapi/ts?FORMAT=image%2Fpng&KEY=”+ Key  +”&”+”VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&”+”LAYERS=”+ level +”&SRS=EPSG%3A27700&BBOX=”+ xmin +”,”+ ymin +”,”+ xmax +”,”+ ymax +”&WIDTH=” + width +”&HEIGHT=”+ height +”";

}

The new OpenSpace Tiel layer is now ready to be integrated with the map and any other ArcGIS Server layer.

layer1 = new OpenSpace();

map.addLayer(layer1);

layer2 = new esri.layers.ArcGISDynamicMapServiceLayer(“http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer”, {

opacity: 0.6

});

map.addLayer(layer2);

References

Example Source Code: http://www.geo-tag.info/OpenSpace/OpenSpaceLayer.zip

ESRI JavaScript API: http://resources.esri.com/arcgisserver/index.cfm?fa=JSAPIs