better maps, some bugs

archerimpact · Oct 4, 2018 · e7b8274 · e7b8274
1 parent 79541a7
commit e7b8274
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/js/charts.js b/js/charts.js
@@ -97,7 +97,7 @@ function addMap(id, markers) {
     elem.innerHTML = "Sorry, no images in this project have location info."
   } else {
     elem.innerHTML = "<button class='btn btn-default btn-circle btn-xl' style='margin-top: calc(25% - 10px);' data-markers='" + JSON.stringify(markers) +"'>Load Map</button>"
-    elem.onclick = actuallyAddMap
+    elem.children[0].onclick = actuallyAddMap
   }
 }
 
@@ -118,7 +118,23 @@ function actuallyAddMap(event) {
   		var marker = new google.maps.Marker({
   	    position: markers[ind],
   	    map: _map,
+        title: markers[ind]['title']
   	  });
+      if ('project' in markers[ind]) {
+        var content = '<strong>Name: </strong>' + withspaces(markers[ind]['title']) + '<br>' + '<strong>Project: </strong>' + markers[ind]['project']
+      } else {
+        var content = '<div>' + markers[ind]['title'] + '</div>'
+      }
+      var infowindow = new google.maps.InfoWindow({
+          content: content,
+        });
+      google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
+        return function() {
+          infowindow.setContent(content);
+          infowindow.open(_map,marker);
+        };
+      })(marker,content,infowindow));
+
       loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
       bounds.extend(loc);
     }
@@ -221,7 +237,5 @@ function processDates(old_dates, old_counts, gmt, granularity) {
       new_counts.push(old_counts[i])
     }
   }
-  console.log(new_dates)
-  console.log(new_counts)
   return {'dates': new_dates, 'counts': new_counts}
 }
diff --git a/js/database.js b/js/database.js
@@ -656,7 +656,7 @@ class Database {
           _this.has_metadata_attr(['GPSLatitude', 'GPSLongitude'], function(attr_exists) {
             if (attr_exists) {
               var coords = [];
-              var stmt_str = "SELECT GPSLatitude, GPSLongitude FROM Images WHERE proj_name = ?"
+              var stmt_str = "SELECT img_name, GPSLatitude, GPSLongitude FROM Images WHERE proj_name = ?"
               stmt_str += _this.filter_stmt(filter_params)
               stmt_str += " AND GPSLatitude IS NOT NULL AND GPSLongitude IS NOT NULL"
               var stmt = db.prepare(stmt_str);
@@ -667,7 +667,7 @@ class Database {
                   return;
                 }
 
-                coords.push({'lat': JSON.parse(row['GPSLatitude']), 'lng': JSON.parse(row['GPSLongitude'])});
+                coords.push({'lat': JSON.parse(row['GPSLatitude']), 'lng': JSON.parse(row['GPSLongitude']), 'title': row['img_name']});
               }, function() {
                 callback(coords);
               });
@@ -810,15 +810,15 @@ class Database {
       _this.has_metadata_attr(['GPSLatitude', 'GPSLongitude'], function(attr_exists) {
         if (attr_exists) {
           var coords = [];
-          var stmt = db.prepare("SELECT GPSLatitude, GPSLongitude FROM Images WHERE GPSLatitude IS NOT NULL AND GPSLongitude IS NOT NULL");
+          var stmt = db.prepare("SELECT img_name, proj_name, GPSLatitude, GPSLongitude FROM Images WHERE GPSLatitude IS NOT NULL AND GPSLongitude IS NOT NULL");
           stmt.each([], function(err, row) {
             if (err) {
               console.error("FAILING: " + err);
               callback([]);
               return;
             }
 
-            coords.push({'lat': JSON.parse(row['GPSLatitude']), 'lng': JSON.parse(row['GPSLongitude'])});
+            coords.push({'lat': JSON.parse(row['GPSLatitude']), 'lng': JSON.parse(row['GPSLongitude']), 'title': row['img_name'], 'project': row['proj_name']});
           }, function() {
             callback(coords);
           });

diff --git a/js/landing.js b/js/landing.js
@@ -110,8 +110,9 @@ function create_image_timeline_chart() {
 		document.getElementById('landing-line-holder').innerHTML = '<div class="flot-chart"><canvas id="all-image-by-date"></canvas></div>'
 		renderLineChart('', {})
 	})
-  
+
   renderLineChart('', {})
+  $('#GMTtooltip').tooltip()
 }
 
 function create_image_locations_map() {

diff --git a/js/utils.js b/js/utils.js
@@ -30,14 +30,17 @@ function pad(num) {
 function displayDate(jsondate) {
   var day = jsondate.day + ' ' + months[jsondate.month - 1] + ' ' + jsondate.year
   var time = ' at ' + jsondate.hour + ':' + pad(jsondate.minute) + ':' + pad(jsondate.second)
-  var hrdiff = jsondate.tzoffsetMinutes/60
-  if (hrdiff > 0) {
-    hrdiff = '+' + hrdiff
-  } else if (hrdiff == 0) {
-    hrdiff = ''
+  var zone = ''
+  if ('tzoffsetMinutes' in jsondate) {
+    var hrdiff = jsondate.tzoffsetMinutes/60
+    if (hrdiff > 0) {
+      hrdiff = '+' + hrdiff
+    } else if (hrdiff == 0) {
+      hrdiff = ''
+    }
+    zone = ', GMT' + hrdiff
   }
-  var zone = ', GMT' + hrdiff
-  return day + time + zone
+  return (day + time + zone).replace(/undefined/g, '')
 }
 
 function yearStr(date) {
@@ -50,7 +53,7 @@ function dayStr(date) {
   return date.getDate() + ' ' + monthStr(date)
 }
 function hourStr(date) {
-  return dayStr(date) + date.getHours()
+  return dayStr(date) + ' at ' + date.getHours()
 }
 function minStr(date) {
   return hourStr(date) + ':' + pad(date.getMinutes())

diff --git a/sections/landing.html b/sections/landing.html
@@ -28,7 +28,7 @@
                 <div class="panel-heading">
                   Creation Date
                   <div style="float:right">
-                    <a href="#" class="custom-tooltip" data-toggle="tooltip" data-placement="auto" title="Check to convert all times to GMT (for comparison across timezones). Otherwise, times will be left in local capture times, so cross-timezone chronology may be lost">
+                    <a id="GMTtooltip" href="#" class="custom-tooltip" data-toggle="tooltip" data-placement="auto" title="Check to convert all times to GMT (for comparison across timezones). Otherwise, times will be left in local capture times, so cross-timezone chronology may be lost">
                       GMT:
                     </a>
                     <input class="form-check-input" type="checkbox" id="gmt-landing">