joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add filtering capability to the map

Browse Source
This commit is contained in:
Jakob Ketterl 2021-01-20 00:39:34 +01:00
parent 5d3d6423ed
commit 181855e7a4
2 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
htdocs/css/map.css
View File

@ -43,6 +43,15 @@ ul {
padding: 0; padding: 0;
} }
.openwebrx-map-legend ul li {
cursor: pointer;
}
.openwebrx-map-legend ul li.disabled {
opacity: .3;
filter: grayscale(70%);
}
.openwebrx-map-legend li.square .illustration { .openwebrx-map-legend li.square .illustration {
display: inline-block; display: inline-block;
width: 30px; width: 30px;

58
htdocs/map.js
View File

@ -87,6 +87,7 @@
$('#openwebrx-map-colormode').on('change', function(){ $('#openwebrx-map-colormode').on('change', function(){
colorMode = $(this).val(); colorMode = $(this).val();
colorKeys = {}; colorKeys = {};
filterRectangles(allRectangles);
reColor(); reColor();
updateLegend(); updateLegend();
}); });
@ -94,7 +95,10 @@
var updateLegend = function() { var updateLegend = function() {
var lis = $.map(colorKeys, function(value, key) { var lis = $.map(colorKeys, function(value, key) {
return '<li class="square"><span class="illustration" style="background-color:' + chroma(value).alpha(fillOpacity) + ';border-color:' + chroma(value).alpha(strokeOpacity) + ';"></span>' + key + '</li>'; // fake rectangle to test if the filter would match
var fakeRectangle = Object.fromEntries([[colorMode.slice(2), key]]);
var disabled = rectangleFilter(fakeRectangle) ? '' : ' disabled';
return '<li class="square' + disabled + '" data-selector="' + key + '"><span class="illustration" style="background-color:' + chroma(value).alpha(fillOpacity) + ';border-color:' + chroma(value).alpha(strokeOpacity) + ';"></span>' + key + '</li>';
}); });
$(".openwebrx-map-legend .content").html('<ul>' + lis.join('') + '</ul>'); $(".openwebrx-map-legend .content").html('<ul>' + lis.join('') + '</ul>');
} }
@ -164,11 +168,17 @@
}); });
rectangles[update.callsign] = rectangle; rectangles[update.callsign] = rectangle;
} }
rectangle.lastseen = update.lastseen;
rectangle.locator = update.location.locator;
rectangle.mode = update.mode;
rectangle.band = update.band;
rectangle.center = center;
rectangle.setOptions($.extend({ rectangle.setOptions($.extend({
strokeColor: color, strokeColor: color,
strokeWeight: 2, strokeWeight: 2,
fillColor: color, fillColor: color,
map: map, map: rectangleFilter(rectangle) ? map : undefined,
bounds:{ bounds:{
north: lat, north: lat,
south: lat + 1, south: lat + 1,
@ -176,11 +186,6 @@
east: lon + 2 east: lon + 2
} }
}, getRectangleOpacityOptions(update.lastseen) )); }, getRectangleOpacityOptions(update.lastseen) ));
rectangle.lastseen = update.lastseen;
rectangle.locator = update.location.locator;
rectangle.mode = update.mode;
rectangle.band = update.band;
rectangle.center = center;
if (expectedLocator && expectedLocator == update.location.locator) { if (expectedLocator && expectedLocator == update.location.locator) {
map.panTo(center); map.panTo(center);
@ -246,7 +251,10 @@
processUpdates(updateQueue); processUpdates(updateQueue);
updateQueue = []; updateQueue = [];
}); });
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($(".openwebrx-map-legend")[0]);
var $legend = $(".openwebrx-map-legend");
setupLegendFilters($legend);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($legend[0]);
if (!receiverMarker) { if (!receiverMarker) {
receiverMarker = new google.maps.Marker(); receiverMarker = new google.maps.Marker();
@ -329,7 +337,7 @@
infowindow.locator = locator; infowindow.locator = locator;
var inLocator = $.map(rectangles, function(r, callsign) { var inLocator = $.map(rectangles, function(r, callsign) {
return {callsign: callsign, locator: r.locator, lastseen: r.lastseen, mode: r.mode, band: r.band} return {callsign: callsign, locator: r.locator, lastseen: r.lastseen, mode: r.mode, band: r.band}
}).filter(function(d) { }).filter(rectangleFilter).filter(function(d) {
return d.locator == locator; return d.locator == locator;
}).sort(function(a, b){ }).sort(function(a, b){
return b.lastseen - a.lastseen; return b.lastseen - a.lastseen;
@ -424,4 +432,36 @@
}); });
}, 1000); }, 1000);
var rectangleFilter = allRectangles = function() { return true; };
var filterRectangles = function(filter) {
rectangleFilter = filter;
$.each(rectangles, function(_, r) {
r.setMap(rectangleFilter(r) ? map : undefined);
});
};
var setupLegendFilters = function($legend) {
$content = $legend.find('.content');
$content.on('click', 'li', function() {
var $el = $(this);
$lis = $content.find('li');
if ($lis.hasClass('disabled') && !$el.hasClass('disabled')) {
$lis.removeClass('disabled');
filterRectangles(allRectangles);
} else {
$el.removeClass('disabled');
$lis.filter(function() {
return this != $el[0]
}).addClass('disabled');
var key = colorMode.slice(2);
var selector = $el.data('selector');
filterRectangles(function(r) {
return r[key] === selector;
});
}
});
}
})(); })();