OS OpenSpace & ArcGIS Server JavaScript Integration
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
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:
- outline of Great Britain (zoom level 0);
- overview of Great Britain (zoom level 1-2);
- MiniScale® (zoom level 3-4);
- 1:250 000 Scale Colour Raster (zoom level 5-6);
- 1:50 000 Scale Colour Raster (zoom level 7-8); and
- OS Street View® (zoom level 9-10).
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
Twitter
LinkedIn
Facebook