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

a later point)

htdocs/lib/AprsMarker.js

@@ -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);
+}

htdocs/map.js

@@ -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;