Using Our Tile Server with OpenLayers 3.0

OpenLayers 3.0 offers some improvements over OpenLayers 2, not least better touch screen support (try rotating the map in our example on a phone or tablet using two fingers).

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

Then to extend the OpenLayers class ol.control.Control to allow access to our tile server you need to include the JavaScript file https://tiles.the-hug.net/ol3/hug-ol3.js and you will also need jQuery.

N.B. hug-ol3.js 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 hugOl3 = new HugOl3();

var map = new ol.Map({ layers: [hugOl3.getLayer()], logo: false, target: 'map', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }) });

You can find a working example here written in PHP and you can view the source code for that example here. Note that we don't currently have support for zoom levels on our extension so you will have to use resolutions (as illustrated in our example).

The mapping of zoom to resolution is best illustrated by this code fragment:

new resolutions = [2500,1000,500,200,100,50,25,10,5,2.5]; resolution = resolutions[zoom];

We hope to get zoom working directly soon.

You will notice that there is an attribution link shown at the bottom of the map. 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.