diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 9a57371f..71c2dde1 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -381,6 +381,10 @@ jQuery(function ($) {
} else {
custom_base_layer.addTo(map);
}
+ if ( $('#selection').data('map-marker-display-mode') === 'zigzag cluster, w/gradient' ) {
+ $('#map').addClass('gradient-icons')
+ }
+
} else {
console.log("No custom base layer defined");
diff --git a/app/assets/javascripts/graphics/clusters.js b/app/assets/javascripts/graphics/clusters.js
new file mode 100644
index 00000000..7ca522cb
--- /dev/null
+++ b/app/assets/javascripts/graphics/clusters.js
@@ -0,0 +1,7 @@
+var cluster_small = '';
+
+var cluster_medium = '';
+
+var cluster_large = '';
+
+var cluster_xlarge = '';
\ No newline at end of file
diff --git a/app/assets/javascripts/graphics/clusters_with_gradient.js b/app/assets/javascripts/graphics/clusters_with_gradient.js
new file mode 100644
index 00000000..95f7e899
--- /dev/null
+++ b/app/assets/javascripts/graphics/clusters_with_gradient.js
@@ -0,0 +1,7 @@
+var cluster_small_with_gradient = '';
+
+var cluster_medium_with_gradient = '';
+
+var cluster_large_with_gradient = '';
+
+var cluster_xlarge_with_gradient = '';
\ No newline at end of file
diff --git a/app/assets/javascripts/layers.js.erb b/app/assets/javascripts/layers.js.erb
index 1b600627..bce999b1 100644
--- a/app/assets/javascripts/layers.js.erb
+++ b/app/assets/javascripts/layers.js.erb
@@ -11,11 +11,15 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
// how to set data.id dynamically?
var data_id = 1;
+
+ var marker_display_mode = $('#selection').data('map-marker-display-mode');
+
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",
@@ -23,11 +27,28 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
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 );
+ }
+ 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: {
@@ -77,15 +98,17 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
var params = getParams();
var clustercolor = '#445';
+
if ( level !== 'maps') {
console.log("Render places of one layer");
console.log(data);
- if ( $('#selection').data('map-marker-display-mode') == 'single' ) {
+ if ( marker_display_mode == 'single' ) {
var marker_layers = L.featureGroup();
} else {
var marker_layers = L.markerClusterGroup(markerclusterSettings);
}
clustercolor = data.color;
+ clustercolor = 'rgba(255, 0, 153, 0.8)';
var places = [];
if (level === 'places') {
places = data.places;
@@ -101,10 +124,10 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
$('.marker-cluster-small').addClass('marker-layer-'+data.id);
} else {
console.log("DRAW MARKER");
- drawMarkers(map,data.id,data.ltype,level,String(false),text_layers,image_layers,marker_layers,params,data.color,clustercolor,places);
+ drawMarkers(map,data.id,data.ltype,level,String(false),text_layers,image_layers,marker_layers,params,data.color,places);
$('.marker-cluster-small').addClass('marker-layer-'+data.id);
}
- drawCurves(map,data.id,curve_layers,marker_layers,data.color,clustercolor,places_with_relations,data.relations_bending,data.relations_coloring);
+ drawCurves(map,data.id,curve_layers,marker_layers,data.color,places_with_relations,data.relations_bending,data.relations_coloring);
marker_meta_layers.addLayer(marker_layers);
} else {
@@ -117,7 +140,7 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
});
var show_annotations_on_map = data.show_annotations_on_map;
- if ( $('#selection').data('map-marker-display-mode') == 'single' ) {
+ if ( marker_display_mode == 'single' ) {
marker_layers = L.featureGroup();
} else {
marker_layers = L.markerClusterGroup(markerclusterSettings);
@@ -127,14 +150,19 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
$.each(all_places, function(key,data) {
clustercolor = 'rgba(0, 54, 193, 0.9)';
clustercolor = 'rgba(50, 54, 153, 0.9)';
+
+ clustercolor = '#ff0099';
+ clustercolor = 'rgba(255, 0, 153, 0.8)';
+
/* grayish
clustercolor = 'rgba(100, 104, 103, 0.9)';
if ( localStorage.baselayer == 'Satellite' ) {
clustercolor = 'rgba(220, 224, 223, 0.9)';
}
+
*/
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,clustercolor,[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);
@@ -156,7 +184,7 @@ 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,clustercolor,data.places_with_relations, data.relations_bending,data.relations_coloring);
+ 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);
});
@@ -176,10 +204,10 @@ function ShowPlacesForLayer(map,text_layers,image_layers,marker_meta_layers,curv
"#map .marker-cluster-medium," +
"#map .marker-cluster-small {" +
" background-color: transparent;" +
- " border: 3px solid " + clustercolor + ";" +
+ " border: 0px solid " + clustercolor + ";" +
" opacity: 0.9;" +
- " width: 40px;" +
- " height: 40px;" +
+ " width: 36px;" +
+ " height: 36px;" +
" display: flex;" +
" align-items: center;" +
" justify-content: center;" +
diff --git a/app/assets/javascripts/markers/draw_markers.js.erb b/app/assets/javascripts/markers/draw_markers.js.erb
index 090b17ab..832328f0 100644
--- a/app/assets/javascripts/markers/draw_markers.js.erb
+++ b/app/assets/javascripts/markers/draw_markers.js.erb
@@ -1,6 +1,6 @@
-function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_layers,image_layers,marker_layers,params,color,clustercolor,places) {
+function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_layers,image_layers,marker_layers,params,color,places) {
var c = 0;
var marker_size = 30;
if ( layer_type === 'image' ) {
@@ -12,7 +12,7 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
options: {
iconSize: [marker_size, marker_size],
iconAnchor: [15, 15],
- popupAnchor: [-2, -15]
+ popupAnchor: [0, -15]
}
});
var CustomSmallIcon = L.Icon.extend({
@@ -58,7 +58,20 @@ function drawMarkers(map,layer_id,layer_type,level,show_annotations_on_map,text_
if (color.indexOf('#') == -1) {
color = '#'+color;
}
- var svg = "";
+
+ // TODO: only if gradient is selected
+ // TODO: remove box shadow
+ // TODO: rotate gradient
+ var marker_display_mode = $('#selection').data('map-marker-display-mode');
+ var defs_with_gradient = '';
+ if ( marker_display_mode === 'zigzag cluster, w/gradient' ) {
+ console.log("!!!!Marker display mode: "+marker_display_mode);
+ opacity = '0.85'
+ defs_with_gradient = '';
+ }
+
+ var svg = '';
+
var url = encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23');
var icon;
if ( layer_type === 'image' ) {
diff --git a/app/assets/javascripts/relations/draw_curves.js.erb b/app/assets/javascripts/relations/draw_curves.js.erb
index 26a7a645..e5eec5da 100644
--- a/app/assets/javascripts/relations/draw_curves.js.erb
+++ b/app/assets/javascripts/relations/draw_curves.js.erb
@@ -1,5 +1,5 @@
-function drawCurves(map,layer_id,curve_layers,marker_layers,color,clustercolor,places_with_relations,bending,coloring) {
+function drawCurves(map,layer_id,curve_layers,marker_layers,color,places_with_relations,bending,coloring) {
var boost = ( 2.9 * bending ) + 0.1;
console.log("Boost: "+boost);
@@ -12,8 +12,8 @@ function drawCurves(map,layer_id,curve_layers,marker_layers,color,clustercolor,p
var point2 = [Number(relation.to.lat), Number(relation.to.lon)];
var color = 'rgba(225,25,25,0.75)';
- var color = '#'+Math.floor(Math.random()*16777215).toString(16);
- var color = "hsl(" + Math.random() * 360 + ", 100%, 85%)";
+ color = '#'+Math.floor(Math.random()*16777215).toString(16);
+ color = "hsl(" + Math.random() * 360 + ", 100%, 85%)";
// var color = clustercolor;
if ( coloring == 'black') {
color = '#000000'
@@ -26,7 +26,7 @@ function drawCurves(map,layer_id,curve_layers,marker_layers,color,clustercolor,p
weight: 4,
opacity: 0.5,
className: 'curve_normal curve_'+relation.from.id,
- animate: false
+ animate: true
}
var distance = L.latLng(point1).distanceTo( L.latLng(point2));
let distance_in_kms = ((distance) / 1000).toFixed(2);
diff --git a/app/assets/stylesheets/4_map.css.scss b/app/assets/stylesheets/4_map.css.scss
index b58f23ac..9e7d4cae 100644
--- a/app/assets/stylesheets/4_map.css.scss
+++ b/app/assets/stylesheets/4_map.css.scss
@@ -196,7 +196,10 @@
}
/* ............................. */
#map.darken-icons img.leaflet-marker-icon {
- filter: saturate(200%) drop-shadow(0 0 2px #888);
+ filter: saturate(200%) drop-shadow(0 0 1px #888);
+}
+#map.darken-icons.gradient-icons img.leaflet-marker-icon {
+ filter: saturate(200%);
}
#map.darken-icons .text_inner {
color: #333;
diff --git a/app/helpers/maps_helper.rb b/app/helpers/maps_helper.rb
index 289e0a28..a6e16f36 100644
--- a/app/helpers/maps_helper.rb
+++ b/app/helpers/maps_helper.rb
@@ -7,7 +7,8 @@ def popup_display_mode_for_select
end
def marker_display_mode_for_select
- marker_display_modes = %w[cluster single]
+ # array with three values
+ marker_display_modes = ['cluster', 'zigzag cluster', 'zigzag cluster, w/gradient', 'single']
marker_display_modes.each_with_object({}) { |e, m| m[e.capitalize] = e }
end
end
diff --git a/app/views/maps/_form.html.haml b/app/views/maps/_form.html.haml
index 377df0b9..790ea3d8 100644
--- a/app/views/maps/_form.html.haml
+++ b/app/views/maps/_form.html.haml
@@ -52,7 +52,7 @@
%p
= f.input :marker_display_mode, :collection => marker_display_mode_for_select, :input_html => { :class => '' }, label: 'Marker display mode'
%p.hint
- Choose, if near-by or overlapping markers should displayed as a marker cluster (default) or as single markers.
+ Choose, if near-by or overlapping markers should displayed as a marker cluster (default) or as single markers. NEW: You can choose also a colorized version of marker cluster :)
.large-4.medium-4.small-6.cell
%p
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index f8c80034..9e2fc27f 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -11,6 +11,7 @@
'0.0.0.0',
'127.0.0.1',
'chromedriver.storage.googleapis.com',
+ 'storage.googleapis.com',
'googlechromelabs.github.io',
'storage.googleapis.com',
'edgedl.me.gvt1.com'
diff --git a/spec/support/files/test-with-exif-data1.jpg b/spec/support/files/test-with-exif-data1.jpg
new file mode 100644
index 00000000..e5bdd658
Binary files /dev/null and b/spec/support/files/test-with-exif-data1.jpg differ
diff --git a/spec/support/files/test-with-exif-data2.jpg b/spec/support/files/test-with-exif-data2.jpg
new file mode 100644
index 00000000..c17b9892
Binary files /dev/null and b/spec/support/files/test-with-exif-data2.jpg differ