-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
44 lines (44 loc) · 2.55 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>UTM33 Map with Kartverket Tiles</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.5/proj4.min.js" integrity="sha512-Nwp3XMQKRvqr376bCa50Hs4X4z5zbsefo63QLa62poTx5o/GhYgjnToCoBZk7bxjeP2y84oEgKNUrpK2+2Czyg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js" integrity="sha512-GsAYl1wxzWW6azVpXkhyYfjMb2LbaOnlrqWMBdAk9xDcilinFvGMN+48Ajp/10u/9lcnh8YyS2CYNgung7ewHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div style="width: 100vw; height: 100vh" id="map"></div>
<!-- The Javascript code is licensed under the MIT license (c) Chris Petrich, 2021-2024. SPDX short identifier: MIT -->
<script type="text/javascript">
const crsStr = 'EPSG:25833';
const crsProj4 = '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs';
// The origin is the <TopLeftCorner> in the response to a GetCapabilities call to
// https://cache.kartverket.no/v1/wmts/1.0.0/WMTSCapabilities.xml
const crsTileOrg = [-2500000, 9045984];
// crsBaseResolution is the <ScaleDenominator> at zoom level 0 from the GetCapabilities call times 0.00028
const crsBaseResolution = 21664;
// according to the GetCapabilities info, zoom levels 0 through 18 are defined for EPSG:25833
const crsMaxZoom = 18;
const crs = new L.Proj.CRS(crsStr, crsProj4,
{ origin: crsTileOrg,
resolutions: Array.from(Array(crsMaxZoom+2),(e,zoomLevel) => crsBaseResolution/Math.pow(2,zoomLevel))
});
const map = L.map('map', {
center: [68.44, 17.4], // Narvik, Norway
zoom: 13,
crs: crs,
});
// ResourceURL for the selected ows:Tile ("topo") and TileMatrixSet ("utm33n")
const url = 'https://cache{s}.kartverket.no/v1/wmts/1.0.0/topo/default/utm33n/{z}/{y}/{x}.png';
const kartverketTiles = L.tileLayer(url, {
subdomains: ['', '2', '3', '4'],
maxZoom: crsMaxZoom,
attribution: '<a href="https://www.kartverket.no/">Kartverket</a>',
});
map.addLayer(kartverketTiles);
</script>
</body>
</html>