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 {