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.

147 lines
3.6 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 visible_layers = [];
  13. var visible_data = [];
  14. var highlightedMarker;
  15. var animatedMarker;
  16. var timers = [];
  17. function resetAnimation() {
  18. if(animatedMarker) {
  19. map.removeLayer(animatedMarker);
  20. }
  21. if(timers.length > 0) {
  22. for(var i in timers) {
  23. clearTimeout(timers[i]);
  24. }
  25. }
  26. }
  27. jQuery(function($){
  28. $('.calendar a').click(function(evt){
  29. var append = evt.altKey;
  30. if(!append) {
  31. $('.calendar a').removeClass('selected');
  32. if(visible_layers.length) {
  33. for(var i in visible_layers) {
  34. map.removeLayer(visible_layers[i]);
  35. }
  36. }
  37. visible_layers = [];
  38. visible_data = [];
  39. }
  40. $(this).addClass('selected');
  41. resetAnimation();
  42. var db_name = $("#database").data("name");
  43. var db_token = $("#database").data("token");
  44. $.get("/api/query?format=linestring&date="+$(this).data('date')+"&tz=America/Los_Angeles&token="+db_token, function(response){
  45. var data = response.linestring;
  46. if(data.coordinates && data.coordinates.length > 0) {
  47. // For any null coordinates, fill it in with the previous location
  48. var lastCoord = null;
  49. for(var i in data.coordinates) {
  50. if(data.coordinates[i] == null) {
  51. data.coordinates[i] = lastCoord;
  52. } else {
  53. lastCoord = data.coordinates[i];
  54. }
  55. }
  56. visible_data.push(data);
  57. visible_layers.push(L.geoJson(data, {
  58. style: geojsonLineOptions
  59. }).addTo(map));
  60. // If the new layer is completely outside the current view, zoom the map to fit all layers
  61. var vlayer = visible_layers[visible_layers.length - 1];
  62. var is_outside = false;
  63. if(!map.getBounds().intersects(vlayer.getBounds())) {
  64. is_outside = true;
  65. }
  66. if(is_outside) {
  67. console.log('is outside');
  68. console.log(vlayer);
  69. var full_bounds;
  70. for(var i in visible_layers) {
  71. if(visible_layers[i].getBounds) {
  72. if(full_bounds) {
  73. full_bounds.extend(visible_layers[i].getBounds());
  74. } else {
  75. full_bounds = visible_layers[i].getBounds();
  76. }
  77. }
  78. }
  79. map.fitBounds(full_bounds);
  80. }
  81. showBatteryGraph(response);
  82. }
  83. });
  84. return false;
  85. });
  86. $('#btn-play').click(function(){
  87. console.log(visible_data[0].coordinates[0]);
  88. var point = pointFromGeoJSON(visible_data[0].coordinates[0]);
  89. resetAnimation();
  90. animatedMarker = L.marker(point);
  91. animatedMarker.addTo(map);
  92. timers = [];
  93. var interval = 3;
  94. for(var i in visible_data[0].coordinates) {
  95. (function(i){
  96. timers.push(setTimeout(function(){
  97. point = pointFromGeoJSON(visible_data[0].coordinates[i]);
  98. animatedMarker.setLatLng(point);
  99. }, interval*i));
  100. })(i);
  101. }
  102. });
  103. $(".calendar a[data-date='"+((new Date()).toISOString().slice(0,10))+"']").focus().click();
  104. });
  105. function moveMarkerToPosition(point) {
  106. if(point.location) {
  107. var coord = pointFromGeoJSON(point.location);
  108. if(coord) {
  109. if(!highlightedMarker) {
  110. highlightedMarker = L.marker(coord).addTo(map);
  111. } else {
  112. highlightedMarker.setLatLng(coord);
  113. }
  114. }
  115. }
  116. }
  117. function pointFromGeoJSON(geo) {
  118. return L.latLng(geo[1], geo[0])
  119. }