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