forked from robertleeplummerjr/Leaflet.glify
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (97 loc) · 3.2 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
<!doctype html>
<html>
<head>
<title>Many Points with leaflet WebGL</title>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: rgb(14, 21, 30);
}
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: #333;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="lnlt"></div>
<a href="https://github.com/robertleeplummerjr/Leaflet.glify">
<img
style="position: absolute; top: 0; right: 0; border: 0; z-index: 99999"
src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
</body>
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<script src="bower_components/leaflet/dist/leaflet.js"></script>
<script src="glify.js"></script>
<script>
var map = L.map('map')
.setView([50.00, 14.44], 7);
L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png")
//L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png")
.addTo(map);
wget(['86T.json', 'CZDistricts.json', 'rivers.json'], function(points, districts, rivers) {
L.glify.shapes({
map: map,
click: function (e, feature) {
L.popup()
.setLatLng(e.latlng)
.setContent("You clicked on " + feature.properties.NAZKR_ENG)
.openOn(map);
console.log(feature);
console.log(e);
},
data: JSON.parse(districts)
});
L.glify.lines({
map: map,
latitudeKey: 1,
longitudeKey: 0,
click: function (e, feature) {
L.popup()
.setLatLng(e.latlng)
.setContent("You clicked on " + feature.properties.name)
.openOn(map);
console.log(feature);
console.log(e);
},
data: JSON.parse(rivers)
});
L.glify.points({
map: map,
click: function (e, point, xy) {
//set up a standalone popup (use a popup as a layer)
L.popup()
.setLatLng(point)
.setContent("You clicked the point at longitude:" + point[L.glify.longitudeKey] + ', latitude:' + point[L.glify.latitudeKey])
.openOn(map);
console.log(point);
},
data: JSON.parse(points)
});
});
function wget(urls, fn) {
var results = [],
complete = 0,
total = urls.length;
urls.forEach(function(url, i) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function () {
if (request.status < 200 && request.status > 400) return;
results[i] = request.responseText;
complete++;
if (complete === total) fn.apply(null, results);
};
request.send();
});
}
</script>
</html>