{"id":19627321,"url":"https://github.com/rob-murray/os-leaflet","last_synced_at":"2025-07-19T18:08:57.027Z","repository":{"id":5322205,"uuid":"6505137","full_name":"rob-murray/os-leaflet","owner":"rob-murray","description":"A Leafletjs TileLayer using Ordnance Survey OpenSpace web map service","archived":false,"fork":false,"pushed_at":"2018-08-26T13:17:03.000Z","size":1819,"stargazers_count":24,"open_issues_count":5,"forks_count":8,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-01T11:29:35.228Z","etag":null,"topics":["leafletjs","os-leaflet","os-openspace"],"latest_commit_sha":null,"homepage":"http://rob-murray.github.io/os-leaflet/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"BlissRoms/platform_build","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rob-murray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-02T11:24:15.000Z","updated_at":"2023-04-16T11:36:28.000Z","dependencies_parsed_at":"2022-09-26T16:22:29.033Z","dependency_job_id":null,"html_url":"https://github.com/rob-murray/os-leaflet","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rob-murray/os-leaflet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-murray%2Fos-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-murray%2Fos-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-murray%2Fos-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-murray%2Fos-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rob-murray","download_url":"https://codeload.github.com/rob-murray/os-leaflet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-murray%2Fos-leaflet/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265982913,"owners_count":23859576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leafletjs","os-leaflet","os-openspace"],"created_at":"2024-11-11T11:49:10.927Z","updated_at":"2025-07-19T18:08:57.000Z","avatar_url":"https://github.com/rob-murray.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# os-leaflet\n\n[![npm version](https://badge.fury.io/js/os-leaflet.svg)](http://badge.fury.io/js/os-leaflet)\n\nA [Leafletjs](http://leafletjs.com/) TileLayer to display Ordnance Survey map data in your Leaflet map via the OS OpenSpace web map service.\n\nThis project is no way affiliated, nor supported or endorsed by Ordnance Survey. Please review Ordnance Survey OpenSpace service [terms and conditions](https://www.ordnancesurvey.co.uk/business-and-government/licensing/licences/os-openspace-developer-agreement.html)\n\n## Description\n\nThe **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.\n\n**Note:** This layer uses an Ordnance Survey service that requires an API KEY - attempt to get one [here](http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/index.html).\n\n![ScreenShot](https://github.com/rob-murray/os-leaflet/raw/master/screenshot.png \"Screenshot of demo app\")\n\n## Versions\n\nVersion 1.x supports [Leaflet 1.0](http://leafletjs.com/2016/09/27/leaflet-1.0-final.html), we depend on other Leaflet 1.0 compatible libraries too.\n\nIf you are using Leaflet version \u003c 1.0 then please use [v0.2.1](https://github.com/rob-murray/os-leaflet/releases/tag/v0.2.1) of this library, or the [0.2-stable branch](https://github.com/rob-murray/os-leaflet/tree/0.2-stable).\n\n\n## Contents\n\nThis repository contains the following sections:\n\n1. `OSOpenSpace.js` - This contains the source code to the `L.OSOpenSpace` tilelayer.\n2. [Demo](http://rob-murray.github.io/os-leaflet/) - A simple demo to show off the functionality.\n\n\n## Getting started\n\nYou can get hold of the code using npm and it should work fine with [browserify](http://browserify.org/). Or you can just manually import the layer.\n\n### Dependency management\n\nWith npm:\n\n```\n$ npm install os-leaflet --save\n```\n\nBundle for the browser with whichever tool you're using, eg [webpack](https://webpack.github.io/), [browserify](http://browserify.org/).\n\nThen just require the libary along with Leaflet in your app.\n\n```javascript\nrequire('os-leaflet');\nlayer = L.OSOpenSpace.tilelayer(apiKey, apiUrl, ...options);\n```\n\n### Manually\n\nDownload these dependencies and import into your project so that this OS OpenSpace layer can work.\n\n* [Leafletjs](http://leafletjs.com/)\n* Proj4Leaflet requires [Proj4js](http://trac.osgeo.org/proj4js/)\n* [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet)\n\n**Note:** The order of import should be as above; Leaflet, Proj4js, Proj4Leaflet and then OS OpenSpace layer - see the demo for an example.\n\n\n### Register for an API key\n\nOrdnance Survey require an API key for use with their tile service, head over to [OS OpenSpace](http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/index.html) to register before using on own website.\n\nThis layer uses the OS Openspace Free service and with the mapstack or products configured for the best experience available with the Free service.\n\n**Note:** This will work locally an key; both `localhost` and `file:///` hostname and protocol override the hostname check.\n\n\n### Displaying a map\n\nThe **os-leaflet** project extends Leaflet's `L.TileLayer.WMS` class and integrates easily with Leaflet.\n\nTo 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.\n\n\n```javascript\nvar osgbCrs = L.OSOpenSpace.CRS;\n```\n\nCreate 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.\n\n```javascript\nvar map = new L.Map('map', {\n  zoom: 6,\n  crs: L.OSOpenSpace.CRS,\n});\n```\n\nFinally, 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.\n\n| Argument | Required? | Description |\n|---|---|---|\n| `apiKey` | Yes | The Ordnance Survey [OpenSpace](http://www.ordnancesurvey.co.uk/business-and-government/products/os-openspace/api/index.html) API key for the website domain name to be used. |\n| `apiUrl` | No | The URL of your site associated with the API key, as provided to OSOpenSpace |\n| `options` | No | An object of layer options to pass to the tilelayer |\n\n\n```javascript\nvar options = {};\nvar openspaceLayer = L.OSOpenSpace.tilelayer(\"\u003cAPI Key\u003e\", \"\u003cAPI URL\u003e\", options);\nmap.addLayer(openspaceLayer);\n```\n\nDon't forget to set the map centre to somewhere in Great Britain too 😉\n\n### Example\n\nCheck [out the demo](http://rob-murray.github.io/os-leaflet/) for an example of how to use the layer.\n\n\n### Map products\n\nThis 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.\n\n```\n// OV0, OV1, OV2, MSR, MS, 250KR, 250K, 50KR, 50K, VMD\n[2500, 1000, 500, 200, 100, 50, 25, 10, 5, 2.5]\n```\n\nFor the full spec, see [OS website](http://www.ordnancesurvey.co.uk/business-and-government/help-and-support/web-services/os-ondemand/configuring-wmts.html).\n\n### Coordinates\n\nPoints can be added to the map in WGS84 reference system - if you have British National Grid coords then these should be converted.\n\n```javascript\nL.polygon([\n  [50.978633, -1.5740458],\n  [51.068553, -1.5732215],\n  [51.067945, -1.4305097],\n  [50.978027, -1.4316098]\n]).addTo(map).bindPopup('I am the SU32 10K square');\n```\n\n### OS Logo\n\nThe 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.\n\n```javascript\nmap = new L.Map('map', {\n  zoom: 6,\n  crs: L.OSOpenSpace.CRS,\n  attributionControl: false\n});\n```\n\n\n## Issues\n\nPlease open an issue for any problems.\n\n\n## Contributions\n\nPlease use the GitHub pull-request mechanism to submit contributions.\n\n\n## License\n\nThis project is available for use under the MIT software license. See LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-murray%2Fos-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frob-murray%2Fos-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-murray%2Fos-leaflet/lists"}