fly/fgdata
1
0
Fork 0
Code Activity

Add a simple OSM-based moving map

Browse source
This commit is contained in:
Torsten Dreyer 2014-03-17 16:40:33 +01:00
parent 37e6c44815
commit 65050e5367
1 changed files with 86 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
webgui/map/index.html Normal file
View file

@ -0,0 +1,86 @@
<!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>