Draw plane icons.

public_html/markers.js

@@ -61,31 +61,57 @@ var _heavy_svg =
 var MarkerIcons = {
         generic : {
                 scale : 0.4,
+                size : [64, 64],
                 anchor : [32, 32],
                 path : _generic_plane_svg
         },
 
         light : {
                 scale : 0.4,
+                size : [64, 64],
                 anchor : [32, 25],
                 path : _beechcraft_svg
         },
 
         medium : {
                 scale : 0.4,
+                size : [64, 64],
                 anchor : [32, 32],
                 path : _generic_plane_svg
         },
 
         heavy : {
                 scale : 0.6,
+                size : [64, 64],
                 anchor : [32, 32],
                 path : _heavy_svg
         },
 
         rotorcraft : {
                 scale : 0.5,
+                size : [64, 64],
                 anchor : [22, 32],
                 path : _rotorcraft_svg
         }
 };
+
+function svgPathToSvg(path, size, stroke, width, fill) {
+        var svg = '<svg width="' + size[0] + 'px" height="' + size[1] + 'px" version="1.1" xmlns="http://www.w3.org/2000/svg">';
+        svg += '<path d="' + path + '"';
+        if (stroke !== null) {
+                svg += ' stroke="' + stroke + '"';
+        }
+        if (width !== null) {
+                svg += ' stroke-width="' + width + '"';
+        }
+        if (fill !== null) {
+                svg += ' fill="' + fill + '"';
+        }
+        svg += '/></svg>';
+        return svg;
+}
+
+
+function svgPathToURI(path, size, stroke, width, fill) {
+        return "data:image/svg+xml," + svgPathToSvg(path, size, stroke, width, fill)
+}

public_html/planeObject.js

@@ -37,7 +37,10 @@ function PlaneObject(icao) {
         // Display info
         this.visible = true;
         this.marker = null;
-        this.icon = { type: 'generic' };
+        this.markerStyle = null;
+        this.markerIcon = null;
+        this.markerStyleKey = null;
+        this.markerSvgKey = null;
 
         // request metadata
         this.registration = null;
@@ -140,7 +143,6 @@ PlaneObject.prototype.updateTrack = function(estimate_time) {
 
                 lastseg.fixed.appendCoordinate(projPrev);
                 this.track_linesegs.push({ fixed: new ol.geom.LineString([projPrev, projHere]),
-                                           latest: here,
                                            feature: null,
                                            head_update: this.last_position_time,
                                            tail_update: this.last_position_time,
@@ -268,20 +270,42 @@ PlaneObject.prototype.updateIcon = function() {
         var opacity = (this.position_from_mlat ? 0.75 : 1.0);
         var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
         var type = this.getMarkerIconType();
-        var weight = this.selected ? 2 : 1;
+        var weight = this.selected ? 4 : 1;
         var rotation = (this.track === null ? 0 : this.track);
 
-        /* TODO use the aircraft icon svgs */
+        var svgKey = col + '!' + outline + '!' + type + '!' + weight;
-        this.markerStyle = new ol.style.Style({
+        var styleKey = opacity + '!' + rotation;
-                image: new ol.style.Circle({
-                        fill: new ol.style.Fill({ color: col }),
-                        stroke: new ol.style.Stroke({ color: outline, width: weight }),
-                        radius: 5,
-                })
-        });
 
-        if (this.marker !== null) {
+        if (this.markerStyle === null || this.markerIcon === null || this.markerSvgKey != svgKey) {
-                this.marker.setStyle(this.markerStyle);
+                console.log(this.icao + " new icon and style " + this.markerSvgKey + " -> " + svgKey);
+
+                this.markerIcon = new ol.style.Icon({
+                        anchor: MarkerIcons[type].anchor,
+                        anchorXUnits: 'pixels',
+                        anchorYUnits: 'pixels',
+                        scale: MarkerIcons[type].scale,
+                        imgSize: MarkerIcons[type].size,
+                        src: svgPathToURI(MarkerIcons[type].path, MarkerIcons[type].size, outline, weight, col),
+                        rotation: rotation * Math.PI / 180.0,
+                        opacity: opacity
+                });
+
+                this.markerStyleKey = styleKey;
+                this.markerSvgKey = svgKey;
+                this.markerStyle = new ol.style.Style({
+                        image: this.markerIcon
+                });
+
+                if (this.marker !== null) {
+                        this.marker.setStyle(this.markerStyle);
+                }
+        }
+
+        if (this.markerStyleKey != styleKey) {
+                console.log(this.icao + " new rotation");
+                this.markerIcon.setRotation(rotation * Math.PI / 180.0);
+                this.markerIcon.setOpacity(opacity);
+                this.markerStyleKey = styleKey;
         }
 
         return true;
@@ -373,13 +397,14 @@ PlaneObject.prototype.updateMarker = function(moved) {
                 return;
         }
         
+        this.updateIcon();
         if (this.marker) {
                 if (moved) {
                         this.marker.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.updateIcon();
+                this.marker.setStyle(this.markerStyle);
                 PlaneIconFeatures.push(this.marker);
                 
                 /* FIXME
@@ -389,7 +414,6 @@ PlaneObject.prototype.updateMarker = function(moved) {
                 */
 	}
 
-        this.updateIcon();
 
         /*
 	// Setting the marker title