From 307e06821056122a22e7ab8c087ba1afcd4346f5 Mon Sep 17 00:00:00 2001
From: Mattia Vidoni <vidonimattia@gmail.com>
Date: Sat, 28 May 2022 19:16:49 +0200
Subject: [PATCH 1/2] select item for planes, new plane icon etc

- Added new plane icon
- Added Select form for choose planes
- Map default coordinates changed based on client location
- Map changes coordinates based on plane location
---
 gmap.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 10 deletions(-)
diff --git a/gmap.html b/gmap.html
index 852c63dda..ecbb2b9a5 100644
--- a/gmap.html
+++ b/gmap.html
@@ -4,6 +4,8 @@
   <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=""/>
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+
     <style type="text/css">
       html { height: 100% }
       body { height: 100%; margin: 0; padding: 0 }
@@ -46,6 +48,11 @@
     Planes={};
     NumPlanes = 0;
     Selected=null
+    var options = {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0
+    };
 
     function getIconForPlane(plane) {
         var r = 255, g = 255, b = 0;
@@ -62,16 +69,16 @@
            systems but not all. */
         var he = document.createElement("P");
         he.innerHTML = '>';
-        var rotation = 45+360-plane.track;
+        var rotation = 90+360-plane.track;
         var selhtml = '';
 
         /* Give a border to the selected plane. */
         if (Selected == plane.hex) {
-            selhtml = 'border:1px dotted #0000aa; border-radius:10px;';
+            selhtml = 'border:3px dotted #0000aa; border-radius:5px;';
         } else {
             selhtml = '';
         }
-        he = '<div style="transform: rotate(-'+rotation+'deg); '+selhtml+'">✈️</div>';
+        he = '<div style="width: 200%; transform: rotate(-'+rotation+'deg); '+selhtml+'"><i class="fa fa-plane fa-2x" aria-hidden="true"></i></div>';
         var icon = L.divIcon({html: he, className: 'plane-icon'});
         return icon;
     }
@@ -84,6 +91,10 @@
             /* Remove the highlight in the previously selected plane. */
             Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
         }
+        Map.setView([Planes[planehex].lat, Planes[planehex].lon], 8);
+
+        //update selected plane
+        document.getElementById("planeSelect").value = Selected;
         Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected]));
         refreshSelectedInfo();
     }
@@ -100,7 +111,7 @@
         var i = document.getElementById('geninfo');
 
         i.innerHTML = NumPlanes+' planes on screen.';
-    }
+      }
 
     function refreshSelectedInfo() {
         var i = document.getElementById('selinfo');
@@ -118,6 +129,7 @@
     }
 
     function fetchData() {
+        var select = document.getElementById("planeSelect");
         $.getJSON('/data.json', function(data) {
             var stillhere = {}
             for (var j=0; j < data.length; j++) {
@@ -147,6 +159,13 @@
                     plane.marker = marker;
                     marker.planehex = plane.hex;
                     Planes[plane.hex] = plane;
+
+                    // create option for select
+                    var option = document.createElement("option");
+                    option.value = plane.hex;
+                    option.text = plane.flight;
+                    option.id = plane.hex;
+                    select.appendChild(option);
                 }
 
                 // FIXME: Set the title
@@ -159,7 +178,15 @@
 
             /* Remove idle planes. */
             for (var p in Planes) {
+                var selectPlane = document.getElementById(Planes[p].hex);
+
+                // update select names
+                if (selectPlane.text == "" && Planes[p].flight != ""){
+                    selectPlane.text = Planes[p].flight;
+                }
                 if (!stillhere[p]) {
+                    //remove plane from select
+                    selectPlane.remove();
                     Map.removeLayer(Planes[p].marker);
                     delete Planes[p];
                 }
@@ -167,15 +194,30 @@
         });
     }
 
+    function success(pos) {
+        var crd = pos.coords;
+        // change view to current position
+        Map.setView([crd.latitude, crd.longitude], 8)
+    }
+
+    function error(err) {
+        console.warn(`ERROR(${err.code}): ${err.message}`);
+    }
+
+
+
     function initialize() {
         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);
+        //try to get current position
+        navigator.geolocation.getCurrentPosition(success, error, options);
+
+        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() {
@@ -184,6 +226,12 @@
         }, 100);
     }
 
+    // on select change
+    function changed(){
+        var select = document.getElementById("planeSelect");
+        selectPlane(select.value);
+    }
+
     </script>
   </head>
   <body onload="initialize()">
@@ -193,6 +241,8 @@
         <h1>Dump1090</h1>
         <p id="geninfo"></p>
         <p id="selinfo">Click on a plane for info.</p>
+        <p>Select a Plane: <select id="planeSelect" onchange="changed()"></p>
+        </select>
       </div>
     </div>
   </body>

From d2147049b4173020989e5a2d08324cbb0156d79a Mon Sep 17 00:00:00 2001
From: Mattia Vidoni <vidonimattia@gmail.com>
Date: Mon, 30 May 2022 18:50:36 +0200
Subject: [PATCH 2/2] plane track, flight label

