-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
102 lines (92 loc) · 3.6 KB
/
example.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
<html>
<head>
<!-- Leaflet (v1.7.1) -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Sortable JS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<!-- OrderLayers control -->
<script src="src/leaflet.control.orderlayers.js"></script>
<link rel="stylesheet" href="src/css/leaflet.control.orderlayers.css" />
</head>
<body style="margin: 0">
<div id="map" style="height: 100vh; width: 100vw"></div>
</body>
<script>
(function (global) {
var MarkerMixin = {
_updateZIndex: function (offset) {
if (this._icon) {
this._icon.style.zIndex = this.options.zIndex
? this.options.zIndex + (this.options.zIndexOffset || 0)
: this._zIndex + offset;
}
},
setZIndex: function (forceZIndex) {
this.options.zIndex = forceZIndex ? forceZIndex : null;
this._updateZIndex(0);
},
};
if (global) global.include(MarkerMixin);
})(L.Marker);
</script>
<script>
var map = L.map("map").setView([4.598056, -74.075833], 13);
map.createPane("custom");
map.getPane("custom").style.zIndex = 800;
var baseLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 20,
}).addTo(map);
var baseLayers = {
"OpenStreet Map": baseLayer,
};
var overlayLayers = {
Cities: L.layerGroup([
L.marker([39.61, -105.02], { pane: "custom" }).bindPopup("Littleton, CO."),
L.marker([39.74, -104.99], { pane: "custom" }).bindPopup("Denver, CO."),
L.marker([39.73, -104.81], { pane: "custom" }).bindPopup("Aurora, CO."),
L.marker([39.77, -105.23], { pane: "custom" }).bindPopup("Golden, CO."),
]),
Restaurants: L.layerGroup([
L.marker([39.69, -104.85], { pane: "custom" }).bindPopup("A restaurant"),
L.marker([39.69, -105.12], { pane: "custom" }).bindPopup("A restaurant"),
]),
Satellite: L.tileLayer(
"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
{
maxZoom: 18,
attribution: '© <a href="http://www.esri.com/">Esri</a>',
pane: "custom",
}
),
Terrain: L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png", {
maxZoom: 18,
subdomains: "abcd",
attribution:
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
pane: "custom",
}),
};
var controls = L.control.orderlayers(baseLayers, overlayLayers, {
collapsed: false,
hideSingleBase: true,
dragging: true,
});
controls.addTo(map);
map.setView([39.73, -104.99], 11);
map.on("changelayers", () => console.log(map._layers));
</script>
</html>