86 lines
2.5 KiB
HTML
86 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet"
|
|
href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
|
|
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
|
|
<!-- script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script -->
|
|
<!-- script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script-->
|
|
<script src="../lib/props.js" type="text/javascript"></script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content="FlightGear - Map" />
|
|
|
|
</head>
|
|
<body>
|
|
<style>
|
|
html,body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid green;
|
|
}
|
|
</style>
|
|
<div id='map'></div>
|
|
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
|
type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
var map = new L.Map('map');
|
|
|
|
// var googleLayer = new L.Google('ROADMAP');
|
|
// map.addLayer(googleLayer);
|
|
|
|
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
minZoom : 6,
|
|
maxZoom : 15,
|
|
attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
|
|
});
|
|
|
|
map.addLayer(osm);
|
|
|
|
var aircraft = L.marker([53.5, 10.0]).addTo(map);
|
|
var latlng = new L.LatLng(53.5,10);
|
|
map.setView(latlng, 10);
|
|
|
|
function centerMap( lat, lon ) {
|
|
if( null != lat ) this.latlng.lat = lat;
|
|
else if( null != lon ) this.latlng.lng = lon;
|
|
}
|
|
|
|
var heading = 0;
|
|
var speed = 0;
|
|
function setSpeedVector( heading, speed ) {
|
|
if( null != heading ) this.heading = heading;
|
|
else if( null != speed ) this.speed = speed;
|
|
}
|
|
|
|
setInterval( function() {
|
|
this.map.setView(this.latlng);
|
|
this.aircraft.setLatLng( this.latlng );
|
|
var label = "<p id='aircraft-label'>" + this.heading + "@" + this.speed + "</p>";
|
|
this.aircraft.bindPopup( label );
|
|
}, 200 );
|
|
|
|
$(document).ready(function() {
|
|
PropertyChangeListener(function() {
|
|
SetListener("/position/latitude-deg", function(n) {
|
|
centerMap( n.value, null );
|
|
});
|
|
SetListener("/position/longitude-deg", function(n) {
|
|
centerMap( null, n.value );
|
|
});
|
|
SetListener("/orientation/heading-deg", function(n) {
|
|
setSpeedVector( n.value, null );
|
|
});
|
|
SetListener("/velocities/groundspeed-kt", function(n) {
|
|
setSpeedVector( null, n.value );
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|