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 = ''+defs_with_gradient+''; + 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