-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome1.html
105 lines (65 loc) · 3.02 KB
/
home1.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<link href="http://104.237.255.199:18003/static/css/leaflet.usermarker.css" rel="stylesheet">
<script src='leaflet/leaflet.usermarker.js'></script>
<script src="leaflet/js/leaflet.js"></script>
<script src="leaflet/leaflet.usermarker.js"></script>
<script src='leaflet/Leaflet.Marker.SlideTo.js'></script>
<script src="leaflet/js/leaflet-slider.js" type="text/javascript"></script>
<link rel="stylesheet" href="leaflet/css/leaflet-slider.css">
<script type="text/javascript">
</script>
</head>
<body>
<div id="live-map" style="height: 500px;"></div>
</body>
<script type="application/javascript">
var map = L.map('live-map', {
crs: L.CRS.Simple,
minZoom: -100,
// maxZoom: 4
});
map.on('click', function (e) {
console.log(e.latlng.lat + "," + e.latlng.lng);
var retVar = e.latlng.lat + "," + e.latlng.lng;
window.postMessage(retVar);
marker.slideTo([ e.latlng.lat , e.latlng.lng], {
duration: 500,
keepAtCenter: false
});
})
var marker = L.userMarker([0,0], {pulsing: true, accuracy: 300, smallIcon: true});
marker.addTo(map);
var bounds = [[-1700, -1800], [1700, 1800]]; // var bounds = [[-400, -300], [400, 300]];
var image = L.imageOverlay('./leaflet/Map-min.png', bounds).addTo(map);
map.setView([0, 0], -2);
var pattern = /([\d.-]*)[\s]*,[\s]*([\d.-]*)/;
// L.userMarker([0,0], {
// // pulsing: true,
// // accuracy: 200,
// title: 'key',
// smallIcon: true
// }).addTo(map).bindPopup("You're here !")
// $.getJSON("/locations?group={{ .Group }}", function (data) {
// var items = [];
// $.each(data.locations, function (key, val) {
// let match = pattern.exec(key);
// if (match) {
// items.push("<tr><td>" + match[1] + "</td><td>" + match[2] + "</td><td>" + val.accuracy + "</td><td>" + val.count + "</td></tr>");
// markers[key] = L.userMarker([match[1], match[2]], {
// // pulsing: true,
// // accuracy: 200,
// title: key,
// smallIcon: true
// }).bindPopup("<b>x = " + match[1] + "</b><br><b>y = " + match[2] + "</b>").addTo(map);
// } else {
// items.push("<tr><td colspan='2' class='text-center'>" + key + "</td><td>" + val.accuracy + "</td><td>" + val.count + "</td></tr>");
// }
// });
// });
</script>
</html>