-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
103 lines (92 loc) · 2.54 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Leaflet Control Loader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="//unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" href="leaflet-loader.css" />
<style>
#map {
width:600px;
height:300px;
clear: both;
}
label {
float: left;
}
pre {
font-family: "Courier New";
font-size: .85em;
color: #333;
float: left;
clear: both;
padding: 10px;
margin: 10px 0;
background-color: #eee;
box-shadow: inset 2px 2px 4px #ccc;
}
#copy {
position:fixed;
z-index:1000;
right:150px;
top:-8px;
font-size:.85em;
padding:8px 8px 2px 8px;
background: #323b44;
border: 2px solid #737c85;
border-radius:.7em;
opacity: 0.9;
box-shadow:0 0 8px #5f7182;
color:#eee
}
#copy a {
color:#ccc;
text-decoration:none
}
#copy a:hover {
color:#fff
}
#ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
filter: alpha(opacity=80);
-khtml-opacity: .8;
-moz-opacity: .8;
opacity: .8;
}
</style>
<link rel="stylesheet" href="//unpkg.com/github-fork-ribbon-css@0.2.3/gh-fork-ribbon.css"></head>
<body>
<h3>Leaflet Control Loader</h3>
<p>Simple control to show a gif loader to the center of the map
<br />
<iframe src="https://ghbtns.com/github-btn.html?user=stefanocudini&repo=leaflet-loader&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
</p>
<label>Example:</label>
<pre>
var controlLoader = L.control.loader().addTo(map);
controlLoader.show();
...
controlLoader.hide();
</pre>
<div style="clear:both">move map to show the loader</div>
<div id="map"></div>
<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> • <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
<a href="https://github.com/stefanocudini/leaflet-loader" class="github-fork-ribbon" data-ribbon="Fork me on GitHub">Github</a>
<script src="//unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="leaflet-loader.js"></script>
<script>
var map = new L.Map('map', {zoom: 9, center: new L.latLng([42.575330,12.102411]) });
map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
var controlLoader = L.control.loader().addTo(map);
map.on('dragend',function() {
controlLoader.show();
setTimeout(function() {
controlLoader.hide();
},3000);
});
</script>
</body>
</html>