-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
132 lines (119 loc) · 4.29 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet NonTiledLayer Example</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdn.skypack.dev/leaflet@v1.7.1/dist/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import { Map, LatLng, LatLngBounds, TileLayer, Control } from 'https://cdn.skypack.dev/leaflet@v1.7.1';
import NonTiledLayer from 'https://cdn.skypack.dev/leaflet.nontiledlayer@1.0.9';
import token from './token.js';
if(!token) {
alert('You need an xServer-internet token to display all layers!');
}
// initialize leaflet
const map = new Map('map', {
worldCopyJump: true,
zoomDelta: 0.5, // test for fractional zoom
zoomSnap: 0.25,
wheelPxPerZoomLevel: 50
//, crs: CRS.EPSG4326 // test for Plate Carree projection
});
// link to GitHub page at attribution
map.attributionControl.setPrefix('<a href="https://github.com/ptv-logistics/Leaflet.NonTiledLayer">Leaflet.NonTiledLayer<\/a>');
// center Karlsruhe - setting fractional zoom
map.setView(new LatLng(49.01, 8.4), 16.5);
// using the xserver-internet WMS adapter
const xMapWmsUrl = `https://api-test.cloud.ptvgroup.com/WMS/WMS?xtok=${token}`;
var xMapAttribution = '<a href="https://www.ptvgroup.com">© ' + new Date().getFullYear() + ' PTV Group, TomTom<\/a>';
// add (tiled) background layer
const background = new TileLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 0,
opacity: 1.0,
noWrap: false,
layers: 'xmap-gravelpit-bg',
format: 'image/png',
transparent: false,
attribution: xMapAttribution,
zIndex: 1
}).addTo(map);
// add (non-tiled) label layer. Insert at tile pane
const labels = new NonTiledLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 0,
opacity: 1.0,
layers: 'xmap-gravelpit-fg',
format: 'image/png',
transparent: true,
attribution: xMapAttribution,
pane: 'tilePane',
zIndex:4
}).addTo(map);
// add pois. Default - insert at overlayPane
const poi = new NonTiledLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 16,
zIndex: 5, // setting a zIndex enforces the layer ordering after adding/removing multiple layers
opacity: 1.0,
layers: 'xmap-poi',
format: 'image/png',
transparent: true,
attribution: xMapAttribution
}).addTo(map);
// add contours, on tile pane
const contour = new NonTiledLayer.WMS('https://ows.terrestris.de/osm/service', {
maxZoom: 19,
minZoom: 4,
zIndex: 2, // setting a zIndex enforces the layer ordering after adding/removing multiple layers
opacity: 1.0,
layers: 'SRTM30-Contour',
format: 'image/png',
transparent: true,
attribution: '© terrestris ' + new Date().getFullYear(),
pane: 'tilePane',
bounds: new LatLngBounds([-56.0, -180], [60.0, 180])
}).addTo(map);
// insert airmass layer, at tile pane between background and labels
const airmass = new NonTiledLayer.WMS("https://view.eumetsat.int/geoserver/wms", {
maxZoom: 8,
minZoom: 0,
layers: 'msg_fes:rgb_airmass',
transparent: true,
version: '1.3.0',
attribution: '© EUMETSAT ' + new Date().getFullYear(),
opacity: 0.75,
pane: 'tilePane',
format: 'image/png',
zIndex: 3,
bounds: new LatLngBounds([-77.0,-77.0], [77.0,77.0]),
detectRetina: true // double the requested image size
}).addTo(map);
// add layer selector
const overlays = {
'Background': background,
'Labels': labels,
'POI': poi,
'Contour Lines': contour,
'Air Mass': airmass
};
new Control.Layers({}, overlays, { autoZIndex: false }).addTo(map);
</script>
</body>
</html>