Using Our Tile Server with Leaflet

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

Then to extend Leaflet (v1.0.3 or later) to allow access to our tile server you need to include Proj4js and Proj4Leaflet to handle the change in projection and finally our own extension https://tiles.the-hug.net/leaflet/hug-leaflet.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:

map = new L.Map('map', { zoom: 7, crs: L.Hug.CRS }); hugLayer = L.Hug.tilelayer(hugKey, {osUrl: '//tiles.the-hug.net/geoserver/waymaps'}); map.addLayer(hugLayer);

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. 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.