Using Our Tile Server with OpenLayers 2.0

Before you can use our tile server you will need to authorise the user's browser.

Then to extend the OpenLayers class OpenLayers.Layer.WMS to allow access to our tile server (and also the OS OpenSpace server - see below) you need to include the JavaScript file https://tiles.the-hug.net/OSLayer.js

N.B. this file is liable to change so please don't copy this to your own server and serve it directly.

Making our Maps your Base Layer

The essential code fragment is:

var baseLayer = new OpenLayers.Layer.OS('waymaps','','<your website URL>', { serverResolutions: [2500, 1000, 500, 200, 100, 50, 25, 10, 5, 2.5 ], osUrl: 'https://tiles.the-hug.net/geoserver/waymaps', attributionStr: '<a target="_blank" href="https://www.the-hug.co.uk/mapping/copyright.html">Copyright &copy; 2011-' + new Date().getFullYear() + '. All rights reserved.</a>' });

osMap.addLayer(baseLayer);

You can find a working example here written in PHP and you can view the source code for that example here.

You will notice that, as with OpenSpace, there is an attribution link shown at the bottom of the map which comes from the attributionStr option above. Both the wording and the target must be retained although you are free to use CSS to move or re-style it as you see fit, so long as it remains legible and visible. We've included a simple illustration of how you might choose to do that in our example.

Making OS OpenSpace your Base Layer

If you want to use your code with OS OpenSpace too then rather than having to switch to using openspace.js you can continue using OpenLayers.js as OSLayer.js can also make OS OpenSpace into your map layer thus:

var baseLayer = new OpenLayers.Layer.OS('openspace','<activation key>','<your website URL>', { serverResolutions: [2500, 1000, 500, 200, 100, 50, 25, 10, 5, 4, 2.5, 2, 1 ], osUrl: 'https://tiles.the-hug.net/geoserver/waymaps', attributionStr: '&copy; Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey. <a target="_blank" href="http://www.ordnancesurvey.co.uk/business-and-government/licensing/licences/os-openspace-developer-agreement.html">Terms of Use</a>' });

osMap.addLayer(baseLayer);

N.B. we provide this additional functionality free of charge. It doesn't form part of our contract with you.