fgdata/webgui/map/Marker.js

L.RotatedMarker = L.Marker.extend({

  options : {
    angle : 0
  },

  _setPos : function(pos) {
    L.Marker.prototype._setPos.call(this, pos);

    if (L.DomUtil.TRANSFORM) {
      // use the CSS transform rule if available
      this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
    } else if (L.Browser.ie) {
      // fallback for IE6, IE7, IE8
      var rad = this.options.angle * (Math.PI / 180), costheta = Math.cos(rad), sintheta = Math.sin(rad);
      this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' + costheta
          + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
    }
  },

  initialize: function(latlng,options) {
    L.Marker.prototype.initialize(latlng,options);
    if( options )
      L.Util.setOptions(this,options);
  },

});

L.rotatedMarker = function(pos,options) {
  return new L.RotatedMarker(pos,options);
}

L.AircraftMarker = L.RotatedMarker.extend({
  options : {
    angle : 0,
    clickable: false,
    keyboard: false,
    getProperties:function() {
      return {};
    },
    icon : L.divIcon({
      iconSize : [ 60, 60 ],
      iconAnchor : [ 30, 30 ],
      className: 'aircraft-marker-icon',
      html:  '<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"><path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z" fill="#808080" stroke="black" stroke-width="5"/></svg>',
    }),
    zIndexOffset : 10000,
    updateInterval: 100,
  },

  initialize: function(latlng,options) {
    L.RotatedMarker.prototype.initialize(latlng,options);
    L.Util.setOptions(this,options);
  },

  onAdd: function( map ) {
    L.RotatedMarker.prototype.onAdd.call(this,map);
    this.popup = L.popup( {
      autoPan: false,
      keepInView: false,
      closeButton: false,
      className:   'aircraft-marker-popup',
      closeOnClick: false,
      maxWidth: 200,
      minWidth: 100,
      offset: [30,30],
    }, this );
    this.popup.setContent("");
    this.bindPopup( this.popup );
    this.addTo(this._map);
    this.openPopup();

    this.timeout();
  },

  onRemove: function( map ) {
    if( this.timeoutid != null )
      clearTimeout(this.timeoutid);
    L.RotatedMarker.prototype.onRemove.call(this,map);
  },

  timeoutid: null,
  timeout: function() {
    var props = this.options.getProperties.call(this);
    var popup = 
      '<div class="aircraft-marker-callsign">' +  props.callsign + '</div>' +
      '<div class="aircraft-marker-model">' + props.model + '</div>' +
      '<div class="aircraft-marker-altitude">' + props.altitude + '</div>' +
      '<div class="aircraft-marker-gs">' + props.speed + '</div><div style="clear: both"/>';
    this.popup.setContent(popup);

    this.options.angle = props.heading;
//    this.options.title = props.callsign + ' Heading ' + props.heading + '°';
//    this.options.alt = this.options.title;
    this.setLatLng( props.position );
    var that = this;
    this.timeoutid = setTimeout( function() { that.timeout(); }, this.options.updateInterval );
  },
});

L.aircraftMarker = function(latlng,options) {
  return new L.AircraftMarker(latlng,options);
}