Enable date by year/2 (refs #301)

a-thousand-channels · May 16, 2024 · 489da0e · 489da0e
1 parent bec1804
commit 489da0e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -2,7 +2,7 @@ jQuery(function ($) {
 
   let body = document.querySelector("body");
 
-  if ( body.classList.contains("show") && ( body.id == 'maps') ) {
+  if ( body.classList.contains("show") && ( body.id === 'maps') ) {
 
     // scrollbuttons
     let scrollLeft = document.createElement('div');
@@ -24,10 +24,11 @@ jQuery(function ($) {
     document.body.insertBefore(timelineWrapper, document.querySelector("footer"));
 
 
-    let minYear = 2000;
-    let maxYear = 2024;
+    let minYear = $('#selection').data('map-timeline-minyear');
+    let maxYear = $('#selection').data('map-timeline-maxyear');
 
     let diff = maxYear - minYear;
+    console.log("Create Timeline with ",minYear,maxYear,diff);
     let step = 1;
 
     for (var i = minYear; i <= maxYear; i += step) {
@@ -45,17 +46,21 @@ let current_selected_year = 1900;
 function filterMarkers(selectedYear) {
   console.log("filterMarkers **************");
   console.log(window.markers);
-
 
   const status = document.getElementById("timeline-info-status");
   status.innerHTML = "Selected Year "+selectedYear;
 
   window.markers.forEach(function(marker) {
+    if (!marker.data) {
+      window.map.removeLayer(marker);
+      return;
+    }
     if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
-        console.log(marker.data.fromYear,selectedYear,marker.data.endYear);
+        console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear);
         marker.addTo(window.map);
         marker.setIcon(window.icon);
     } else {       
+      console.log("X", marker.data.fromYear,selectedYear,marker.data.endYear);
       if ( selectedYear <= current_selected_year ) {
         window.map.removeLayer(marker);  
         // marker.setIcon(icon_past);
@@ -67,6 +72,13 @@ function filterMarkers(selectedYear) {
     }
   });
 }
+function resetMarkers() {
+  markers.forEach(function(marker) {
+      marker.addTo(map);
+      marker.setIcon(icon);       
+  });
+}
+
 function SelectAndFilterByYear(el,yearDivs,year) {
   let active = false;
   if ( el.classList.contains("active") ) {
@@ -109,8 +121,9 @@ document.addEventListener("DOMContentLoaded", function() {
       SelectAndFilterByYear(this,yearDivs,selectedYear);
     });
   });
-  el = document.getElementById('year2008'); 
-  // SelectAndFilterByYear(el,yearDivs,'2008')
+  let startyear = $('#selection').data('map-timeline-minyear');
+  el = document.getElementById('year'+startyear); 
+  SelectAndFilterByYear(el,yearDivs,startyear);
 });
 
 

diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb
@@ -93,6 +93,8 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
   if(typeof layer_json_url !== 'undefined') {
 
     console.log("Drawing placemarks w/data from "+layer_json_url + " at level "+level);
+    // Initialize an array to hold markers
+    window.markers = [];    
 
     var request = $.getJSON(layer_json_url, function(data) {
 
@@ -148,8 +150,7 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
 
         if ( marker_display_mode == 'single' ) {
           marker_layers =  L.featureGroup();
-          // Initialize an array to hold markers
-          window.markers = [];
+
         } else {
           marker_layers = L.markerClusterGroup(markerclusterSettings);
         }
@@ -186,11 +187,14 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
           console.log("Places_with_relations: "+data.places_with_relations.length);
           drawCurves(map,data.id,curve_layers,marker_layers,data.color,data.places_with_relations, data.relations_bending,data.relations_coloring);
           marker_meta_layers.addLayer(marker_layers);
+
+
         });
 
       }
       console.log('******************************');
-      console.log(window.markers_layer)
+      console.log("saved in window.markers: "+window.markers.length);
+      console.log(window.markers)
 
       var layer_style = '';
       $.each(data.layers, function(key,data) {

diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb
@@ -148,9 +148,11 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
           // Attach fromYear and toYear attributes to marker 
           console.log("Marker data");
           console.log(marker.data);
-          window.markers.push(marker);    
+
         }
-
+        window.markers.push(marker);    
+        console.log(window.markers.length)
+
       } else {
 
       }
@@ -240,6 +242,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
     // console.log(c+" Marker added to map!");
     console.log('Markers hash');
     console.log(window.markers);
+    console.log(window.markers.length);
 
     // thanks to https://github.com/louh - Allow for offset on center of map
     L.Map.prototype.panToOffset = function (latlng, offset, options) {

diff --git a/app/views/maps/show.html.haml b/app/views/maps/show.html.haml
@@ -19,7 +19,7 @@
   TODO: set filter active
   %br
   %span#timeline-info-status
-#selection{:data => { 'url' => "/maps/#{@map.id}.json", 'map_id' => "#{@map.id}", 'map-center-lat' => "#{@map.mapcenter_lat}", 'map-center-lon' => "#{@map.mapcenter_lon}", 'map-zoom' => "#{@map.zoom}", 'map-extent-northeast' => "#{@map.northeast_corner}", 'map-extent-southwest' => "#{@map.southwest_corner}", 'map-basemap-url' => "#{@map.basemap_url}", 'map-basemap-attribution' => "#{@map.basemap_attribution}", 'map-background-color' => "#{@map.background_color}", 'map-popup-display-mode' => "#{@map.popup_display_mode}", 'map-marker_display_mode' => "#{@map.marker_display_mode}", 'map-enable_historical_maps' => "#{@map.enable_historical_maps}" }}
+#selection{:data => { 'url' => "/maps/#{@map.id}.json", 'map_id' => "#{@map.id}", 'map-center-lat' => "#{@map.mapcenter_lat}", 'map-center-lon' => "#{@map.mapcenter_lon}", 'map-zoom' => "#{@map.zoom}", 'map-extent-northeast' => "#{@map.northeast_corner}", 'map-extent-southwest' => "#{@map.southwest_corner}", 'map-basemap-url' => "#{@map.basemap_url}", 'map-basemap-attribution' => "#{@map.basemap_attribution}", 'map-background-color' => "#{@map.background_color}", 'map-popup-display-mode' => "#{@map.popup_display_mode}", 'map-marker_display_mode' => "#{@map.marker_display_mode}", 'map-enable_historical_maps' => "#{@map.enable_historical_maps}", 'map-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}
   - if params[:setbound]
     #form-wrapper.small-wrapper
       .grid-x