diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js index b127e702..9fbeb4a0 100644 --- a/app/assets/javascripts/helpers/timeslider.js +++ b/app/assets/javascripts/helpers/timeslider.js @@ -1,8 +1,6 @@ -jQuery(function ($) { - +function setupTimeslider(places_by_year) { let body = document.querySelector("body"); - - + console.log('Timeline: setupTimeslider') if ( body.classList.contains("show") && ( body.id === 'maps') ) { if ( $('#selection').data('map-marker-display-mode') !== 'single' ) { @@ -14,6 +12,7 @@ jQuery(function ($) { if ( Object.keys(places_by_year).length === 0 ) { return; } + // scrollbuttons let scrollLeft = document.createElement('div'); scrollLeft.setAttribute('id', 'scroll-left'); @@ -46,20 +45,32 @@ jQuery(function ($) { let maxYear = $('#selection').data('map-timeline-maxyear'); let diff = maxYear - minYear; - // check if places_by_year is an empty object - - - console.log("Create Timeline with ",minYear,maxYear); + + console.log("Timeline: Create Timeline with ",minYear,maxYear,diff); let step = 1; + // argh, after sending the data via JSON an extra hash level is created + function getPlacesByYear(year) { + for (let i = 0; i < places_by_year.length; i++) { + if (places_by_year[i][year]) { + return places_by_year[i][year]; + } + } + return null; // oder ein leerer Array [], falls es keine Orte gibt + } + console.log("Timeline: ",2010, getPlacesByYear(2010)); + for (var i = minYear; i <= maxYear; i += step) { + // for (var i = 0; i <= diff; i += step) { var div = document.createElement('div'); div.classList.add('year'); div.setAttribute('id', 'year'+i); div.setAttribute('data-year', i); - if ( places_by_year[i] ) { - div.setAttribute('title', 'Show '+places_by_year[i].length+' places for '+i); - div.setAttribute('data-places', places_by_year[i].length); + var thisyear = getPlacesByYear(i); + console.log("Timeline: Create Timeline entry with ",i, thisyear); + if ( thisyear ) { + div.setAttribute('title', 'Show '+thisyear.length+' places for '+i); + div.setAttribute('data-places', thisyear.length); } else { div.classList.add('stale'); div.setAttribute('title', 'No places for '+i); @@ -68,14 +79,57 @@ jQuery(function ($) { div.textContent = i; timelineContent.appendChild(div); } - } -}); +} +function setupTimesliderEvents(places_by_year) { + let body = document.querySelector("body"); + if ( body.classList.contains("show") && ( body.id === 'maps') ) { + if ( $('#selection').data('map-marker-display-mode') !== 'single' ) { + return; + } + if ( $('#selection').data('map-enable-time-slider') !== true ) { + return; + } + if ( Object.keys(places_by_year).length === 0 ) { + return; + } + const timelineContent = document.getElementById("timeline-content"); + const scrollLeft = document.getElementById("scroll-left"); + const scrollRight = document.getElementById("scroll-right"); + const yearDivs = document.querySelectorAll(".year"); + + console.log("Timeline: setupTimesliderEvents","Prep eventListeners") + scrollLeft.addEventListener("click", function() { + timelineContent.scrollBy({ + left: -100, // Adjust the scroll amount as needed + behavior: "smooth" + }); + }); + + scrollRight.addEventListener("click", function() { + timelineContent.scrollBy({ + left: 100, // Adjust the scroll amount as needed + behavior: "smooth" + }); + }); + yearDivs.forEach(function(yearDiv) { + yearDiv.addEventListener("click", function() { + + var selectedYear = this.getAttribute('data-year'); + var selectedYearPlaces = this.getAttribute('data-places'); + SelectAndFilterByYear(this,yearDivs,selectedYear,selectedYearPlaces); + }); + }); + console.log("Timeline: setupTimesliderEvents","Prep eventListeners done"); + + } + +} + let current_selected_year = 1900; function filterMarkers(selectedYear,places) { - console.log("filterMarkers **************",selectedYear); - console.log(window.markers); + console.log("Timeline: filterMarkers **************",selectedYear); current_selected_year = ( selectedYear > current_selected_year ) ? selectedYear : current_selected_year; const status = document.getElementById("timeline-info-status"); @@ -155,50 +209,7 @@ function SelectAndFilterByYear(el,yearDivs,year,places) { el.classList.add("active"); } } -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; - } - if ( $('#selection').data('map-enable-time-slider') !== true ) { - return; - } - if ( Object.keys(places_by_year).length === 0 ) { - return; - } - const timelineContent = document.getElementById("timeline-content"); - const scrollLeft = document.getElementById("scroll-left"); - const scrollRight = document.getElementById("scroll-right"); - const yearDivs = document.querySelectorAll(".year"); - - console.log("Prep eventListeners") - scrollLeft.addEventListener("click", function() { - timelineContent.scrollBy({ - left: -100, // Adjust the scroll amount as needed - behavior: "smooth" - }); - }); - scrollRight.addEventListener("click", function() { - timelineContent.scrollBy({ - left: 100, // Adjust the scroll amount as needed - behavior: "smooth" - }); - }); - yearDivs.forEach(function(yearDiv) { - yearDiv.addEventListener("click", function() { - - var selectedYear = this.getAttribute('data-year'); - var selectedYearPlaces = this.getAttribute('data-places'); - SelectAndFilterByYear(this,yearDivs,selectedYear,selectedYearPlaces); - }); - }); - console.log("Prep eventListeners done"); - - } -}); - $(document).on('click', '#timeline-function a', function(event) { event.preventDefault(); diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb index 84b8769a..00de91ab 100644 --- a/app/assets/javascripts/layers.js.erb +++ b/app/assets/javascripts/layers.js.erb @@ -15,80 +15,79 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv var marker_display_mode = $('#selection').data('map-marker-display-mode'); var layer_color = $('#selection').data('layer-color'); - var markerclusterSettings = { - maxClusterRadius: 30, - showCoverageOnHover: false, - animate: true, - iconCreateFunction: function(cluster) { - if ( marker_display_mode == 'cluster' ) { - return L.divIcon({ - html: '
' + cluster.getChildCount() + '
', - className: "leaflet-data-markercluster", - iconAnchor : [15, 15], - iconSize : [30, 30], - popupAnchor : [0, -28] - }); - } else { - console.log("Zigzgag Cluster!!"); - console.log(cluster.getChildCount()); - - let cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_small : cluster_small_with_gradient ); - if ( cluster.getChildCount() >= 10 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_xlarge : cluster_xlarge_with_gradient ); - } else if ( cluster.getChildCount() >= 6 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_large : cluster_large_with_gradient ); - } else if ( cluster.getChildCount() >= 3 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_medium : cluster_medium_with_gradient ); - } - if ( layer_color && layer_color.length > 0 ) { - cluster_viz = cluster_viz.replace(/rgba\(255, 0, 153, 0.8\)/g, layer_color); - } - - let rnd_rotate = Math.floor(Math.random()*25) * 15; - return L.divIcon({ - html: '
' + cluster_viz + '
', - className: "leaflet-data-markercluster", - iconAnchor : [15, 15], - iconSize : [30, 30], - popupAnchor : [0, -28] - }); - } - }, - spiderLegPolylineOptions: { weight: 0, color: '#efefef', opacity: 0.5 }, - elementsPlacementStrategy: "clock", - helpingCircles: true, - clockHelpingCircleOptions: { - weight: 40, - opacity: 0, - color: "#000000", - fill: "#333", - fillOpacity: 0.2 - }, - - spiderfyDistanceSurplus: 28, - spiderfyDistanceMultiplier: 1, - - spiderfiedClassName: 'spiderfied-places', - - elementsMultiplier: 1.4, - firstCircleElements: 10, - spiderfyShapePositions: function(count, centerPt) { - var distanceFromCenter = 50, - markerDistance = 105, - lineLength = markerDistance * (count - 1), - lineStart = centerPt.y - lineLength / 4, - res = [], - i; - - res.length = count; - - for (i = count - 1; i >= 0; i--) { - res[i] = new Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i); + var markerclusterSettings = { + maxClusterRadius: 30, + showCoverageOnHover: false, + animate: true, + iconCreateFunction: function(cluster) { + if ( marker_display_mode == 'cluster' ) { + return L.divIcon({ + html: '
' + cluster.getChildCount() + '
', + className: "leaflet-data-markercluster", + iconAnchor : [15, 15], + iconSize : [30, 30], + popupAnchor : [0, -28] + }); + } else { + console.log("Cluster: Zigzgag",cluster.getChildCount()); + + let cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_small : cluster_small_with_gradient ); + if ( cluster.getChildCount() >= 10 ) { + cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_xlarge : cluster_xlarge_with_gradient ); + } else if ( cluster.getChildCount() >= 6 ) { + cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_large : cluster_large_with_gradient ); + } else if ( cluster.getChildCount() >= 3 ) { + cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_medium : cluster_medium_with_gradient ); + } + if ( layer_color && layer_color.length > 0 ) { + cluster_viz = cluster_viz.replace(/rgba\(255, 0, 153, 0.8\)/g, layer_color); } - - return res; - } - }; + + let rnd_rotate = Math.floor(Math.random()*25) * 15; + return L.divIcon({ + html: '
' + cluster_viz + '
', + className: "leaflet-data-markercluster", + iconAnchor : [15, 15], + iconSize : [30, 30], + popupAnchor : [0, -28] + }); + } + }, + spiderLegPolylineOptions: { weight: 0, color: '#efefef', opacity: 0.5 }, + elementsPlacementStrategy: "clock", + helpingCircles: true, + clockHelpingCircleOptions: { + weight: 40, + opacity: 0, + color: "#000000", + fill: "#333", + fillOpacity: 0.2 + }, + + spiderfyDistanceSurplus: 28, + spiderfyDistanceMultiplier: 1, + + spiderfiedClassName: 'spiderfied-places', + + elementsMultiplier: 1.4, + firstCircleElements: 10, + spiderfyShapePositions: function(count, centerPt) { + var distanceFromCenter = 50, + markerDistance = 105, + lineLength = markerDistance * (count - 1), + lineStart = centerPt.y - lineLength / 4, + res = [], + i; + + res.length = count; + + for (i = count - 1; i >= 0; i--) { + res[i] = new Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i); + } + + return res; + } + }; if(typeof layer_json_url !== 'undefined') { @@ -99,7 +98,7 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv var request = $.getJSON(layer_json_url, function(data) { console.log("-----------------------------"); - console.log(data); + console.log("Data from layer_json_url",data); // read params, place id is given, render this place special console.log("Check for url params"); @@ -109,7 +108,6 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv if ( level !== 'maps') { console.log("Render places of one layer"); - console.log(data); if ( marker_display_mode == 'single' ) { var marker_layers = L.featureGroup(); } else { @@ -162,7 +160,6 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv clustercolor = '#ff0099'; clustercolor = 'rgba(255, 0, 153, 0.8)'; - console.log(data); drawMarkers(map,data.id,data.layer_type,level,show_annotations_on_map,text_layers,image_layers,marker_layers,params,data.layer_color,[data]); }); marker_meta_layers.addLayer(marker_layers); @@ -193,8 +190,7 @@ 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("Saved in window.markers: "+window.markers.length); var layer_style = ''; $.each(data.layers, function(key,data) { @@ -238,7 +234,14 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv const yearDivs = document.querySelectorAll(".year"); let startyear = $('#selection').data('map-timeline-minyear'); if ( startyear ) { - console.log("Pre-select first year ", startyear, yearDivs.length); + + window.places_by_year = data.places_by_year; + console.log("places_by_year",data.places_by_year); + setupTimeslider(data.places_by_year); + setupTimesliderEvents(data.places_by_year); + + + console.log("Timeline: Pre-select first year ", startyear, yearDivs.length); // remove other layers from map map.removeLayer(curve_layers); map.removeLayer(image_layers); @@ -247,7 +250,7 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv if ( yearDivs.length > 0 ) { let el = document.getElementById('year'+startyear); - console.log("year with places",startyear, el.getAttribute('data-places')) + console.log("Timeline: Year with places",startyear, el.getAttribute('data-places')) SelectAndFilterByYear(el,yearDivs,startyear, el.getAttribute('data-places')); } } @@ -283,9 +286,9 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv // set map center after last user action if ( ( localStorage.getItem('SetCustomExtent') === 'true' ) && ( northeast_array ) ) { northeast_array = localStorage.getItem('UserMapBoundsNE'); - console.log("set map bounds to user values NE " + northeast_array); + console.log("Sset map bounds to user values NE " + northeast_array); southwest_array = localStorage.getItem('UserMapBoundsSW'); - console.log("set map bounds to user values SW " + southwest_array); + console.log("Set map bounds to user values SW " + southwest_array); var boundsX = L.latLngBounds(northeast_array.split(","), southwest_array.split(",")); console.log("Fit map bounds to user values ",boundsX); map.fitBounds(boundsX, {maxZoom: 16, minZoom: 2}); @@ -301,9 +304,9 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv /* not needed for now var zl_after_fitbounds = map.getZoom(); var zl = localStorage.getItem('UserZoomLevel'); - console.log("get zoom level if any " + zl); + console.log("Get zoom level if any " + zl); if ( zl && ( zl_after_fitbounds < zl )) { - console.log("set zoom level to " + zl); + console.log("Set zoom level to " + zl); // map.setZoom(zl); } */ // set custom extent @@ -316,7 +319,6 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv console.log(setbound_url); setbound_url = setbound_url.replace(/\?northeast=(.*?)&s/, '?northeast='+northeast.lat.toPrecision(5)+","+northeast.lng.toPrecision(5)+'&s'); setbound_url = setbound_url.replace(/&southwest=(.*)/, '&southwest='+southwest.lat.toPrecision(5)+","+southwest.lng.toPrecision(5)); - console.log(setbound_url); $("#setbound").attr('href', setbound_url); @@ -327,11 +329,9 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv var new_bound = rect.getBounds(); northeast = new_bound.getNorthEast(); southwest = new_bound.getSouthWest(); - console.log("get new bounds"); - console.log(northeast); + console.log("Get new bounds", northeast); setbound_url = setbound_url.replace(/\?northeast=(.*?)&s/, '?northeast='+northeast.lat.toPrecision(5)+","+northeast.lng.toPrecision(5)+'&s'); setbound_url = setbound_url.replace(/&southwest=(.*)/, '&southwest='+southwest.lat.toPrecision(5)+","+southwest.lng.toPrecision(5)); - console.log(setbound_url); $("#setbound").attr('href', setbound_url); }); } diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb index fc72cb83..35149cc8 100644 --- a/app/assets/javascripts/markers/draw_markers.js.erb +++ b/app/assets/javascripts/markers/draw_markers.js.erb @@ -148,7 +148,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ if ( place.startdate && !place.enddate ) { place.enddate = parseInt(place.startdate.substring(0, 4))+"-12-31T00:00:00.000Z"; - console.log("set enddate with startdate", place.startdate,place.enddate); + console.log("Set enddate with startdate", place.startdate,place.enddate); } if ( place.startdate && place.enddate ) { marker.data = setFromToYears(place.startdate,place.enddate); @@ -157,12 +157,11 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ marker.data.layer_id = layer_id; // Attach fromYear and toYear attributes to marker - console.log("Marker data"); - console.log(marker.data); + console.log("Marker data", marker.data); } window.markers.push(marker); - console.log(window.markers.length) + console.log("window.markers.length",window.markers.length) } else { @@ -191,14 +190,14 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ }); marker.on('click', function (e) { - console.log('marker'); + console.log('Marker clicked'); console.log(e); }); // TODO: change color of marker - marker_layers.on('clusterclick', function (a) { + marker_layers.on('Clusterclick', function (a) { // a.layer is actually a cluster - // console.log('cluster ' + a.layer.getAllChildMarkers().length); + // console.log('Cluster ' + a.layer.getAllChildMarkers().length); // console.log(a.originalEvent.target); // console.log(a.originalEvent.target.closest(".leaflet-interactive").classList); // $(a.originalEvent.target).closest(".leaflet-interactive").toggleClass("cluster_expanded"); @@ -251,9 +250,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ c++; }); // console.log(c+" Marker added to map!"); - console.log('Markers hash'); - console.log(window.markers); - console.log(window.markers.length); + // console.log('Markers hash', window.markers, 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/assets/javascripts/relations/draw_curves.js.erb b/app/assets/javascripts/relations/draw_curves.js.erb index 4b915fb6..c605d48a 100644 --- a/app/assets/javascripts/relations/draw_curves.js.erb +++ b/app/assets/javascripts/relations/draw_curves.js.erb @@ -3,7 +3,6 @@ function drawCurves(map,layer_id,curve_layers,marker_layers,clustercolor,places_ var boost = ( 2.9 * bending ) + 0.1; console.log("Boost: "+boost); - console.log("Iterate places_with_relations"); $.each(places_with_relations, function(key,place) { $.each(place.relations, function(kkey,relation) { diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index c133d635..e9e4a923 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -32,8 +32,8 @@ def show startyear = place.startdate.nil? ? @minyear : place.startdate.year endyear = place.enddate.nil? ? startyear : place.enddate.year (startyear..endyear).each do |year| - @places_by_year[year] ||= [] - @places_by_year[year] << place + @places_by_year[year.to_i] ||= [] + @places_by_year[year.to_i] << place end end @timespan = @maxyear - @minyear diff --git a/app/views/maps/_map.json.jbuilder b/app/views/maps/_map.json.jbuilder index 5b88deeb..963d1ee6 100644 --- a/app/views/maps/_map.json.jbuilder +++ b/app/views/maps/_map.json.jbuilder @@ -31,3 +31,6 @@ json.layers map.layers do |layer| end end end +json.places_by_year @places_by_year do |year,places| + json.set! year, places +end \ No newline at end of file diff --git a/app/views/maps/show.html.haml b/app/views/maps/show.html.haml index a90c8051..946d74fa 100644 --- a/app/views/maps/show.html.haml +++ b/app/views/maps/show.html.haml @@ -24,10 +24,6 @@ Marker display mode is set to single ✓ - else Marker display mode is set to cluster x (Timeline will work only with single marker display mode enabled) - - %script{:type => "text/javascript"} - let places_by_year = #{@places_by_year.to_json.html_safe} - console.log('places_by_year',places_by_year); #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-enable_time_slider' => "#{@map.enable_time_slider}", 'map-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}