-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
86 lines (75 loc) · 2.81 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo - leaflet-gps-tracker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./gps-control.css" />
<script src="./GPSControl.js"></script>
</head>
<body>
<h1>demo - leaflet-gps-tracker</h1>
<h2>Full location and tracking functionality</h2>
<div id="map"></div>
<div id="msg"></div>
<h2>Only location, no active tracking</h2>
<div id="map2"></div>
<div id="msg2"></div>
<script>
var msg = document.getElementById('msg');
var map = L.map('map');
map.setZoom(16);
new L.TileLayer('https://koumoul.com/s/tileserver/styles/klokantech-basic/{z}/{x}/{y}.png', {
minZoom: 5,
maxZoom: 20,
attribution: '<a href="https://koumoul.com">© Koumoul</a> | <a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a>'
}).addTo(map);
new GPSControl({
track: true,
activeCallback: active => {
msg.innerHTML += 'GPS tracking is active ? ' + active + '<br/>';
},
successCallback: latlng => {
msg.innerHTML += 'GPS tracking detected a position change : ' + latlng + '<br/>';
map.setView(latlng);
},
errorCallback: error => {
msg.innerHTML += 'GPS tracking failed : ' + error.message + '<br/>';
}
}).addTo(map);
var msg2 = document.getElementById('msg2');
var map2 = L.map('map2');
map2.setZoom(16);
map2.setView([47, 3]);
new L.TileLayer('https://koumoul.com/s/tileserver/styles/klokantech-basic/{z}/{x}/{y}.png', {
minZoom: 5,
maxZoom: 20,
attribution: '<a href="https://koumoul.com">© Koumoul</a> | <a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a>'
}).addTo(map2);
var gpsControl = new GPSControl({
track: false,
active: false,
successCallback: latlng => {
msg2.innerHTML += 'GPS locating : ' + latlng + '<br/>';
map2.setView(latlng);
},
errorCallback: error => {
msg2.innerHTML += 'GPS locating failed : ' + error.message + '<br/>';
}
}).addTo(map2);
gpsControl.updateActive(true);
</script>
<style>
html, body {
width: 100%;
height: 100%;
}
.leaflet-container {
width: 100%;
height: 200px;
}
</style>
</body>
</html>