Enable light icon for past places (refs #301)

a-thousand-channels · May 20, 2024 · d90276e · d90276e
1 parent fb8809b
commit d90276e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -28,7 +28,7 @@ jQuery(function ($) {
     let maxYear = $('#selection').data('map-timeline-maxyear');
 
     let diff = maxYear - minYear;
-    console.log("Create Timeline with ",minYear,maxYear,diff);
+    console.log("Create Timeline with ",minYear,maxYear);
     let step = 1;
 
     for (var i = minYear; i <= maxYear; i += step) {
@@ -44,8 +44,10 @@ jQuery(function ($) {
 });
 let current_selected_year = 1900;
 function filterMarkers(selectedYear) {
-  console.log("filterMarkers **************");
+
+  console.log("filterMarkers **************",selectedYear);
   console.log(window.markers);
+  current_selected_year = ( selectedYear > current_selected_year ) ? selectedYear : current_selected_year;
 
   const status = document.getElementById("timeline-info-status");
   status.innerHTML = "Selected Year "+selectedYear;
@@ -57,29 +59,39 @@ function filterMarkers(selectedYear) {
     }
     if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
         console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
-        marker.addTo(window.map);
+
         // TODO: add color!
         icon = LargeMarkerIcon.create({color: marker.data.color});
         marker.setIcon(icon);
-    } else {       
-      console.log("X", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
-      if ( selectedYear <= current_selected_year ) {
-        window.map.removeLayer(marker);  
-        // marker.setIcon(icon_past);
+        marker.addTo(window.map);
+    } 
+    // selecting past years
+    else if ( marker.data.endYear <= selectedYear) {
+
+        console.log("X Past", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);        
+
+        // TODO: color depending on background :)
+        icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.25});
+        marker.setIcon(icon);        
         // TODO: remove relations and other elements!
-      } else {
-        window.map.removeLayer(marker);  
-        window.icon_past = window.icon;
-        marker.setIcon(window.icon_past);
-      }    
-    }
+
+    // selecting future years
+    } else {
+      console.log("X Future", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);        
+      window.map.removeLayer(marker);  
+
+    }    
+
   });
 }
 function resetMarkers() {
   markers.forEach(function(marker) {
-      marker.addTo(map);
-      icon = LargeMarkerIcon.create({color: marker.data.color});
-      marker.setIcon(icon);       
+    if (!marker.data) {
+      return;
+    }
+    marker.addTo(map);
+    icon = LargeMarkerIcon.create({color: marker.data.color});
+    marker.setIcon(icon);       
   });
 }
 
@@ -127,9 +139,8 @@ document.addEventListener("DOMContentLoaded", function() {
         SelectAndFilterByYear(this,yearDivs,selectedYear);
       });
     });
-    let startyear = $('#selection').data('map-timeline-minyear');
-    el = document.getElementById('year'+startyear); 
-    SelectAndFilterByYear(el,yearDivs,startyear);
+    console.log("Prep eventListeners done");
+
   }
 });
 

diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb
@@ -194,8 +194,8 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
       }
       console.log('******************************');
       console.log("saved in window.markers: "+window.markers.length);
-      console.log(window.markers)
-      
+      console.log(window.markers);
+
       var layer_style = '';
       $.each(data.layers, function(key,data) {
           layer_style += "#map .marker-cluster-layer-" + data.id;
@@ -234,6 +234,13 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
       "</style>"
   );
 
+  const yearDivs = document.querySelectorAll(".year");
+  let startyear = $('#selection').data('map-timeline-minyear');
+  console.log("Pre-select first year ", startyear, yearDivs.length);
+  let el = document.getElementById('year'+startyear); 
+  SelectAndFilterByYear(el,yearDivs,startyear);         
+
+
         console.log("Fit to bounds routine");
         var bounds = marker_meta_layers.getBounds().pad(0.35);
         console.log("Set zoom to 12 (may be we overide custom zoomlevels with that?");

diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb
@@ -254,7 +254,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
     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) {
         var x = this.latLngToContainerPoint(latlng).x - offset[0]