ajb413/index.html

## index.html
<!DOCTYPE html>
<head>
    <title>EON Flight Map</title>
    <script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css" />
</head>

<body>
    <div class="col-md-12">
        <div id='map' class="map" style="height:500px;"></div>
    </div>
</body>
<script>
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 * L.LatLng.DEG_TO_RAD,
                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 + ')';
        }

    }
});

var pn = new PubNub({
    publishKey: 'pub-c-923938f1-a4c1-4253-b15a-9c24087904c9',
    subscribeKey: 'sub-c-bd9ab0d6-6e02-11e5-8d3b-0619f8945a4f',
    ssl: (('https:' == document.location.protocol) ? true : false)
});

var map = eon.map({
    pubnub: pn,
    id: 'map',
    mbId: 'ianjennings.lec06po7',
    mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
    channels: ['sfo-flight-data'],
    rotate: true,
    history: true,
    marker: function(latlng, data) {

        var marker = new L.RotatedMarker(latlng, {
            icon: L.icon({
                iconUrl: 'https://www.pubnub.com/wp-content/uploads/2016/05/airplane.png',
                iconSize: [24, 24]
            })
        });

        var popup = '';
        if (data[1]) {
            popup = 'Flight <strong>' + data[1] + '</strong>';
        }
        if (data[2]) {
            if (!popup.length) {
                popup = 'Flight from ' + data[2];
            } else {
                popup += ' from ' + data[2];
            }
        }
        if (data[12]) {
            if (!popup.length) {
                popup = 'Flight to ' + data[12];
            } else {
                popup += ' to ' + data[12];
            }
        }
        if (!popup.length) {
            var popup = 'No data available';
        }

        marker.bindPopup(popup);

        return marker;
    }
});
</script>

</html>
	<!DOCTYPE html>
	<head>
	<title>EON Flight Map</title>
	<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
	<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css" />
	</head>

	<body>
	<div class="col-md-12">
	<div id='map' class="map" style="height:500px;"></div>
	</div>
	</body>
	<script>
	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 * L.LatLng.DEG_TO_RAD,
	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 + ')';
	}

	}
	});

	var pn = new PubNub({
	publishKey: 'pub-c-923938f1-a4c1-4253-b15a-9c24087904c9',
	subscribeKey: 'sub-c-bd9ab0d6-6e02-11e5-8d3b-0619f8945a4f',
	ssl: (('https:' == document.location.protocol) ? true : false)
	});

	var map = eon.map({
	pubnub: pn,
	id: 'map',
	mbId: 'ianjennings.lec06po7',
	mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
	channels: ['sfo-flight-data'],
	rotate: true,
	history: true,
	marker: function(latlng, data) {

	var marker = new L.RotatedMarker(latlng, {
	icon: L.icon({
	iconUrl: 'https://www.pubnub.com/wp-content/uploads/2016/05/airplane.png',
	iconSize: [24, 24]
	})
	});

	var popup = '';
	if (data[1]) {
	popup = 'Flight <strong>' + data[1] + '</strong>';
	}
	if (data[2]) {
	if (!popup.length) {
	popup = 'Flight from ' + data[2];
	} else {
	popup += ' from ' + data[2];
	}
	}
	if (data[12]) {
	if (!popup.length) {
	popup = 'Flight to ' + data[12];
	} else {
	popup += ' to ' + data[12];
	}
	}
	if (!popup.length) {
	var popup = 'No data available';
	}

	marker.bindPopup(popup);

	return marker;
	}
	});
	</script>

	</html>