Darken past icons depending on map baselayer. Enable timeline only wi…

…th single marker mode (refs #301)

app/assets/javascripts/helpers/timeslider.js

@@ -3,7 +3,9 @@ jQuery(function ($) {
   let body = document.querySelector("body");
 
   if ( body.classList.contains("show") && ( body.id === 'maps') ) {
-
+    if ( $('#selection').data('map-marker-display-mode') !== 'single' ) {
+      return;
+    }
     // scrollbuttons
     let scrollLeft = document.createElement('div');
     scrollLeft.setAttribute('id', 'scroll-left');
@@ -70,8 +72,11 @@ function filterMarkers(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});
+        if ( $('#map').hasClass('darken-icons') ) {
+          icon = LargeMarkerIcon.create({color: '#333', opacity: 0.15});
+        } else {
+          icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.25});
+        }
         marker.setIcon(icon);        
         // TODO: remove relations and other elements!
 
@@ -113,6 +118,9 @@ function SelectAndFilterByYear(el,yearDivs,year) {
 document.addEventListener("DOMContentLoaded", function() {
   let body = document.querySelector("body");
   if ( body.classList.contains("show") && ( body.id === 'maps') ) {
+    if ( $('#selection').data('map-marker-display-mode') !== 'single' ) {
+      return;
+    }
     const timelineContent = document.getElementById("timeline-content");
     const scrollLeft = document.getElementById("scroll-left");
     const scrollRight = document.getElementById("scroll-right");

app/assets/javascripts/layers.js.erb

@@ -234,12 +234,15 @@ 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);         
-
+  if ( $('#selection').data('map-marker-display-mode') === 'single' ) {
+
+    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);

app/assets/stylesheets/6_timeline.css.scss

@@ -48,16 +48,15 @@ table#timeline-list {
 
 }
 #timeline-content {
-
-   background-color: transparent;
+  background-color: transparent;
   background-color: rgba(0, 0, 0, 0.3);
- border-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-   margin: 0 10px;
+  border-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  margin: 0 10px;
   padding: 5px 30px 5px 220px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-   justify-content: center;
+  justify-content: center;
   flex-wrap: nowrap;
   overflow: hidden;
   align-items: center; 

app/views/maps/show.html.haml

@@ -1,7 +1,7 @@
 - content_for(:title) { @map.title }
 
 #timeline-info{:style => "background-color: #fff; padding:10px; margin-bottom: 10px;"}
-  Timeline setup 
+  Timeline (still in testing) 
   %br
   #{@places.count} places in #{@map_layers.count} layers, #{@places_with_dates.count} #{@places_with_dates.count > 1 ? 'places' : 'place'} with dates
   %br
@@ -13,10 +13,8 @@
   %br
   - if @map.marker_display_mode == 'single'
     Marker display mode is set to single ✓
-  %br
-  TODO: generate timeline 
-  %br
-  TODO: set filter active
+  - else 
+    Marker display mode is set to cluster x  (<em>Timeline will work only with single marker display mode enabled</em>)
   %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}", 'map-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}