Phi: map improvements

- make the AircraftMarker CSS style-able
- assing individual styles to AI, multiplayer and own aircraft

Phi/topics/Map/AILayer.js

@@ -10,6 +10,15 @@
     }
 }(function(ko, leaflet, SGPropertyNode ) {
 
+    var AITypeToCssClassMap = {
+            aircraft: "ai-aircraft-marker-icon",
+            multiplayer: "mp-aircraft-marker-icon"
+    }
+
+    function formatFL(num) {
+      return "F" + ("000" + (num/100).toFixed(0)).substr(-3,3);
+    }
+
     function ViewModel(h,l1,l2) {
         var self = this;
 
@@ -29,8 +38,8 @@
                 if (feature.properties.type == "aircraft" || feature.properties.type == "multiplayer") {
                       var l1 = feature.properties.callsign,
                           l2 = feature.properties.heading + 'T ' + feature.properties.speed + 'KTAS ' + 
-                               'F' + (feature.geometry.coordinates[2]/100).toFixed(0);
+                               formatFL(feature.geometry.coordinates[2]);
-                      var m = L.aircraftMarker(latlng);
+                      var m = L.aircraftMarker(latlng, { className: AITypeToCssClassMap[feature.properties.type] } );
                       m.on('add', function(e) {
                           ko.applyBindings( new ViewModel(feature.properties.heading,l1,l2), e.target._icon);
                       });

Phi/widgets/AircraftMarker.html

@@ -1,7 +1,6 @@
 <div data-bind="
   html: iconSvg, 
   style: {
-    color: 'red',
     transform: transformCss(),
     '-webkit-transform': transformCss(),
     '-ms-transform': transformCss(),

Phi/widgets/map.html

@@ -3,10 +3,40 @@
 	background-color: rgba(255, 255, 255, 0);
 }
 
-.aircraft-marker-icon path {
+.you-aircraft-marker-icon {
+    width: 60px;
+    height: 60px;
+    margin-left: -30px;
+    margin-top: -30px;
+}
+
+.you-aircraft-marker-icon path {
 	fill: rgba(0, 255, 0, 0.4);
 }
 
+.ai-aircraft-marker-icon {
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+}
+
+.ai-aircraft-marker-icon path {
+    fill: rgba(255, 255, 0, 0.4);
+}
+
+.mp-aircraft-marker-icon {
+    width: 30px;
+    height: 30px;
+    margin-left: -15px;
+    margin-top: -15px;
+}
+
+.mp-aircraft-marker-icon path {
+    fill: rgba(255, 0, 0, 0.4);
+}
+
+
 .aircraft-marker {
 	float: left;
 	color: #00ff00;

Phi/widgets/map.js

@@ -3,34 +3,33 @@ define(
                 'knockout', 'jquery', 'leaflet', 'text!./map.html'
         ],
         function(ko, jquery, leaflet, htmlString ) {
+//TODO: Don't extend Marker but Icon
+
             if( !L.AircraftMarker ) {
                 L.AircraftMarker = L.Marker
                         .extend({
                             options : {
                                 clickable : false,
                                 keyboard : false,
-                                icon : L
+                                zIndexOffset : 10000,
-                                        .divIcon({
+                            },
-                                            iconSize : [
+
-                                                    60, 60
+                            initialize : function(latlng, options) {
-                                            ],
+                                var extraIconClass = '';
-                                            iconAnchor : [
+                                if( options && options.className ) {
-                                                    30, 30
+                                    extraIconClass = ' ' + options.className;
-                                            ],
+                                }
-                                            className : 'aircraft-marker-icon',
+                                L.Marker.prototype.initialize(latlng, options);
+                                L.Util.setOptions(this, options);
+                                this.setIcon( L.divIcon({
+                                            iconSize: null,
+                                            className : 'aircraft-marker-icon' + extraIconClass,
                                             html :
                                               '<div data-bind="component: { ' +
                                                 'name: \'AircraftMarker\', ' +
                                                 'params: { rotate: heading, label: labelLines } ' +
                                               '}"></div>',
-                                        }),
+                                        }));
-                                zIndexOffset : 10000,
-                                updateInterval : 100,
-                            },
-
-                            initialize : function(latlng, options) {
-                                L.Marker.prototype.initialize(latlng, options);
-                                L.Util.setOptions(this, options);
                             },
 
                         });
@@ -129,7 +128,7 @@ define(
                   L.control.scale(params.scale).addTo(self.map);
                 }
 
-                var aircraftMarker = L.aircraftMarker(self.map.getCenter());
+                var aircraftMarker = L.aircraftMarker(self.map.getCenter(), { className: 'you-aircraft-marker-icon' });
 
                 aircraftMarker.addTo(self.map);