diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js index 4bc3b6ce..925db1f4 100644 --- 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 index b1b37178..fdf933f6 100644 --- 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 index a81717be..f623ebf9 100644 --- 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 index 3ac30a3d..78adfdc5 100644 --- 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