add map view with no data

8 years ago · 06be24b046
--- a/compass/app/Http/Controllers/Controller.php
+++ b/compass/app/Http/Controllers/Controller.php
@ -85,8 +85,10 @@ class Controller extends BaseController
      return redirect('/');




    return view('map', [
      'displayURL' => self::displayURL(),
      'database' => $db,
    ]);
  }

  public function settings(Request $request, $name) {
--- a/compass/public/assets/map.css
+++ b/compass/public/assets/map.css
@ -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;
 }
--- a/compass/public/assets/map.js
+++ b/compass/public/assets/map.js
@ -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);
    }

  });

 });
--- a/compass/public/assets/script.js
+++ b/compass/public/assets/script.js
--- a/compass/public/assets/styles.css
+++ b/compass/public/assets/styles.css
@ -21,16 +21,19 @@

 .corner-logo {
  position: absolute;
  z-index: 2000;
  top: 6px;
  left: 20px;
 }
 .logged-in {
  position: absolute;
  z-index: 2000;
  top: 6px;
  right: 20px;
  font-size: 80%;
  padding: 4px 16px;
 }
 .logged-in span {
 .logged-in .logout {
  margin-left: 16px;
 }

--- a/compass/resources/views/layouts/map.blade.php
+++ b/compass/resources/views/layouts/map.blade.php
@ -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>
--- a/compass/resources/views/layouts/master.blade.php
+++ b/compass/resources/views/layouts/master.blade.php
@ -13,6 +13,5 @@

    @yield('content')

    <script src="/assets/script.js"></script>
  </body>
 </html>
--- a/compass/resources/views/map.blade.php
+++ b/compass/resources/views/map.blade.php
@ -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
--- a/compass/resources/views/partials/logged-in.blade.php
+++ b/compass/resources/views/partials/logged-in.blade.php
@ -2,5 +2,5 @@

 <div class="logged-in">
  <span>{{ $displayURL }}</span>
  <span><a href="/auth/logout">sign out</a></span>
  <span class="logout"><a href="/auth/logout">sign out</a></span>
 </div>