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

use custom marker class to solve overlay problem (and enable rotation at

Browse Source 
a later point)
This commit is contained in:
Jakob Ketterl
2019-09-19 01:35:58 +02:00
parent 996422ff4b
commit 15c28b130d
2 changed files with 82 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
htdocs/lib/AprsMarker.js Normal file
View File

@@ -0,0 +1,71 @@
function AprsMarker() {}
AprsMarker.prototype = new google.maps.OverlayView();
AprsMarker.prototype.draw = function() {
var div = this.div;
var overlay = this.overlay;
if (this.symbol) {
var tableId = this.symbol.table == '/' ? 0 : 1;
div.style.background = 'url(/aprs-symbols/aprs-symbols-24-' + tableId + '@2x.png)';
div.style['background-size'] = '384px 144px';
div.style['background-position-x'] = -(this.symbol.index % 16) * 24 + 'px';
div.style['background-position-y'] = -Math.floor(this.symbol.index / 16) * 24 + 'px';
}
if (this.symbol.table != '/' && this.symbol.table != '\\') {
overlay.style.display = 'block';
overlay.style['background-position-x'] = -(this.symbol.tableindex % 16) * 24 + 'px';
overlay.style['background-position-y'] = -Math.floor(this.symbol.tableindex / 16) * 24 + 'px';
} else {
overlay.style.display = 'none';
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
if (point) {
div.style.left = point.x - 12 + 'px';
div.style.top = point.y - 12 + 'px';
}
};
AprsMarker.prototype.onAdd = function() {
var div = this.div = document.createElement('div');
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '24px';
div.style.height = '24px';
var overlay = this.overlay = document.createElement('div');
overlay.style.width = '24px';
overlay.style.height = '24px';
overlay.style.background = 'url(/aprs-symbols/aprs-symbols-24-2@2x.png)';
overlay.style['background-size'] = '384px 144px';
overlay.style.display = 'none';
div.appendChild(overlay);
var self = this;
google.maps.event.addDomListener(div, "click", function(event) {
event.stopPropagation();
google.maps.event.trigger(self, "click", event);
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
AprsMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
AprsMarker.prototype.getAnchorPoint = function() {
return new google.maps.Point(0, -12);
}

26
htdocs/map.js
View File

@@ -98,27 +98,21 @@
case 'latlon':
var pos = new google.maps.LatLng(update.location.lat, update.location.lon);
var marker;
var markerClass = google.maps.Marker;
var iconOptions = {}
if (update.location.symbol) {
markerClass = AprsMarker;
iconOptions.symbol = update.location.symbol;
}
if (markers[update.callsign]) {
marker = markers[update.callsign];
} else {
marker = new google.maps.Marker();
marker = new markerClass();
marker.addListener('click', function(){
showMarkerInfoWindow(update.callsign, pos);
});
markers[update.callsign] = marker;
}
var iconOptions = {}
if (update.location.symbol) {
var index = update.location.symbol.index;
var tableId = update.location.symbol.table == '/' ? 0 : 1;
iconOptions.icon = {
url: '/aprs-symbols/aprs-symbols-24-' + tableId + '@2x.png',
size: new google.maps.Size(24, 24),
origin: new google.maps.Point((index % 16) * 24, Math.floor(index / 16) * 24),
anchor: new google.maps.Point(12, 12),
scaledSize: new google.maps.Size(384, 144),
};
}
marker.setOptions($.extend({
position: pos,
map: map,
@@ -220,12 +214,14 @@
},
zoom: 5
});
processUpdates(updateQueue);
updateQueue = [];
$.getScript("/static/lib/nite-overlay.js").done(function(){
nite.init(map);
setInterval(function() { nite.refresh() }, 10000); // every 10s
});
$.getScript('/static/lib/AprsMarker.js').done(function(){
processUpdates(updateQueue);
updateQueue = [];
});
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($(".openwebrx-map-legend")[0]);
});
retention_time = config.map_position_retention_time * 1000;