9 changed files with 177 additions and 5 deletions
Unified View
Diff Options
-
+4 -2compass/app/Http/Controllers/Controller.php
-
+23 -0compass/public/assets/map.css
-
+112 -0compass/public/assets/map.js
-
+0 -0compass/public/assets/script.js
-
+4 -1compass/public/assets/styles.css
-
+22 -0compass/resources/views/layouts/map.blade.php
-
+0 -1compass/resources/views/layouts/master.blade.php
-
+11 -0compass/resources/views/map.blade.php
-
+1 -1compass/resources/views/partials/logged-in.blade.php
+ 4
- 2
compass/app/Http/Controllers/Controller.php
View File
+ 23
- 0
compass/public/assets/map.css
View File
| @ -0,0 +1,23 @@ | |||||
| html, body, #map { | |||||
| height: 100%; | |||||
| } | |||||
| table.calendar { | |||||
| width: 100%; | |||||
| } | |||||
| .calendar th, .calendar td { | |||||
| text-align: center; | |||||
| width: 14%; | |||||
| } | |||||
| .calendar td a { | |||||
| display: block; | |||||
| text-decoration: none; | |||||
| color: black; | |||||
| } | |||||
| .calendar td a:hover, .calendar td a.selected:hover { | |||||
| background: #999; | |||||
| color: white; | |||||
| } | |||||
| .calendar td a.selected { | |||||
| background: #6699ff; | |||||
| } | |||||
+ 112
- 0
compass/public/assets/map.js
View File
| @ -0,0 +1,112 @@ | |||||
| var map = L.map('map', { zoomControl: false }).setView([45.516, -122.660], 14, null, null, 24); | |||||
| var layer = L.esri.basemapLayer("Topographic"); | |||||
| layer.maxZoom = 24; | |||||
| layer.maxNativeZoom = 24; | |||||
| layer.addTo(map); | |||||
| new L.Control.Zoom({ position: 'bottomleft' }).addTo(map); | |||||
| var geojsonLineOptions = { | |||||
| color: "#0033ff", | |||||
| weight: 4, | |||||
| opacity: 0.5 | |||||
| }; | |||||
| var visible_layers = []; | |||||
| var visible_data = []; | |||||
| var animatedMarker; | |||||
| var timers = []; | |||||
| function resetAnimation() { | |||||
| if(animatedMarker) { | |||||
| map.removeLayer(animatedMarker); | |||||
| } | |||||
| if(timers.length > 0) { | |||||
| for(var i in timers) { | |||||
| clearTimeout(timers[i]); | |||||
| } | |||||
| } | |||||
| } | |||||
| jQuery(function($){ | |||||
| $('.calendar a').click(function(evt){ | |||||
| var append = evt.altKey; | |||||
| if(!append) { | |||||
| $('.calendar a').removeClass('selected'); | |||||
| if(visible_layers.length) { | |||||
| for(var i in visible_layers) { | |||||
| map.removeLayer(visible_layers[i]); | |||||
| } | |||||
| } | |||||
| visible_layers = []; | |||||
| visible_data = []; | |||||
| } | |||||
| $(this).addClass('selected'); | |||||
| resetAnimation(); | |||||
| var db_name = $("#database").data("name"); | |||||
| var db_token = $("#database").data("token"); | |||||
| $.get("/api/query?map="+db_name+"&date="+$(this).data('date')+"&tz=America/Los_Angeles&token="+db_token, function(data){ | |||||
| visible_data.push(data); | |||||
| visible_layers.push(L.geoJson(data, { | |||||
| style: geojsonLineOptions | |||||
| }).addTo(map)); | |||||
| // If the new layer is completely outside the current view, zoom the map to fit all layers | |||||
| var layer = visible_layers[visible_layers.length - 1]; | |||||
| var is_outside = false; | |||||
| if(!map.getBounds().intersects(layer.getBounds())) { | |||||
| is_outside = true; | |||||
| } | |||||
| if(is_outside) { | |||||
| var full_bounds; | |||||
| for(var i in visible_layers) { | |||||
| layer = visible_layers[i]; | |||||
| if(full_bounds) { | |||||
| full_bounds.extend(layer.getBounds()); | |||||
| } else { | |||||
| full_bounds = layer.getBounds(); | |||||
| } | |||||
| } | |||||
| map.fitBounds(full_bounds); | |||||
| } | |||||
| }); | |||||
| return false; | |||||
| }); | |||||
| function pointFromGeoJSON(geo) { | |||||
| return L.latLng(geo[1], geo[0]) | |||||
| } | |||||
| $('#btn-play').click(function(){ | |||||
| console.log(visible_data[0].coordinates[0]); | |||||
| var point = pointFromGeoJSON(visible_data[0].coordinates[0]); | |||||
| resetAnimation(); | |||||
| animatedMarker = L.marker(point); | |||||
| animatedMarker.addTo(map); | |||||
| timers = []; | |||||
| var interval = 3; | |||||
| for(var i in visible_data[0].coordinates) { | |||||
| (function(i){ | |||||
| timers.push(setTimeout(function(){ | |||||
| point = pointFromGeoJSON(visible_data[0].coordinates[i]); | |||||
| animatedMarker.setLatLng(point); | |||||
| }, interval*i)); | |||||
| })(i); | |||||
| } | |||||
| }); | |||||
| }); | |||||
+ 0
- 0
compass/public/assets/script.js
View File
+ 4
- 1
compass/public/assets/styles.css
View File
+ 22
- 0
compass/resources/views/layouts/map.blade.php
View File
| @ -0,0 +1,22 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <title>Compass</title> | |||||
| <link rel="stylesheet" href="/assets/pure-min.css"> | |||||
| <link rel="stylesheet" href="/assets/font-awesome-4.4.0/css/font-awesome.min.css"> | |||||
| <link rel="stylesheet" href="/assets/styles.css"> | |||||
| <link rel="stylesheet" href="/assets/map.css"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
| <script src="/assets/jquery-1.11.3.min.js"></script> | |||||
| <link rel="stylesheet" href="/assets/leaflet-0.7.3/leaflet.css" /> | |||||
| </head> | |||||
| <body> | |||||
| @yield('content') | |||||
| <script src="/assets/leaflet-0.7.3/leaflet.js"></script> | |||||
| <script src="/assets/leaflet-0.7.3/esri-leaflet.js"></script> | |||||
| <script src="/assets/map.js"></script> | |||||
| </body> | |||||
| </html> | |||||
+ 0
- 1
compass/resources/views/layouts/master.blade.php
View File
+ 11
- 0
compass/resources/views/map.blade.php
View File
| @ -0,0 +1,11 @@ | |||||
| @extends('layouts.map') | |||||
| @section('content') | |||||
| <div class="corner-logo"><a href="/"><img src="/assets/compass.svg" height="40"/></a></div> | |||||
| <div id="map"></div> | |||||
| <div id="database" data-name="{{ $database->name }}" data-token="{{ $database->read_token }}"></div> | |||||
| @endsection | |||||