rob-murray / os-leaflet

A Leafletjs TileLayer using Ordnance Survey OpenSpace web map service

os-leaflet

A Leafletjs TileLayer to display Ordnance Survey map data in your Leaflet map via the OS OpenSpace web map service.

This project is no way affiliated, nor supported or endorsed by Ordnance Survey. Please review Ordnance Survey OpenSpace service terms and conditions

Description

The os-leaflet project is a new L.TileLayer that can be used to easily get Ordnance Survey products into a Leaflet map, the Leaflet API can be used as normal.

Note: This layer uses an Ordnance Survey service that requires an API KEY - attempt to get one here.

Versions

Version 1.x supports Leaflet 1.0, we depend on other Leaflet 1.0 compatible libraries too.

If you are using Leaflet version < 1.0 then please use v0.2.1 of this library, or the 0.2-stable branch.

Contents

This repository contains the following sections:

1. OSOpenSpace.js - This contains the source code to the L.OSOpenSpace tilelayer.
2. Demo - A simple demo to show off the functionality.

Getting started

You can get hold of the code using npm and it should work fine with browserify. Or you can just manually import the layer.

Dependency management

With npm:

$ npm install os-leaflet --save

Bundle for the browser with whichever tool you're using, eg webpack, browserify.

Then just require the libary along with Leaflet in your app.

require('os-leaflet');
layer = L.OSOpenSpace.tilelayer(apiKey, apiUrl, ...options);

Manually

Download these dependencies and import into your project so that this OS OpenSpace layer can work.

• Leafletjs
• Proj4Leaflet requires Proj4js
• Proj4Leaflet

Note: The order of import should be as above; Leaflet, Proj4js, Proj4Leaflet and then OS OpenSpace layer - see the demo for an example.

Register for an API key

Ordnance Survey require an API key for use with their tile service, head over to OS OpenSpace to register before using on own website.

This layer uses the OS Openspace Free service and with the mapstack or products configured for the best experience available with the Free service.

Note: This will work locally an key; both localhost and file:/// hostname and protocol override the hostname check.

Displaying a map

The os-leaflet project extends Leaflet's L.TileLayer.WMS class and integrates easily with Leaflet.

To use the Layer in your map just get the EPSG:27700 L.Proj.CRS (Coordinate Reference System - how the earth is represented on Ordnance Survey maps) - via a factory method as below.

var osgbCrs = L.OSOpenSpace.CRS;

Create a L.Map as normal but specify the L.Proj.CRS from this library, see example below. The zoom levels available are essentially the layers provided by this OSOpenSpace layer so set these as below.

var map = new L.Map('map', {
  zoom: 6,
  crs: L.OSOpenSpace.CRS,
});

Finally, create a new L.TileLayer via the factory method L.OSOpenSpace.tilelayer and add to the map instance as normal. L.OSOpenSpace.tilelayer accepts the parameters below.

Argument	Required?	Description
apiKey	Yes	The Ordnance Survey OpenSpace API key for the website domain name to be used.
apiUrl	No	The URL of your site associated with the API key, as provided to OSOpenSpace
options	No	An object of layer options to pass to the tilelayer

var options = {};
var openspaceLayer = L.OSOpenSpace.tilelayer("<API Key>", "<API URL>", options);
map.addLayer(openspaceLayer);

Don't forget to set the map centre to somewhere in Great Britain too 😉

Example

Check out the demo for an example of how to use the layer.

Map products

This layer is currently hard-coded to work with only Ordnance Survey products that have 200x200 pixel tiles at the moment, the resolutions available are below. Other products have varying tile sizes which don't play well with Leaflet, it prefers a power-of-2 stack.

// OV0, OV1, OV2, MSR, MS, 250KR, 250K, 50KR, 50K, VMD
[2500, 1000, 500, 200, 100, 50, 25, 10, 5, 2.5]

For the full spec, see OS website.

Coordinates

Points can be added to the map in WGS84 reference system - if you have British National Grid coords then these should be converted.

L.polygon([
  [50.978633, -1.5740458],
  [51.068553, -1.5732215],
  [51.067945, -1.4305097],
  [50.978027, -1.4316098]
]).addTo(map).bindPopup('I am the SU32 10K square');

OS Logo

The Ordnance Survey logo in the bottom left can be removed, along with other attribution, by supplying the option { attributionControl: false } to the map constructor. It it enabled by default.

map = new L.Map('map', {
  zoom: 6,
  crs: L.OSOpenSpace.CRS,
  attributionControl: false
});

Issues

Please open an issue for any problems.

Contributions

Please use the GitHub pull-request mechanism to submit contributions.

License

This project is available for use under the MIT software license. See LICENSE

os-leaflet's Issues

add support for https://osdatahub.os.uk/ (has free tier)

miracles can happen!

well, maybe

https://osdatahub.os.uk/ now has a free tier

it just doesn't give an example of what the tile sets look like,
and if they include the 1:25 & 1:50 mapping

it supports osgb and web-mercator projections ... but not for all tile sets

