From ce79626ab5f613d1356c9798f1448b4d18c01bd8 Mon Sep 17 00:00:00 2001 From: Ulf Treger Date: Mon, 24 Jun 2024 17:03:06 +0200 Subject: [PATCH] Update past icon colors on timeline change. Enable uniform cluster coloring if all child markers have the same color (from the same layer). Enable clustering in single mode (sic) for entries with the same coordinates --- app/assets/javascripts/graphics/clusters.js | 19 ++++--- .../helpers/basemap_layer_change.js.erb | 18 +++++- app/assets/javascripts/helpers/timeslider.js | 23 +++++--- app/assets/javascripts/layers.js.erb | 57 ++++++++++++++----- .../javascripts/markers/draw_markers.js.erb | 19 ++++--- 5 files changed, 97 insertions(+), 39 deletions(-) diff --git a/app/assets/javascripts/graphics/clusters.js b/app/assets/javascripts/graphics/clusters.js index 691e9d4d..d400287a 100644 --- a/app/assets/javascripts/graphics/clusters.js +++ b/app/assets/javascripts/graphics/clusters.js @@ -1,7 +1,12 @@ -var cluster_small = ''; - -var cluster_medium = ''; - -var cluster_large = ''; - -var cluster_xlarge = ''; \ No newline at end of file +function cluster_small(color = 'rgba(255, 0, 153, 0.8)') { + return ''; +} +function cluster_medium(color = 'rgba(255, 0, 153, 0.8)') { + return ''; +} +function cluster_large(color = 'rgba(255, 0, 153, 0.8)') { + return ''; +} +function cluster_xlarge(color = 'rgba(255, 0, 153, 0.8)') { + return ''; +} \ No newline at end of file diff --git a/app/assets/javascripts/helpers/basemap_layer_change.js.erb b/app/assets/javascripts/helpers/basemap_layer_change.js.erb index cf78aa99..a8e35dd7 100644 --- a/app/assets/javascripts/helpers/basemap_layer_change.js.erb +++ b/app/assets/javascripts/helpers/basemap_layer_change.js.erb @@ -37,6 +37,8 @@ function BaseMapLayerChange(map,action) { custom_basemap_url = $('#selection').data('map-basemap-url'); if ( $('#selection').data('map-basemap-attribution') ) { custom_basemap_attribution = $('#selection').data('map-basemap-attribution'); + } else { + custom_basemap_attribution = 'Attribution missing' } custom_base_layer = L.tileLayer(custom_basemap_url, { attribution: custom_basemap_attribution, @@ -73,7 +75,7 @@ function BaseMapLayerChange(map,action) { basemaps["Historical HH 1930-1940"] = wmsLayerHamburg1930s; basemaps["Historical HH 1980-1990"] = wmsLayerHamburg1980s; } - } + } if ( localStorage.baselayer == 'Openstreetmap') { @@ -105,11 +107,16 @@ function BaseMapLayerChange(map,action) { // delete any class of $('#timeline-wrapper') $('#timeline-wrapper').removeClass(); + $('#map').removeClass('darken-icons'); + $('#map').removeClass('darken-icons2'); + $('#map').removeClass('darken-label'); console.log("BaseMapLayerChange localStorage.baselayer",localStorage.baselayer); if ( localStorage.baselayer == 'Openstreetmap') { $('#map').addClass('darken-icons'); $('#map').addClass('darken-icons2'); $('#timeline-wrapper').addClass('light'); + } else if ( localStorage.baselayer == 'Satellite') { + } else if ( localStorage.baselayer == 'Historical HH 1925-1930') { // $('#map').addClass('darken-icons darken-label') $('#map').addClass('darken-icons'); @@ -127,6 +134,15 @@ function BaseMapLayerChange(map,action) { $('#map').removeClass('darken-icons2'); $('#map').removeClass('darken-label'); } + + if ( action !== 'setup') { + // refresh markers + let startyear = $('#selection').data('map-selected-year'); + console.log("BaseMapLayerChange: startyear",startyear); + let el = document.getElementById('year'+startyear); + console.log("Timeline: Year with places",startyear, el.getAttribute('data-places')) + filterMarkers(startyear, el.getAttribute('data-places')); + } return basemaps; } diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js index 4ef85031..901f179a 100644 --- a/app/assets/javascripts/helpers/timeslider.js +++ b/app/assets/javascripts/helpers/timeslider.js @@ -114,9 +114,9 @@ function setupTimesliderEvents(places_by_year) { }); yearDivs.forEach(function(yearDiv) { yearDiv.addEventListener("click", function() { - var selectedYear = this.getAttribute('data-year'); var selectedYearPlaces = this.getAttribute('data-places'); + $('#selection').data('map-selected-year',selectedYear); SelectAndFilterByYear(this,yearDivs,selectedYear,selectedYearPlaces); }); }); @@ -129,7 +129,9 @@ function setupTimesliderEvents(places_by_year) { let current_selected_year = 1900; function filterMarkers(selectedYear,places) { - console.log("Timeline: filterMarkers **************",selectedYear); + console.log("Timeline: filterMarkers **************",selectedYear,places,document.getElementById('timeline-wrapper').classList); + + current_selected_year = ( selectedYear > current_selected_year ) ? selectedYear : current_selected_year; const status = document.getElementById("timeline-info-status"); @@ -138,7 +140,8 @@ function filterMarkers(selectedYear,places) { window.markers.forEach(function(marker) { if (!marker.data) { - window.map.removeLayer(marker); + // window.map.removeLayer(marker); + window.marker_layers.removeLayer(marker); return; } if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) { @@ -147,7 +150,7 @@ function filterMarkers(selectedYear,places) { // TODO: add color! icon = LargeMarkerIcon.create({color: marker.data.color}); marker.setIcon(icon); - marker.addTo(window.map); + marker.addTo(window.marker_layers); } // selecting past years else if ( marker.data.endYear <= selectedYear) { @@ -161,19 +164,23 @@ function filterMarkers(selectedYear,places) { } else { icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.42}); } - window.map.removeLayer(marker); + // window.map.removeLayer(marker); + window.marker_layers.removeLayer(marker); marker.setIcon(icon); - marker.addTo(window.map); + marker.addTo(window.marker_layers); // TODO: remove relations and other elements! // 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); + // window.map.removeLayer(marker); + window.marker_layers.removeLayer(marker); + } }); + window.marker_layers.refreshClusters(); } function resetMarkers() { const status = document.getElementById("timeline-info-status"); @@ -229,4 +236,4 @@ $(document).on('changed.zf.slider', '[data-slider]', function(event) { // TODO: create list of all places with startyear and endyear data values // hide all // show only those existing in the selected year -}); +}); \ No newline at end of file diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb index fa3c0cf4..cd29acd9 100644 --- a/app/assets/javascripts/layers.js.erb +++ b/app/assets/javascripts/layers.js.erb @@ -15,8 +15,14 @@ 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, + var maxClusterRadius = 30; + if ( marker_display_mode == 'single' ) { + // cluster is used here to show entries on the very same coordinates + maxClusterRadius = 0; + } + + var markerclusterSettings = { + maxClusterRadius: maxClusterRadius, showCoverageOnHover: false, animate: true, iconCreateFunction: function(cluster) { @@ -30,14 +36,36 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv }); } else { console.log("Cluster: Zigzgag",cluster.getChildCount()); + console.log("Cluster: Childmarkers", cluster.getAllChildMarkers()); + if ( cluster.getAllChildMarkers()[0].data ) { + console.log("Cluster: Childmarker Data", cluster.getAllChildMarkers()[0].data.color); + } + // TODO: add color from data + // TODO: build array of colors of all Childmarkers + let childmarker_colors = []; + cluster.getAllChildMarkers().forEach(function(marker) { + if ( marker.data ) { + childmarker_colors.push(marker.data.color); + } + }); + // check if all values of childmarker_colors are the same + let check_all_same = childmarker_colors.every( (val, i, arr) => val === arr[0] ); + console.log("All colors are the same: ", check_all_same); + let cluster_color = ''; + if ( childmarker_colors.length > 0 && check_all_same ) { + cluster_color = childmarker_colors[0] + } + + // TODO: if all the same: use this color! + // TODO: if different: use default color - let cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_small : cluster_small_with_gradient ); + let cluster_viz = ( marker_display_mode === 'zigzag cluster, w/gradient' ? cluster_small_with_gradient : cluster_small(cluster_color) ); if ( cluster.getChildCount() >= 10 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_xlarge : cluster_xlarge_with_gradient ); + cluster_viz = ( marker_display_mode === 'zigzag cluster, w/gradient' ? cluster_xlarge_with_gradient : cluster_xlarge(cluster_color) ); } else if ( cluster.getChildCount() >= 6 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_large : cluster_large_with_gradient ); + cluster_viz = ( marker_display_mode === 'zigzag cluster, w/gradient' ? cluster_large_with_gradient : cluster_large(cluster_color) ); } else if ( cluster.getChildCount() >= 3 ) { - cluster_viz = ( marker_display_mode === 'zigzag cluster' ? cluster_medium : cluster_medium_with_gradient ); + cluster_viz = ( marker_display_mode === 'zigzag cluster, w/gradient' ? cluster_medium_with_gradient : cluster_medium(cluster_color) ); } if ( layer_color && layer_color.length > 0 ) { cluster_viz = cluster_viz.replace(/rgba\(255, 0, 153, 0.8\)/g, layer_color); @@ -109,7 +137,8 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv if ( level !== 'maps') { console.log("Render places of one layer"); if ( marker_display_mode == 'single' ) { - var marker_layers = L.featureGroup(); + // var marker_layers = L.featureGroup(); + var marker_layers = L.markerClusterGroup(markerclusterSettings); } else { var marker_layers = L.markerClusterGroup(markerclusterSettings); } @@ -147,8 +176,8 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv var show_annotations_on_map = data.show_annotations_on_map; if ( marker_display_mode == 'single' ) { - marker_layers = L.featureGroup(); - + // marker_layers = L.featureGroup(); + marker_layers = L.markerClusterGroup(markerclusterSettings); } else { marker_layers = L.markerClusterGroup(markerclusterSettings); } @@ -191,7 +220,8 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv } console.log('******************************'); console.log("Saved in window.markers: "+window.markers.length); - + window.marker_layers = marker_layers; + var layer_style = ''; $.each(data.layers, function(key,data) { layer_style += "#map .marker-cluster-layer-" + data.id; @@ -233,26 +263,23 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv if ( $('#selection').data('map-marker-display-mode') === 'single' ) { const yearDivs = document.querySelectorAll(".year"); let startyear = $('#selection').data('map-timeline-minyear'); + $('#selection').data('map-selected-year',startyear); if ( startyear ) { 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); map.removeLayer(text_layers); - if ( yearDivs.length > 0 ) { let el = document.getElementById('year'+startyear); console.log("Timeline: Year with places",startyear, el.getAttribute('data-places')) - SelectAndFilterByYear(el,yearDivs,startyear, el.getAttribute('data-places')); - - + SelectAndFilterByYear(el, yearDivs, startyear, el.getAttribute('data-places')); } } BaseMapLayerChange(map,'update'); diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb index a5955017..faa0359a 100644 --- a/app/assets/javascripts/markers/draw_markers.js.erb +++ b/app/assets/javascripts/markers/draw_markers.js.erb @@ -6,7 +6,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ if ( layer_type === 'image' ) { marker_size = 15; } - console.log("Drawing "+places.length+" markers for layer "+layer_id+" of type "+layer_type+" at level "+level + "(Marker size is "+marker_size+")"); + console.log("Drawing "+places.length+" markers for layer "+layer_id+" of type "+layer_type+" at level "+level + " (Marker size is "+marker_size+")"); var CustomLargeIcon = L.Icon.extend({ options: { iconSize: [marker_size, marker_size], @@ -141,6 +141,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ // TODO: use this ID for triggering relations visibility (show relation on hover) // marker.CustomID = 'marker_to_'+place.id; if ( ( level != 'maps' ) || ( place.shy == false )) { + marker_layers.addLayer(marker); text_layers.addLayer(textmarker); // text_layers.addLayer(marker); @@ -149,16 +150,18 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_ place.enddate = parseInt(place.startdate.substring(0, 4))+"-12-31T00:00:00.000Z"; console.log("Set enddate with startdate", place.startdate,place.enddate); } + marker.data = [] if ( place.startdate && place.enddate ) { marker.data = setFromToYears(place.startdate,place.enddate); - marker.data.title = place.title; - marker.data.color = color; - marker.data.layer_id = layer_id; - - // Attach fromYear and toYear attributes to marker - console.log("Marker data", marker.data); - } + marker.data.title = place.title; + marker.data.color = color; + marker.data.layer_id = layer_id; + + // Attach fromYear and toYear attributes to marker + console.log("Marker data", marker.data); + + window.markers.push(marker); } else {