-
Notifications
You must be signed in to change notification settings - Fork 1
/
openlayers.html
61 lines (54 loc) · 2.1 KB
/
openlayers.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>OS Maps API | OpenLayers | ZXY | 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/openlayers/4.6.5/ol.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/openlayers/4.6.5/ol.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script>
proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");
var apiKey = 'PNHuZrYMBTEJTtVziOZOivmrMbBrOzhi';
var copyrightStatement = '© Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey.';
var tilegrid = new ol.tilegrid.TileGrid({
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 ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/EPSG:27700/Outdoor 27700/{z}/{x}/{y}.png?key=PNHuZrYMBTEJTtVziOZOivmrMbBrOzhi' + apiKey,
projection: 'EPSG:27700',
tileGrid: tilegrid,
attributions: new ol.Attribution({
html: copyrightStatement
})
})
})
],
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
target: 'map',
view: new ol.View({
projection: 'EPSG:27700',
center: [ 435000, 296700 ],
minZoom: 7,
maxZoom: 18,
zoom: 10
})
});
</script>
</body>
</html>