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

color by band

Browse Source
This commit is contained in:
Jakob Ketterl 2019-07-28 15:28:39 +02:00
parent 98c5e9e15b
commit 6e7d99376d
3 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
htdocs/lib/chroma.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
htdocs/map.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>OpenWebRX Map</title> <title>OpenWebRX Map</title>
<script src="static/lib/jquery-3.2.1.min.js"></script> <script src="static/lib/jquery-3.2.1.min.js"></script>
<script src="static/lib/chroma.min.js"></script>
<script src="static/map.js"></script> <script src="static/map.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/map.css" /> <link rel="stylesheet" type="text/css" href="static/css/map.css" />

33
htdocs/map.js
View File

@ -31,6 +31,34 @@
var strokeOpacity = 0.8; var strokeOpacity = 0.8;
var fillOpacity = 0.35; var fillOpacity = 0.35;
var colorKeys = {};
var getColor = function(id){
if (!id) return "#000000";
if (!colorKeys[id]) {
var keys = Object.keys(colorKeys);
keys.push(id);
keys.sort();
var colors = chroma.scale(['#FF0000', '#0000FF']).colors(keys.length);
colorKeys = {};
keys.forEach(function(key, index) {
colorKeys[key] = colors[index];
});
reColor();
}
return colorKeys[id];
}
// when the color palette changes, update all grid squares with new color
var reColor = function() {
$.each(rectangles, function(_, r) {
var color = getColor(r.band);
r.setOptions({
strokeColor: color,
fillColor: color
});
});
}
var processUpdates = function(updates) { var processUpdates = function(updates) {
if (!map) { if (!map) {
updateQueue = updateQueue.concat(updates); updateQueue = updateQueue.concat(updates);
@ -73,6 +101,7 @@
var lon = (loc.charCodeAt(0) - 65 - 9) * 20 + Number(loc[2]) * 2; var lon = (loc.charCodeAt(0) - 65 - 9) * 20 + Number(loc[2]) * 2;
var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1}); var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1});
var rectangle; var rectangle;
var color = getColor(update.band);
if (rectangles[update.callsign]) { if (rectangles[update.callsign]) {
rectangle = rectangles[update.callsign]; rectangle = rectangles[update.callsign];
} else { } else {
@ -83,9 +112,9 @@
rectangles[update.callsign] = rectangle; rectangles[update.callsign] = rectangle;
} }
rectangle.setOptions($.extend({ rectangle.setOptions($.extend({
strokeColor: '#FF0000', strokeColor: color,
strokeWeight: 2, strokeWeight: 2,
fillColor: '#FF0000', fillColor: color,
map: map, map: map,
bounds:{ bounds:{
north: lat, north: lat,