This repository has been archived by the owner on Jan 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
leaflet-wmts-epsg27700.html
40 lines (33 loc) · 1.71 KB
/
leaflet-wmts-epsg27700.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<title>OS Maps API | Leaflet | WMTS | EPSG:27700</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
<script>
var apiKey = 'INSERT_API_KEY_HERE';
var copyrightStatement = '© Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey.';
var crs = new L.Proj.CRS('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs', {
resolutions: [ 896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75, 0.875, 0.4375, 0.21875, 0.109375 ],
origin: [ -238375.0, 1376256.0 ]
});
var map = new L.Map('map', { crs: crs }).setView([ 52.567, -1.485 ], 3);
L.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?key=' + apiKey + '&height=256&width=256&tilematrixSet=EPSG:27700&version=1.0.0&style=&layer=Outdoor 27700&SERVICE=WMTS&REQUEST=GetTile&format=image/png&TileMatrix=EPSG:27700:{z}&TileRow={y}&TileCol={x}', {
maxZoom: crs.options.resolutions.length-1,
minZoom: 0,
attribution: copyrightStatement
}).addTo(map);
</script>
</body>
</html>