Backups/dump1090
1
0
Fork 0
Code Actions Releases Wiki Activity

OSM: porting to Open Street Map, basic features.

Browse Source
This commit is contained in:
antirez 2020-02-02 18:18:27 +01:00
parent bf1f711166
commit 7df4e87994
1 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
gmap.html
View File

@ -3,9 +3,14 @@
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.plane-icon {
padding:0px;
margin:0px;
}
#map_canvas { height: 100% }
#info {
position: absolute;
@ -32,11 +37,8 @@
color:#333;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script type="text/javascript">
Map=null;
CenterLat=45.0;
@ -53,14 +55,21 @@
if (invalt < 0) invalt = 0;
b = parseInt(255/maxalt*invalt);
return {
strokeWeight: (selected ? 2 : 1),
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
fillColor: 'rgb('+r+','+g+','+b+')',
fillOpacity: 0.9,
rotation: plane.track
};
var he = document.createElement("P");
he.innerHTML = '>';
var rotation = plane.track+90;
he = '<div style="transform: rotate(-'+rotation+'deg);">✈️</div>';
var icon = L.divIcon({html: he, className: 'plane-icon'});
return icon;
// return {
// strokeWeight: (selected ? 2 : 1),
// path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
// scale: 5,
// fillColor: 'rgb('+r+','+g+','+b+')',
// fillOpacity: 0.9,
// rotation: plane.track
// };
}
function selectPlane() {
@ -108,9 +117,7 @@
if (Planes[plane.hex]) {
var myplane = Planes[plane.hex];
marker = myplane.marker;
var icon = marker.getIcon();
var newpos = new google.maps.LatLng(plane.lat, plane.lon);
marker.setPosition(newpos);
marker.setLatLng([plane.lat,plane.lon]);
marker.setIcon(getIconForPlane(plane));
myplane.altitude = plane.altitude;
myplane.speed = plane.speed;
@ -121,29 +128,28 @@
if (myplane.hex == Selected)
refreshSelectedInfo();
} else {
marker = new google.maps.Marker({
position: new google.maps.LatLng(plane.lat, plane.lon),
map: Map,
icon: getIconForPlane(plane)
});
var icon = getIconForPlane(plane);
var marker = L.marker([plane.lat, plane.lon], {icon: icon}).addTo(Map);
plane.marker = marker;
marker.planehex = plane.hex;
Planes[plane.hex] = plane;
/* Trap clicks for this marker. */
google.maps.event.addListener(marker, 'click', selectPlane);
// FIXME: google.maps.event.addListener(marker, 'click', selectPlane);
}
if (plane.flight.length == 0)
marker.setTitle(plane.hex)
else
marker.setTitle(plane.flight+' ('+plane.hex+')')
// FIXME: Set the title
// if (plane.flight.length == 0)
// marker.setTitle(plane.hex)
// else
// marker.setTitle(plane.flight+' ('+plane.hex+')')
}
NumPlanes = data.length;
/* Remove idle planes. */
for (var p in Planes) {
if (!stillhere[p]) {
Planes[p].marker.setMap(null);
Map.removeLayer(Planes[p].marker);
delete Planes[p];
}
}
@ -151,18 +157,20 @@
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(CenterLat, CenterLon),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Map = L.map('map_canvas').setView([37.0, 13.0], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'your.mapbox.access.token'
}).addTo(Map);
/* Setup our timer to poll from the server. */
window.setInterval(function() {
fetchData();
refreshGeneralInfo();
}, 1000);
}, 100);
}
</script>