forked from ptv-logistics/Leaflet.NonTiledLayer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (107 loc) · 3.83 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<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="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src="./NonTiledLayer.js"></script>
<script src="./NonTiledLayer.WMS.js"></script>
<script>
// initialize leaflet
var map = new L.Map('map', {
// crs:L.CRS.EPSG4326
// zoomSnap: 0,
// zoomDelta: 0.5
});
// center Karlsruhe - setting fractional zoom
map.setView(new L.LatLng(49.01, 8.4), 15.5);
// using the xserver-internet WMS adapter
var xMapWmsUrl = 'http://api-test.cloud.ptvgroup.com/WMS/WMS?xtok=145080320094443';
var xMapAttribution = '<a href="http://www.ptvgroup.com">PTV<\/a>, TOMTOM';
// add (tiled) background layer
var background = new L.TileLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 0,
opacity: 1.0,
noWrap: false,
layers: 'xmap-gravelpit-bg',
format: 'image/png',
transparent: false,
attribution: xMapAttribution
}).addTo(map);
// add (non-tiled) label layer. Insert at tile pane
var labels = new L.NonTiledLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 0,
opacity: 1.0,
layers: 'xmap-gravelpit-fg',
format: 'image/png',
transparent: true,
attribution: xMapAttribution,
pane: 'tilePane',
zIndex: 100
}).addTo(map);
// add pois. Default - insert at overlayPane
var poi = new L.NonTiledLayer.WMS(xMapWmsUrl, {
maxZoom: 19,
minZoom: 15,
zIndex: 1, // 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 bus stops. Default - insert at overlayPane
var busStops = new L.NonTiledLayer.WMS('http://ows.terrestris.de/osm-haltestellen', {
maxZoom: 19,
minZoom: 14,
zIndex: 2, // setting a zIndex enforces the layer ordering after adding/removing multiple layers
opacity: 1.0,
layers: 'OSM-Bushaltestellen',
format: 'image/png',
transparent: true,
attribution: 'terrestris'
}).addTo(map);
// insert airmass layer
var airmass = new L.NonTiledLayer.WMS("http://eumetview.eumetsat.int/geoserv/wms", {
maxZoom: 8,
minZoom: 0,
layers: 'meteosat:airmass',
transparent: true,
version: '1.3.0',
attribution: "EUMETSAT 2015",
opacity: 0.75,
pane: 'tilePane',
format: 'image/png',
zIndex: 50,
bounds: L.latLngBounds([-90.0019140328881, 71.0577423098384], [89.9725637543488, -70.9390024925306])
}).addTo(map);
// add layer selector
var overlays = {
'Background': background,
'Labels': labels,
'POI': poi,
'Bus Stops': busStops,
'Air Mass': airmass
};
L.control.layers({}, overlays).addTo(map);
</script>
</body>
</html>