Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Marker cluster symbol (refs #314) #316

Merged
merged 7 commits into from
Apr 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/assets/javascripts/application.js.erb
Original file line number Diff line number Diff line change
@@ -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");
7 changes: 7 additions & 0 deletions app/assets/javascripts/graphics/clusters.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions app/assets/javascripts/graphics/clusters_with_gradient.js

Large diffs are not rendered by default.

54 changes: 41 additions & 13 deletions app/assets/javascripts/layers.js.erb
Original file line number Diff line number Diff line change
@@ -11,23 +11,44 @@ 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: '<div class="marker-cluster marker-cluster-small marker-cluster-layer-' + data_id + '"><div>' + cluster.getChildCount() + '</div></div>',
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 );
}
let rnd_rotate = Math.floor(Math.random()*25) * 15;
return L.divIcon({
html: '<div class="marker-cluster marker-cluster-small marker-cluster-layer-' + data_id + '" style="transform: rotate('+rnd_rotate+'deg);">' + cluster_viz + '</div>',
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;" +
19 changes: 16 additions & 3 deletions app/assets/javascripts/markers/draw_markers.js.erb
Original file line number Diff line number Diff line change
@@ -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 = "<svg height='"+marker_size+"' width='"+marker_size+"' xmlns='http://www.w3.org/2000/svg'><circle cx='"+marker_size/2+"' cy='"+marker_size/2+"' r='"+marker_size/2+"' fill='"+this_color+"' fill-opacity='"+opacity+"' stroke='"+stroke+"' stroke-width='"+stroke_width+"' stroke-opacity='"+stroke_opacity+"' shape-rendering='geometricPrecision'></circle></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 = '<defs><style>.cls-1{fill:url(#linear-gradient);stroke-width:0px;}</style><linearGradient id="linear-gradient" x1="23.08" y1="216.25" x2="274.44" y2="80.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0746f"/><stop offset=".24" stop-color="#f0746f"/><stop offset=".31" stop-color="'+color+'"/><stop offset="1" stop-color="'+color+'"/></linearGradient></defs>';
}

var svg = '<svg height="'+marker_size+'" width="'+marker_size+'" xmlns="http://www.w3.org/2000/svg">'+defs_with_gradient+'<circle class="cls-1" cx="'+marker_size/2+'" cy="'+marker_size/2+'" r="'+marker_size/2+'" fill="'+color+'" fill-opacity="'+opacity+'" stroke="'+stroke+'" stroke-width="'+stroke_width+'" stroke-opacity="'+stroke_opacity+'" shape-rendering="geometricPrecision"></circle></svg>';

var url = encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23');
var icon;
if ( layer_type === 'image' ) {
8 changes: 4 additions & 4 deletions app/assets/javascripts/relations/draw_curves.js.erb
Original file line number Diff line number Diff line change
@@ -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);
5 changes: 4 additions & 1 deletion app/assets/stylesheets/4_map.css.scss
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 2 additions & 1 deletion app/helpers/maps_helper.rb
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion app/views/maps/_form.html.haml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions spec/spec_helper.rb
Original file line number Diff line number Diff line change
@@ -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'
Binary file added spec/support/files/test-with-exif-data1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added spec/support/files/test-with-exif-data2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.