- Added Plane Track is a plane is selected
- Added Flight name if mouse is over a plane
- BugFix
---
 gmap.html | 49 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/gmap.html b/gmap.html
index ecbb2b9a5..c397661c6 100644
--- a/gmap.html
+++ b/gmap.html
@@ -43,8 +43,7 @@
     <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;
-    CenterLon=9.0;
+    line = null;
     Planes={};
     NumPlanes = 0;
     Selected=null
@@ -78,7 +77,7 @@
         } else {
             selhtml = '';
         }
-        he = '<div style="width: 200%; transform: rotate(-'+rotation+'deg); '+selhtml+'"><i class="fa fa-plane fa-2x" aria-hidden="true"></i></div>';
+        he = '<div><label hidden id="marker-'+plane.hex+'">'+plane.flight+'</label><div style="width: 200%; transform: rotate(-'+rotation+'deg); '+selhtml+'"><i class="fa fa-plane fa-2x" aria-hidden="true"></i></div></div>';
         var icon = L.divIcon({html: he, className: 'plane-icon'});
         return icon;
     }
@@ -91,7 +90,7 @@
             /* Remove the highlight in the previously selected plane. */
             Planes[old].marker.setIcon(getIconForPlane(Planes[old]));
         }
-        Map.setView([Planes[planehex].lat, Planes[planehex].lon], 8);
+        Map.setView([Planes[planehex].lat, Planes[planehex].lon], Map.getZoom());
 
         //update selected plane
         document.getElementById("planeSelect").value = Selected;
@@ -128,6 +127,22 @@
         i.innerHTML = html;
     }
 
+    function hoverPlaneCallback(hex, hide=true){
+        return function() {
+            return showFlight(hex, hide);
+        }
+    }
+
+    function showFlight(hex, hide){
+        var label = document.getElementById("marker-"+hex);
+
+        if (hide){
+            label.removeAttribute("hidden");
+        } else {
+            label.setAttribute("hidden", "hidden");
+        }
+    }
+
     function fetchData() {
         var select = document.getElementById("planeSelect");
         $.getJSON('/data.json', function(data) {
@@ -142,7 +157,6 @@
                     var myplane = Planes[plane.hex];
                     marker = myplane.marker;
                     marker.setLatLng([plane.lat,plane.lon]);
-                    marker.setIcon(getIconForPlane(plane));
                     myplane.altitude = plane.altitude;
                     myplane.speed = plane.speed;
                     myplane.lat = plane.lat;
@@ -156,8 +170,12 @@
                     var marker = L.marker([plane.lat, plane.lon], {icon: icon}).addTo(Map);
                     var hex = plane.hex;
                     marker.on('click',selectPlaneCallback(plane.hex));
+                    marker.on('mouseover', hoverPlaneCallback(plane.hex));
+                    marker.on('mouseout', hoverPlaneCallback(plane.hex, false));
                     plane.marker = marker;
                     marker.planehex = plane.hex;
+                    plane.pattern = [[plane.lat, plane.lon]];
+                    plane.oldTrack = plane.track;
                     Planes[plane.hex] = plane;
 
                     // create option for select
@@ -179,15 +197,18 @@
             /* Remove idle planes. */
             for (var p in Planes) {
                 var selectPlane = document.getElementById(Planes[p].hex);
+                var label = document.getElementById("marker-"+Planes[p].hex);
 
                 // update select names
                 if (selectPlane.text == "" && Planes[p].flight != ""){
                     selectPlane.text = Planes[p].flight;
+                    label.innerHTML = Planes[p].flight;
                 }
                 if (!stillhere[p]) {
                     //remove plane from select
                     selectPlane.remove();
                     Map.removeLayer(Planes[p].marker);
+                    line.setLatLngs([]);
                     delete Planes[p];
                 }
             }
@@ -204,10 +225,27 @@
         console.warn(`ERROR(${err.code}): ${err.message}`);
     }
 
+    function refreshLines(){
+        for (var p in Planes) {
+            var plane = Planes[p];
+            if (plane.track != plane.oldTrack){
+                plane.pattern.push([plane.lat, plane.lon]);
+                var rotation = 90+360-plane.track;
+                plane.marker._icon.style.transform = 'rotate(-'+rotation+'deg);';
+                plane.oldTrack = plane.track;
+            }
 
+            if (plane == Planes[Selected]){
+                var path = Array.from(plane.pattern);
+                path.push([plane.lat, plane.lon]);
+                line.setLatLngs(path);
+            }
+        }
+    }
 
     function initialize() {
         Map = L.map('map_canvas').setView([37.0, 13.0], 8);
+        line = L.polyline([]).addTo(Map);
 
         //try to get current position
         navigator.geolocation.getCurrentPosition(success, error, options);
@@ -223,6 +261,7 @@
         window.setInterval(function() {
             fetchData();
             refreshGeneralInfo();
+            refreshLines();
         }, 100);
     }
 
