Add more aircraft icons courtesy Peter Lowden.

Add support for selecting an icon based on aircraft type from the json DB.

public_html/markers.js

@@ -58,43 +58,140 @@ var _beechcraft_svg =
 var _heavy_svg =
         "m28.64874,12.035023l0,8.801421l-4.585627,3.066495c0.126825,-0.257055 0.094102,-0.531839 0.095802,-0.802796l-0.015437,-3.087446l-2.230453,-0.012673l0.019009,3.599141c0.000513,0.577993 0.076338,0.923195 0.589296,1.241956l-5.533809,3.630512c0.166511,-0.256275 0.153699,-0.551367 0.153699,-0.841892l-0.005929,-3.270195l-2.160751,-0.012672l-0.006337,3.637159c0.016349,0.5301 0.096662,1.090947 0.576623,1.419379l-11.976014,7.825597c-2.106287,1.48859 -1.705322,3.044253 -1.56512,4.587637l26.645047,-9.048544l0,13.750239l0.722364,5.062875l-8.681027,6.387208c-1.239945,1.059417 -1.080616,2.171837 -0.842757,3.256969l11.278998,-2.946479c0.130159,3.116897 1.559821,3.171571 1.780561,0.006336l11.278998,2.94648c0.23786,-1.085133 0.397189,-2.197552 -0.842756,-3.256969l-8.681026,-6.387207l0.722362,-5.062875l0,-13.750239l26.645048,9.042207c0.140203,-1.543381 0.541167,-3.092711 -1.56512,-4.581301l-11.976015,-7.825597c0.47996,-0.328434 0.553938,-0.889279 0.570286,-1.419379l0,-3.63716l-2.160751,0.012673l-0.005378,3.328244c-0.002334,0.294243 0.007077,0.545056 0.178191,0.817583l-5.565189,-3.664251c0.512962,-0.318761 0.59512,-0.663963 0.595633,-1.241956l0.019009,-3.599141l-2.230454,0.012673l-0.015793,3.100403c0.001462,0.282341 -0.019949,0.535579 0.124839,0.794638l-4.614307,-3.071294l0,-8.801421c-1.111672,-11.152869 -5.489391,-11.217579 -6.735717,-0.006336z";
 
