/
index.html
159 lines (136 loc) · 6.08 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>geolocation-simulator.js: basic demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Helvetica, sans-serif;
text-align: center;
}
#map {
height: 360px;
margin: 0 auto;
max-width: 720px;
width: 100%;
}
</style>
</head>
<body>
<h2><a href='https://github.com/russellgoldenberg/geolocation-simulator'>geolocation-simulator.js</a></h2>
<h4>Basic Demo: A drive around Boston Common</h4>
<div class='output'></div>
<div id='map'></div>
<script src='../geolocation-simulator.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type='text/javascript'>
(function() {
//include sample data
var _pathData = [
{latitude: 42.352376, longitude: -71.064548},
{latitude: 42.353454, longitude: -71.064184},
{latitude: 42.354707, longitude: -71.063647},
{latitude: 42.355785, longitude: -71.062768},
{latitude: 42.356483, longitude: -71.062016},
{latitude: 42.357069, longitude: -71.062660},
{latitude: 42.357672, longitude: -71.063261},
{latitude: 42.357164, longitude: -71.064978},
{latitude: 42.356768, longitude: -71.066844},
{latitude: 42.356213, longitude: -71.069334},
{latitude: 42.355832, longitude: -71.070921},
{latitude: 42.355452, longitude: -71.072509},
{latitude: 42.353517, longitude: -71.071479},
{latitude: 42.351947, longitude: -71.070685},
{latitude: 42.352566, longitude: -71.067595},
{latitude: 42.352344, longitude: -71.064591}
];
//the geolocation simulator
var _simulator;
//for the map
var _map,
_marker;
//some stuff to monitor position
var _timer,
_timerInterval = 1000, //play with these to see more infrequent results (>= 1000)
_update = 0;
function init() {
// to see the results visually
makeMap();
//create the simulator, pass pathData array as parameter
_simulator = GeolocationSimulator({coords: _pathData});
//start it up (begin moving)
_simulator.start();
//start accessing the geolocation data, as you would
getPosition();
}
//tap into the geolocation api
function getPosition() {
//if geolocation is available, proceed
if ('geolocation' in navigator) {
var options = {
enableHighAccuracy: true,
timeout: Infinity,
maximumAge: 0
};
//get location
navigator.geolocation.getCurrentPosition(newPosition, geoError, options);
//lets keep getting it to see where this fella goes
_timer = setTimeout(getPosition, _timerInterval);
} else {
alert.log('what browser are you using??');
}
}
//handle the geolocation response obj
function newPosition(data) {
_update++;
$('.output').empty();
output('update ' + _update);
var coords = data.coords;
output('lat: ' + coords.latitude.toFixed(7));
output('lon: ' + coords.longitude.toFixed(7));
if(map) {
var newLatLng = new google.maps.LatLng(coords.latitude, coords.longitude);
map.panTo(newLatLng);
marker.setCenter(newLatLng);
}
}
//handle geolocation errors (there won't be any!)
function geoError(error) {
console.log(error);
}
//put some text on screen
function output(str) {
var p = $('<p>' + str + '</p>')
$('.output').append(p);
}
function makeMap() {
var coords = new google.maps.LatLng(_pathData[0].latitude, _pathData[0].longitude);
var myOptions = {
zoom: 15,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var opts = {
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.5,
map: map,
center: coords,
radius: 40
};
// Add the circle for this city to the map.
marker = new google.maps.Circle(opts);
}
//boot it up
init();
})();
</script>
</body>
</html>