Road | EPSG:27700 | Road_27700 | EPSG:27700
Road | EPSG:3857 | Road_3857 | EPSG:3857
Outdoor | EPSG:27700 | Outdoor_27700 | EPSG:27700
Outdoor | EPSG:3857 | Outdoor_3857 | EPSG:3857
Light | EPSG:27700 | Light_27700 | EPSG:27700
Light | EPSG:3857 | Light_3857 | EPSG:3857
Leisure | EPSG:27700 | Leisure_27700 | EPSG:27700

I've checked 'outdoor'. No footpaths.

The 'leisure' tile set is in osgb only, so i cant check it

This might help for use with leaflet
'https://osdatahubapi.os.uk/OSMapsAPI/wmts/v1?key=API_KEY&service=WMTS&request=GetTile&outputformat=image/png'
+ 'style=default&layer=Outdoor_3857&tileMatrixSet=EPSG:3857&tileMatrix={z}&tileRow={y}&tileCol={x}'

please could you see if its worth supporting...

andrew

TypeError: b is undefined with leaflet 1.0 Beta

When using leaflet 1.0 beta, the error "TypeError: b is undefined" is thrown from line 1516 in leaflet-src.js. This getProjectedBounds function expects to see a bounds object in (I think) the CRS.projection.

From the Leaflet 1.0 beta changelog for 'TileLayer API improvements':

"Improved tile wrapping and bounding logic in TileLayer to work transparently and completely depent [sic] on the CRS used; removed the need for TileLayer hacks when using custom projections."

If you need more info or testing etc, I'm happy to help, but this is likely slightly deeper than I've been able to understand so far...

Support multiple tile sizes

The web map service from Ordnance Survey returns various products or layers, the tile size in pixels of these can be 200px or 250px - at the moment this layer only supports the products that are at 200px.

We need to support the 250px tile sizes so that all products can be displayed.

Ordnance Survey product list: http://www.ordnancesurvey.co.uk/business-and-government/help-and-support/web-services/os-ondemand/configuring-wmts.html

OSGB36 Projection not working

The OSGB36 Proj4Leaflet implementation is not transforming from EPSG3857 to projected units correctly.

So, creating a LatLng in EPSG3857 creates a x,y in the wrong position, markers and overlays are not usable.

Add support for OS Map API

OpenSpace is no longer being developed. See https://www.ordnancesurvey.co.uk/forums/discussion/1010339/is-this-forum-active

It would be good to provide support for the replacement, called OS Map API.
See https://developer.ordnancesurvey.co.uk/os-maps-api-enterprise

Attribution

Update the Attribution displayed on each map view. Possibly a link to the OS product page? so long as they dont change it too often :)

Release of version 1.0

Leaflet 1.0 has been released (see https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md) so the way is clear to release os-leaflet 1.0.

Add host Url as parameter when creating tile layer

When applying for an OSOpenSpace API key it is associated with a project url. It appears from the example provided by OS that this should be included as the URL parameter in the WMS request as part of the authentication process. Currently this is hard-coded as URL: 'file:///' which is allowed for testing purposes. It would be good to allow this to be overriden by a user-supplied value.

upload to a cdn

upload to a cdn,
eg https://cdnjs.com/ (then 'request a lib')

thanks
andrew

Explanation of non-compliance with T&Cs

It would be helpful if you could explain in what way this does not comply with the OS OpenSpace terms and conditions to help assess whether it can be made to comply. I note that the OS OpenSpace have demonstrated how to use an earlier version of this in a compliant fashion.
https://www.ordnancesurvey.co.uk/forums/discussion/1001864/using-leafletjs-with-openspace

Refactor; move CRS implementation out of client code

Developers should not have to paste in the CRS implementation into their code; messy and error prone - move it out.

pseudo code example

var osMap = L.OS.Map.getOSMap(); //map with osgb36 projection

osMap.setView([x,y], 3);

https

Change the hardcoded OS tile url to '//openspace.ordnancesurvey.co.uk/osmapapi/ts', so it works with both http and https websites

minNativeZoom: 0 and minZoom: negative int results in Uncaught Error: Attempted to load an infinite number of tiles

When minNativeZoom: 0 and a negative minZoom value are set on the tile layer, zooming out results in Uncaught Error: Attempted to load an infinite number of tiles

To reproduce set options as follows in OSOpenSpace.js:

options = L.extend({
        crs: L.OSOpenSpace.CRS,
        tileSize: 200,
        minNativeZoom: 0,
        maxNativeZoom: 0,
        maxZoom: 0,
        minZoom: -2
}, options);`

Here are two minimal tests to show the issue.
os-leaflet
https://5amc.cf/test/os.html

open street maps with the same options passed scales the zoom level 0 tiles as expected.
https://5amc.cf/test/l.html

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		  minNativeZoom: 0,
		  maxNativeZoom: 0,
		  maxZoom: 0,
		  minZoom: -2
	}).addTo(map);

Any ideas what might be the cause? I'm happy to investigate but would appreciate pointers if you have any.

Options parameter ignored

The options parameter of the the factory method L.OSOpenSpace.tilelayer is ignored. It is passed as the third argument to L.TileLayer.WMS.prototype.initialize() which only takes 2 parameters.

Logo control not removed with layer

When switching between multiple layers, if the OS layer is removed, the logo control remains. If the OS layer is added back then another logo control is added. You end up with multiple logos.