@@ -2,7 +2,7 @@ window.map_marker = (map, options = {}) -> |
||
2 | 2 |
pos = new google.maps.LatLng(options.lat, options.lng) |
3 | 3 |
|
4 | 4 |
if options.radius > 0 |
5 |
- new google.maps.Circle |
|
5 |
+ marker = new google.maps.Circle |
|
6 | 6 |
map: map |
7 | 7 |
strokeColor: '#FF0000' |
8 | 8 |
strokeOpacity: 0.8 |
@@ -11,11 +11,13 @@ window.map_marker = (map, options = {}) -> |
||
11 | 11 |
fillOpacity: 0.35 |
12 | 12 |
center: pos |
13 | 13 |
radius: options.radius |
14 |
+ return marker |
|
14 | 15 |
else |
15 |
- new google.maps.Marker |
|
16 |
+ marker = new google.maps.Marker |
|
16 | 17 |
map: map |
17 | 18 |
position: pos |
18 | 19 |
title: 'Recorded Location' |
20 |
+ return marker |
|
19 | 21 |
|
20 | 22 |
if options.course |
21 | 23 |
p1 = new LatLon(pos.lat(), pos.lng()) |
@@ -30,7 +32,7 @@ window.map_marker = (map, options = {}) -> |
||
30 | 32 |
lineSymbol = |
31 | 33 |
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW |
32 | 34 |
|
33 |
- new google.maps.Polyline |
|
35 |
+ arrow = new google.maps.Polyline |
|
34 | 36 |
map: map |
35 | 37 |
path: lineCoordinates |
36 | 38 |
icons: [ |
@@ -39,3 +41,5 @@ window.map_marker = (map, options = {}) -> |
||
39 | 41 |
offset: '100%' |
40 | 42 |
} |
41 | 43 |
] |
44 |
+ |
|
45 |
+ return arrow |
@@ -17,9 +17,41 @@ |
||
17 | 17 |
}; |
18 | 18 |
|
19 | 19 |
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); |
20 |
+ var circles = []; |
|
21 |
+ var points = []; |
|
20 | 22 |
<% events.each do |event| %> |
21 |
- map_marker(map, <%= Utils.jsonify(event.location) %>); |
|
23 |
+ var loc = <%= Utils.jsonify(event.location) %>; |
|
24 |
+ if (loc.radius > 1) { |
|
25 |
+ circles.push(map_marker(map, loc)); |
|
26 |
+ } |
|
27 |
+ delete loc.radius; |
|
28 |
+ points.push(map_marker(map, loc)); |
|
22 | 29 |
<% end %> |
30 |
+ |
|
31 |
+ function toggleAccuracy(group, map) { |
|
32 |
+ for (var i = 0; i < group.length; i++) { |
|
33 |
+ group[i].setMap(map); |
|
34 |
+ } |
|
35 |
+ } |
|
36 |
+ |
|
37 |
+ toggleAccuracy(circles, null); |
|
38 |
+ |
|
39 |
+ $(document).ready(function() { |
|
40 |
+ $("input#toggle").on("click", function() { |
|
41 |
+ if($(this).is(":checked")){ |
|
42 |
+ toggleAccuracy(circles, map); |
|
43 |
+ toggleAccuracy(points, null); |
|
44 |
+ } |
|
45 |
+ else { |
|
46 |
+ toggleAccuracy(circles, null); |
|
47 |
+ toggleAccuracy(points, map); |
|
48 |
+ } |
|
49 |
+ }); |
|
50 |
+ if(circles.length > 0){ |
|
51 |
+ $(".toggle-accuracy").removeClass("hidden"); |
|
52 |
+ } |
|
53 |
+ }); |
|
54 |
+ |
|
23 | 55 |
</script> |
24 | 56 |
<% else %> |
25 | 57 |
<p> |
@@ -27,6 +59,13 @@ |
||
27 | 59 |
</p> |
28 | 60 |
<% end %> |
29 | 61 |
|
62 |
+<div class="hidden toggle-accuracy checkbox"> |
|
63 |
+ <label> |
|
64 |
+ <input id="toggle" type="checkbox" value=""> |
|
65 |
+ Show accuracy of locations |
|
66 |
+ </label> |
|
67 |
+</div> |
|
68 |
+ |
|
30 | 69 |
<h3>POST URL</h3> |
31 | 70 |
|
32 | 71 |
<p> |
@@ -36,3 +75,4 @@ |
||
36 | 75 |
<li><code class="selectable-text"><%= web_requests_url(user_id: @agent.user_id, agent_id: @agent.id, secret: @agent.options['secret']) %></code></li> |
37 | 76 |
</ul> |
38 | 77 |
</p> |
78 |
+<p>The data can also include <code>radius</code>, <code>speed</code>, and <code>course</code> values.</p> |