Add support for markers that don't rotate but have a heading arrow.

Use it for balloons.

public_html/markers.js

@@ -111,6 +111,17 @@ var _c130 = {
         path: "m 31,1 1,0 1,1 1,2 0,8 3,0 0,-3 1,-1 1,1 0,3 6,0 0,-3 1,-1 1,1 0,3 10,1 0,2 -1,1 -17,3 -5,0 0,10 -1,1 8,2 0,1 -1,1 -8,0 -1,1 -1,-1 -8,0 -1,-1 0,-1 8,-2 -1,-1 0,-10 -5,0 -17,-3 -1,-1 0,-2 10,-1 0,-3 1,-1 1,1 0,3 6,0 0,-3 1,-1 1,1 0,3 3,0 0,-8 1,-2 1,-1 z"
 };
 
+var _balloon = {
+        key: "balloon",
+        scale: 0.50,
+        size: [64, 64],
+        anchor: [32, 32],
+        path: "m 27,1 10,0 3,1 3,1 1,1 2,1 6,6 1,2 1,1 1,3 1,3 0,10 -1,3 -1,3 -1,1 -1,2 -6,6 -2,1 -1,1 -2,1 -2,1 -2,8 -1,0 2,-8 -3,1 -6,0 -3,-1 2,8 9,0 0,6 -10,0 0,-6 -2,-8 -2,-1 -2,-1 -1,-1 -2,-1 -6,-6 -1,-2 -1,-1 -1,-3 -1,-3 0,-10 1,-3 1,-3 1,-1 1,-2 6,-6 2,-1 1,-1 3,-1 3,-1 z",
+        noRotate: true,
+        markerRadius: 32
+};
+
+
 // by Oliver Jowett <oliver@mutability.co.uk>
 // licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
 var _a380 = {
@@ -210,7 +221,9 @@ var CategoryIcons = {
                 size : [64, 64],
                 anchor : [22, 32],
                 path : _rotorcraft_svg
-        }
+        },
+
+        "B2" : _balloon
 };
 
 var DefaultIcon = {

public_html/planeObject.js

@@ -39,6 +39,8 @@ function PlaneObject(icao) {
         this.marker = null;
         this.markerStyle = null;
         this.markerIcon = null;
+        this.markerStaticStyle = null;
+        this.markerStaticIcon = null;
         this.markerStyleKey = null;
         this.markerSvgKey = null;
 
@@ -263,25 +265,61 @@ PlaneObject.prototype.updateIcon = function() {
         if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
                 //console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
 
-                this.markerIcon = new ol.style.Icon({
+                var icon = new ol.style.Icon({
                         anchor: baseMarker.anchor,
                         anchorXUnits: 'pixels',
                         anchorYUnits: 'pixels',
                         scale: baseMarker.scale,
                         imgSize: baseMarker.size,
                         src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col),
-                        rotation: rotation * Math.PI / 180.0,
+                        rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0),
-                        opacity: opacity
+                        opacity: opacity,
+                        rotateWithView: (baseMarker.noRotate ? false : true)
                 });
 
-                this.markerStyleKey = styleKey;
+                if (baseMarker.noRotate) {
-                this.markerSvgKey = svgKey;
+                        // the base marker won't be rotated
+                        this.markerStaticIcon = icon;
+                        this.markerStaticStyle = new ol.style.Style({
+                                image: this.markerStaticIcon
+                        });
+
+                        // create an arrow that we will rotate around the base marker
+                        // to indicate heading
+
+                        var offset = baseMarker.markerRadius * baseMarker.scale + 6;
+                        var size = offset * 2;
+
+                        var arrowPath = "M " + offset + ",0 m 4,4 -8,0 4,-4 z";
+                        this.markerIcon = new ol.style.Icon({
+                                anchor: [offset, offset],
+                                anchorXUnits: 'pixels',
+                                anchorYUnits: 'pixels',
+                                scale: 1.0,
+                                imgSize: [size, size],
+                                src: svgPathToURI(arrowPath, [size, size], outline, 1, outline),
+                                rotation: rotation * Math.PI / 180.0,
+                                opacity: opacity,
+                                rotateWithView: true
+                        });
                         this.markerStyle = new ol.style.Style({
                                 image: this.markerIcon
                         });
+                } else {
+                        this.markerIcon = icon;
+                        this.markerStyle = new ol.style.Style({
+                                image: this.markerIcon
+                        });
+                        this.markerStaticIcon = null;
+                        this.markerStaticStyle = new ol.style.Style({});
+                }
+
+                this.markerStyleKey = styleKey;
+                this.markerSvgKey = svgKey;
 
                 if (this.marker !== null) {
                         this.marker.setStyle(this.markerStyle);
+                        this.markerStatic.setStyle(this.markerStaticStyle);
                 }
         }
 
@@ -289,6 +327,9 @@ PlaneObject.prototype.updateIcon = function() {
                 //console.log(this.icao + " new rotation");
                 this.markerIcon.setRotation(rotation * Math.PI / 180.0);
                 this.markerIcon.setOpacity(opacity);
+                if (this.staticIcon) {
+                        this.staticIcon.setOpacity(opacity);
+                }
                 this.markerStyleKey = styleKey;
         }
 
@@ -369,8 +410,9 @@ PlaneObject.prototype.updateTick = function(receiver_timestamp, last_timestamp)
 PlaneObject.prototype.clearMarker = function() {
 	if (this.marker) {
                 PlaneIconFeatures.remove(this.marker);
+                PlaneIconFeatures.remove(this.markerStatic);
                 /* FIXME google.maps.event.clearListeners(this.marker, 'click'); */
-		this.marker = null;
+                this.marker = this.markerStatic = null;
 	}
 };
 
@@ -385,12 +427,18 @@ PlaneObject.prototype.updateMarker = function(moved) {
         if (this.marker) {
                 if (moved) {
                         this.marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
+                        this.markerStatic.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
                 }
         } else {
                 this.marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
                 this.marker.hex = this.icao;
                 this.marker.setStyle(this.markerStyle);
                 PlaneIconFeatures.push(this.marker);
+
+                this.markerStatic = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(this.position)));
+                this.markerStatic.hex = this.icao;
+                this.markerStatic.setStyle(this.markerStaticStyle);
+                PlaneIconFeatures.push(this.markerStatic);
 	}
 };