You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

220 lines
5.8 KiB

  1. var map = L.map('map', { zoomControl: false }).setView([45.516, -122.660], 14, null, null, 24);
  2. var layer = L.esri.basemapLayer("Topographic");
  3. layer.maxZoom = 24;
  4. layer.maxNativeZoom = 24;
  5. layer.addTo(map);
  6. new L.Control.Zoom({ position: 'topleft' }).addTo(map);
  7. var geojsonLineOptions = {
  8. color: "#0033ff",
  9. weight: 4,
  10. opacity: 0.5
  11. };
  12. var startIcon = L.icon({
  13. iconUrl: '/assets/map-pin-start.png',
  14. iconSize: [18,28],
  15. iconAnchor: [9,28]
  16. });
  17. var endIcon = L.icon({
  18. iconUrl: '/assets/map-pin-end.png',
  19. iconSize: [18,28],
  20. iconAnchor: [9,28]
  21. });
  22. var visible_layers = [];
  23. var visible_data = [];
  24. var highlightedMarker;
  25. var animatedMarker;
  26. var startMarker;
  27. var endMarker;
  28. var timers = [];
  29. function pointFromGeoJSON(geo) {
  30. return L.latLng(geo[1], geo[0])
  31. }
  32. function resetAnimation() {
  33. if(animatedMarker) {
  34. map.removeLayer(animatedMarker);
  35. }
  36. if(timers.length > 0) {
  37. for(var i in timers) {
  38. clearTimeout(timers[i]);
  39. }
  40. }
  41. }
  42. function displayLineOnMap(response, options) {
  43. var data = response.linestring;
  44. if(data.coordinates && data.coordinates.length > 0) {
  45. // For any null coordinates, fill it in with the previous location
  46. var lastCoord = null;
  47. for(var i in data.coordinates) {
  48. if(data.coordinates[i] == null) {
  49. data.coordinates[i] = lastCoord;
  50. } else {
  51. lastCoord = data.coordinates[i];
  52. }
  53. }
  54. visible_data.push(data);
  55. visible_layers.push(L.geoJson(data, {
  56. style: geojsonLineOptions
  57. }).addTo(map));
  58. // Show the start/end pins if necessary
  59. if(options.pins) {
  60. startMarker = L.marker(pointFromGeoJSON(visible_data[0].coordinates[0]), {icon: startIcon});
  61. startMarker.addTo(map);
  62. endMarker = L.marker(pointFromGeoJSON(visible_data[0].coordinates[ visible_data[0].coordinates.length-1 ]), {icon: endIcon});
  63. endMarker.addTo(map);
  64. }
  65. // If the new layer is completely outside the current view, zoom the map to fit all layers
  66. var vlayer = visible_layers[visible_layers.length - 1];
  67. var is_outside = false;
  68. if(!map.getBounds().intersects(vlayer.getBounds())) {
  69. is_outside = true;
  70. }
  71. if(is_outside) {
  72. console.log('is outside');
  73. console.log(vlayer);
  74. var full_bounds;
  75. for(var i in visible_layers) {
  76. if(visible_layers[i].getBounds) {
  77. if(full_bounds) {
  78. full_bounds.extend(visible_layers[i].getBounds());
  79. } else {
  80. full_bounds = visible_layers[i].getBounds();
  81. }
  82. }
  83. }
  84. map.fitBounds(full_bounds);
  85. }
  86. showBatteryGraph(response);
  87. }
  88. }
  89. jQuery(function($){
  90. $('.calendar a').click(function(evt){
  91. var append = evt.altKey;
  92. if(!append) {
  93. removeVisibleLayers();
  94. }
  95. $(this).addClass('selected');
  96. resetAnimation();
  97. var db_name = $("#database").data("name");
  98. var db_token = $("#database").data("token");
  99. $.get("/api/query?format=linestring&date="+$(this).data('date')+"&tz="+$("#timezone").val()+"&token="+db_token, function(data){
  100. displayLineOnMap(data, {pins: false});
  101. });
  102. $("#range-from").val($(this).data('date')+' 00:00:00');
  103. $("#range-to").val($(this).data('date')+' 23:59:59');
  104. return false;
  105. });
  106. $('#range-go').click(function(evt) {
  107. var stateObj = {from: $('#range-from').val(), to: $('#range-to').val(), tz: $('#timezone').val()};
  108. var baseURL = "/map/" + $("#database").data('name');
  109. var historyURL = baseURL + "?from="+stateObj.from+"&to="+stateObj.to+"&tz="+stateObj.tz;
  110. window.history.pushState(stateObj, "GPS Log", historyURL)
  111. resetAnimation();
  112. removeVisibleLayers();
  113. $("#range-go").addClass("loading");
  114. var db_token = $("#database").data("token");
  115. $.get("/api/query?format=linestring&start="+$('#range-from').val()+"&end="+$('#range-to').val()+"&tz="+$("#timezone").val()+"&token="+db_token, function(data){
  116. $("#range-go").removeClass("loading");
  117. displayLineOnMap(data, {pins: true});
  118. });
  119. return false;
  120. })
  121. $('#btn-play').click(function(){
  122. console.log(visible_data[0].coordinates[0]);
  123. var point = pointFromGeoJSON(visible_data[0].coordinates[0]);
  124. resetAnimation();
  125. animatedMarker = L.marker(point);
  126. animatedMarker.addTo(map);
  127. timers = [];
  128. var interval = 3;
  129. for(var i in visible_data[0].coordinates) {
  130. (function(i){
  131. timers.push(setTimeout(function(){
  132. point = pointFromGeoJSON(visible_data[0].coordinates[i]);
  133. animatedMarker.setLatLng(point);
  134. }, interval*i));
  135. })(i);
  136. }
  137. });
  138. $("#trip-create").click(function(){
  139. $("#trip-create").addClass("loading");
  140. $.post('/api/trip-complete', {
  141. start: $("#range-from").val(),
  142. end: $("#range-to").val(),
  143. tz: $("#timezone").val(),
  144. mode: $("#trip-mode").val(),
  145. token: $("#database").data("write-token")
  146. }, function(response) {
  147. $("#trip-create").removeClass("loading");
  148. });
  149. });
  150. if($("#range-from").val() == "") {
  151. console.log("Autoselecting calendar day");
  152. $(".calendar a[data-date="+((new Date()).toISOString().slice(0,10))+"]").focus().click();
  153. } else {
  154. console.log("Loading range");
  155. $("#range-go").click();
  156. }
  157. });
  158. function removeVisibleLayers() {
  159. $('.calendar a').removeClass('selected');
  160. if(visible_layers.length) {
  161. for(var i in visible_layers) {
  162. map.removeLayer(visible_layers[i]);
  163. }
  164. }
  165. visible_layers = [];
  166. visible_data = [];
  167. if(startMarker) {
  168. map.removeLayer(startMarker);
  169. map.removeLayer(endMarker);
  170. }
  171. }
  172. function moveMarkerToPosition(point) {
  173. if(point.location) {
  174. var coord = pointFromGeoJSON(point.location);
  175. if(coord) {
  176. if(!highlightedMarker) {
  177. highlightedMarker = L.marker(coord).addTo(map);
  178. } else {
  179. highlightedMarker.setLatLng(coord);
  180. }
  181. }
  182. }
  183. }
  184. function pointFromGeoJSON(geo) {
  185. return L.latLng(geo[1], geo[0])
  186. }