-var MarkerIcons = {
+// From https://discussions.flightaware.com/ads-b-flight-tracking-f21/some-custom-svg-plane-icons-t37783.html
-        generic : {
+// by Peter Lowden
-                scale : 0.4,
+// licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
-                size : [64, 64],
-                anchor : [32, 32],
-                path : _generic_plane_svg
-        },
 
-        light : {
+// NB: scaled so that 1 pixel is about 0.75m
-                scale : 0.4,
+var _a320 = {
+        key: "a320",
+        scale: 0.60 * 0.75,
+        size: [64, 64],
+        anchor: [32, 28],
+        path: "m 32,1 2,1 2,3 0,18 4,1 0,-4 3,0 0,5 17,6 0,3 -15,-2 -9,0 0,12 -2,6 7,3 0,2 -8,-1 -1,2 -1,-2 -8,1 0,-2 7,-3 -2,-6 0,-12 -9,0 -15,2 0,-3 17,-6 0,-5 3,0 0,4 4,-1 0,-18 2,-3 2,-1z"
+};
+
+var _b777 = {
+        key: "b777",
+        scale: 1.15 * 0.75,
+        size: [64, 64],
+        anchor: [32, 32],
+        path: "m 32,1 2,1 1,2 0,20 4,4 0,-4 3,0 0,4 -1,2 17,12 0,2 -16,-5 -7,0 0,13 -1,5 7,5 0,2 -8,-2 -1,2 -1,-2 -8,2 0,-2 7,-5 -1,-5 0,-13 -7,0 -16,5 0,-2 17,-12 -1,-2 0,-4 3,0 0,4 4,-4 0,-20 1,-2 2,-1z"
+};
+
+var _dash8 = {
+        key: "dash8",
+        scale: 0.52 * 0.75,
+        size: [64, 64],
+        anchor: [32, 30],
+        path: "m 32,1 3,4 0,20 4,0 0,-5 1,-1 1,1 0,5 17,2 0,3 -17,2 0,3 -1,1 -1,-1 0,-3 -4,0 0,15 -1,8 6,0 1,1 0,3 -8,0 -1,1 -1,-1 -8,0 0,-3 1,-1 6,0 -1,-8 0,-15 -4,0 0,3, -1,1 -1,-1 0,-3 -17,-2 0,-3 17,-2 0,-5 1,-1 1,1 0,5 4,0 0,-20 3,-4z"
+};
+
+var _b200 = {
+        key: "b200",
+        scale: 0.31 * 0.75,
+        size: [64, 64],
+        anchor: [32, 19],
+        path: "m 32,1 1,0 1,2 1,4 0,5 5,0 0,-5 -1,-1 2,-2 2,2 -1,1 0,5 17,2 0,3 -17,3 0,1 -2,0 0,-1 -5,0 0,5 -2,8 6,3 0,2 -6,-1 -1,0 -6,1 0,-2 6,-3 -2,-8 0,-5 -5,0 0,1, -2,0 0,-1 -17,-3 0,-3 17,-2 0,-5 -1,-1 2,-2 2,2 -1,1 0,5 5,0 0,-5 1,-4 1,-2 z"
+};
+
+var _g650 = {
+        key: "g650",
+        scale: 0.58 * 0.75,
+        size: [64, 64],
+        anchor: [32, 26],
+        path: "m 32,1 1,0 1,2 1,4 0,10 21,17 0,5 -2,-2 -16,-8 -3,0 0,3 2,0 1,1 0,5 -1,1 0,3 -2,0 0,1 7,5 0,3 -9,-3 -1,0 -9,3 0,-3 7,-5 0,-1 -2,0 0,-3 -1,-1 0,-5 1,-1 2,0 0,-3 -3,0 -16,8 -2,2 0,-5 21,-17 0,-10 1,-4 1,-2z"
+};
+
+var _c130 = {
+        key: "c130",
+        scale: 0.75 * 0.75,
+        size: [64, 64],
+        anchor: [32, 17],
+        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 TypeIcons = {
+        'A320': _a320,
+
+        'B772': _b777, // all pretty similar except for length
+        'B77W': _b777,
+        'B773': _b777,
+        'B77L': _b777,
+
+        'DH8D': _dash8,
+
+        'BE20': _b200,
+
+        'GLF5': _g650, // close enough
+        'GLF6': _g650,
+
+        'C130': _c130,
+        'C30J': _c130
+};
+
+var CategoryIcons = {
+        "A1" : {
+                key : "A1",
+                scale : 0.30,
                 size : [64, 64],
                 anchor : [32, 25],
                 path : _beechcraft_svg
         },
 
-        medium : {
+        "A2" : {
-                scale : 0.4,
+                key : "A2",
+                scale : 0.35,
                 size : [64, 64],
                 anchor : [32, 32],
                 path : _generic_plane_svg
         },
 
-        heavy : {
+        "A3" : {
-                scale : 0.6,
+                key : "A3",
+                scale : 0.40,
+                size : [64, 64],
+                anchor : [32, 32],
+                path : _generic_plane_svg
+        },
+
+        "A5" : {
+                key : "A5",
+                scale : 0.73,
                 size : [64, 64],
                 anchor : [32, 32],
                 path : _heavy_svg
         },
 
-        rotorcraft : {
+        "A7" : {
-                scale : 0.5,
+                key : "A7",
+                scale : 0.50,
                 size : [64, 64],
                 anchor : [22, 32],
                 path : _rotorcraft_svg
         }
 };
 
+var DefaultIcon = {
+        key : "default",
+        scale : 0.4,
+        size : [64, 64],
+        anchor : [32, 32],
+        path : _generic_plane_svg
+};
+
+function getBaseMarker(category, type) {
+        if (type in TypeIcons) {
+                return TypeIcons[type];
+        }
+
+        if (category in CategoryIcons) {
+                return CategoryIcons[category];
+        }
+
+        return DefaultIcon;
+}
+
 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 + '"';

public_html/planeObject.js

@@ -226,22 +226,6 @@ PlaneObject.prototype.getDataSource = function() {
     return 'mode_s';
 };
 
-PlaneObject.prototype.getMarkerIconType = function() {
-        var lookup = {
-                'A1' : 'light',
-                'A2' : 'medium',
-                'A3' : 'medium',
-                'A5' : 'heavy',
-                'A7' : 'rotorcraft'
-
-        };
-
-        if (this.category === null || !(this.category in lookup))
-                return 'generic'
-        else
-                return lookup[this.category];
-}
-
 PlaneObject.prototype.getMarkerColor = function() {
         // Emergency squawks override everything else
         if (this.squawk in SpecialSquawks)
@@ -317,23 +301,23 @@ PlaneObject.prototype.updateIcon = function() {
         var col = this.getMarkerColor();
         var opacity = (this.position_from_mlat ? 0.75 : 1.0);
         var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
-        var type = this.getMarkerIconType();
+        var baseMarker = getBaseMarker(this.category, this.icaotype);
-        var weight = ((this.selected ? 2 : 1) / MarkerIcons[type].scale).toFixed(1);
+        var weight = ((this.selected ? 2 : 1) / baseMarker.scale).toFixed(1);
         var rotation = (this.track === null ? 0 : this.track);
 
-        var svgKey = col + '!' + outline + '!' + type + '!' + weight;
+        var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight;
         var styleKey = opacity + '!' + rotation;
 
         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({
-                        anchor: MarkerIcons[type].anchor,
+                        anchor: baseMarker.anchor,
                         anchorXUnits: 'pixels',
                         anchorYUnits: 'pixels',
-                        scale: MarkerIcons[type].scale,
+                        scale: baseMarker.scale,
-                        imgSize: MarkerIcons[type].size,
+                        imgSize: baseMarker.size,
-                        src: svgPathToURI(MarkerIcons[type].path, MarkerIcons[type].size, outline, weight, col),
+                        src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col),
                         rotation: rotation * Math.PI / 180.0,
                         opacity: opacity
                 });