allow toggling between circles and points in recent event map
stvnrlly
2 ha cambiato i file con 45 aggiunte e 4 eliminazioni
+ 7
- 3
app/assets/javascripts/map_marker.js.coffee
@@ -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 |
+ 38
- 1
app/views/agents/agent_views/user_location_agent/_show.html.erb
@@ -17,9 +17,38 @@ |
||
| 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 Visibility(group, map) {
|
|
| 32 |
+ for (var i = 0; i < group.length; i++) {
|
|
| 33 |
+ group[i].setMap(map); |
|
| 34 |
+ } |
|
| 35 |
+ } |
|
| 36 |
+ |
|
| 37 |
+ Visibility(circles, null); |
|
| 38 |
+ |
|
| 39 |
+ $(document).ready(function() {
|
|
| 40 |
+ $("input#toggle").on("click", function() {
|
|
| 41 |
+ if($(this).is(":checked")){
|
|
| 42 |
+ Visibility(circles, map); |
|
| 43 |
+ Visibility(points, null); |
|
| 44 |
+ } |
|
| 45 |
+ else if($(this).is(":not(:checked)")){
|
|
| 46 |
+ Visibility(circles, null); |
|
| 47 |
+ Visibility(points, map); |
|
| 48 |
+ } |
|
| 49 |
+ }); |
|
| 50 |
+ }); |
|
| 51 |
+ |
|
| 23 | 52 |
</script> |
| 24 | 53 |
<% else %> |
| 25 | 54 |
<p> |
@@ -27,6 +56,13 @@ |
||
| 27 | 56 |
</p> |
| 28 | 57 |
<% end %> |
| 29 | 58 |
|
| 59 |
+<div class="checkbox"> |
|
| 60 |
+ <label> |
|
| 61 |
+ <input id="toggle" type="checkbox" value=""> |
|
| 62 |
+ Show accuracy of locations |
|
| 63 |
+ </label> |
|
| 64 |
+</div> |
|
| 65 |
+ |
|
| 30 | 66 |
<h3>POST URL</h3> |
| 31 | 67 |
|
| 32 | 68 |
<p> |
@@ -36,3 +72,4 @@ |
||
| 36 | 72 |
<li><code class="selectable-text"><%= web_requests_url(user_id: @agent.user_id, agent_id: @agent.id, secret: @agent.options['secret']) %></code></li> |
| 37 | 73 |
</ul> |
| 38 | 74 |
</p> |
| 75 |
+<p>The data can also include <code>radius</code>, <code>speed</code>, and <code>course</code> values.</p> |