<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="description" content="FlightGear - Map" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="/img/FlightGear_logo.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="shortcut icon" sizes="200x200" href="/img/FlightGear_logo.png"> <link rel="icon" sizes="200x200" href="/img/FlightGear_logo.png"> <script src="../3rdparty/jquery/jquery-1.11.1.min.js" type="text/javascript"></script> <link rel="stylesheet" href="../3rdparty/leaflet-0.7.7/leaflet.css" /> <script src="../3rdparty/leaflet-0.7.7/leaflet.js" type="text/javascript"></script> <script src="../lib/fgfs.js" type="text/javascript"></script> <script src="FollowControl.js" type="text/javascript"></script> <script src="Marker.js" type="text/javascript"></script> <script src="NavdbLayer.js" type="text/javascript"></script> <title>FlightGear - Map</title> </head> <body> <style> html,body { height: 100%; margin: 0; padding: 0; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .aircraft-marker-icon { background-color: rgba(255,255,255,0); } .aircraft-marker-icon path { fill: #00ff00; } .aircraft-marker-popup .leaflet-popup-tip { display: none; } .aircraft-marker-popup .leaflet-popup-content-wrapper { background-color: rgba(255,255,255,0.50); } .aircraft-marker-popup .leaflet-popup-content { margin: 5px 5px; } .aircraft-marker-callsign,.aircraft-marker-altitude,.aircraft-marker-model,.aircraft-marker-gs { float: left; color: #00ff00; text-shadow: 1px 1px #404040; } .aircraft-marker-model,.aircraft-marker-gs { padding-left: 5px; } .aircraft-marker-altitude,.aircraft-marker-callsign { clear: both; } .followAircraft { background: white; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); border-radius: 5px; width: 36px; height: 36px; } </style> <div id='map'></div> <script type="text/javascript"> /* <![CDATA[ */ var propertyMirror = new FGFS.PropertyMirror([ [ "latitude", "/position/latitude-deg" ], [ "longitude", "/position/longitude-deg" ], [ "altitude", "/position/altitude-ft" ], [ "heading", "/orientation/heading-deg" ], [ "groundspeed", "/velocities/groundspeed-kt" ], [ "model", "/sim/model/path" ], [ "callsign", "/sim/multiplay/callsign" ], ]); var osmLayer = new L.TileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom : 18, attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }); var map = new L.Map('map', { center : [ 53.7, 10.0 ], zoom : 10, layers: [ osmLayer ], zoomControl: true, attributionControl: true, }); var navdbLayer = L.navdbLayer(); map.on('resize', function(e) { navdbLayer.invalidate(); }); map.on('zoomend', function(e) { navdbLayer.invalidate(); }); map.on('moveend', function(e) { navdbLayer.invalidate(); }); L.control.layers({ "OpenStreetMaps" : osmLayer, "MapQuest Satelite" : new L.TileLayer( 'http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', { maxZoom : 18, subdomains : [ '1', '2', '3', '4' ], attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>.' }), "MapQuest Roads" : new L.TileLayer( 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', { maxZoom : 18, subdomains : [ '1', '2', '3', '4' ], attribution : 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.' }), },{ // "NAVDB" : navdbLayer, // "AI" : aiLayer, "VFRMap.com Sectionals (US)" : new L.TileLayer( 'http://vfrmap.com/20140918/tiles/vfrc/{z}/{y}/{x}.jpg', { maxZoom : 12, minZoom : 3, attribution : '(c) <a href="VFRMap.com">VFRMap.com</a>', tms: true, opacity: 0.5, bounds: L.latLngBounds(L.latLng(16.0,-179.0), L.latLng(72.0,-60.0) ), }), "VFRMap.com - Low IFR (US)" : new L.TileLayer( 'http://vfrmap.com/20140918/tiles/ifrlc/{z}/{y}/{x}.jpg', { maxZoom : 12, minZoom : 5, attribution : '© <a href="VFRMap.com">VFRMap.com</a>', tms: true, opacity: 0.5, bounds: L.latLngBounds(L.latLng(16.0,-179.0), L.latLng(72.0,-60.0) ), }), "dfs.de VFR" : new L.TileLayer( 'https://secais.dfs.de/static-maps/ICAO500-2014-DACH-Reprojected_01/tiles/{z}/{x}/{y}.png', { minZoom : 5, maxZoom : 15, attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>', bounds: L.latLngBounds(L.latLng(46.0,5.0), L.latLng(55.1,16.5) ), }), "Lower Airspace (Germany)" : new L.TileLayer( 'https://secais.dfs.de/static-maps/lower_20131114/tiles/{z}/{x}/{y}.png', { minZoom : 5, maxZoom : 15, attribution : 'Map data © <a href="http://www.dfs.de">DFS</a>', bounds: L.latLngBounds(L.latLng(46.0,5.0), L.latLng(55.1,16.5) ), }), "NavDB" : navdbLayer, "Precipitation" : new L.TileLayer( 'http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', { maxZoom : 14, minZoom : 0, subdomains : '12', format : 'image/png', transparent : true, opacity : 0.5 }), "Isobares" : new L.TileLayer( 'http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', { maxZoom : 7, minZoom : 0, subdomains : '12', format : 'image/png', transparent : true, opacity : 0.5 }), }).addTo(map); var followAircraft = L.followControl({ cssClass: 'followAircraft', innerHTML: '<img src="images/followAircraft.svg" title="Center Map on Aircraft Position" />', getPosition: function() { return L.latLng(propertyMirror.getNode("latitude").getNumValue(), propertyMirror.getNode("longitude").getNumValue() ); }, }); followAircraft.addTo(map); map.on('dragstart', function(e) { followAircraft.setFollow(false); }); var aircraftMarker = L.aircraftMarker( L.latLng(53.6,10.1), { getProperties:function() { var model = propertyMirror.getNode("model").getStringValue(""); model = model.slice( model.lastIndexOf('/')+1 ); model = model.slice( 0, model.lastIndexOf('.') ); var callsign = propertyMirror.getNode("callsign").getStringValue("You!"); if( callsign == 'callsign' ) callsign = "You!"; return { "model": model, "callsign": callsign, "altitude": Math.round(propertyMirror.getNode("altitude").getNumValue()/100), "speed": Math.round(propertyMirror.getNode("groundspeed").getNumValue()), "heading": Math.round(propertyMirror.getNode("heading").getNumValue()), "position": L.latLng( propertyMirror.getNode("latitude").getNumValue(), propertyMirror.getNode("longitude").getNumValue() ), }; }, updateInterval: 100, }); aircraftMarker.addTo(map); /* ]]> */ </script> </body> </html>