sdrweb: add trails to map, fix marker icon positioning

hosts/containers/sdrweb/adsb.html

@@ -68,8 +68,8 @@
              } else {
                  selhtml = '';
              }
-             he = '<img src="airplane.svg" width="64" height="64" style="transform: scale('+b+') rotate(-'+rotation+'deg);'+selhtml+'" title="' + plane.flight + ' (' + plane.hex + ')">';
-             var icon = L.divIcon({html: he, className: 'plane-icon'});
+             he = '<img src="airplane.svg" width="' + Math.ceil(b * 64) + '" height="' + Math.ceil(b * 64) + '" style="transform: scale('+b+') rotate(-'+rotation+'deg);'+selhtml+'" title="' + plane.flight + ' (' + plane.hex + ')">';
+             var icon = L.divIcon({html: he, className: 'plane-icon', iconSize: [b*64,b*64], iconAnchor: [b*32,b*32]});
              return icon;
          }
 
@@ -126,9 +126,11 @@
                      if (Planes[plane.hex]) {
                          var myplane = Planes[plane.hex];
                          marker = myplane.marker;
-                         if (plane.lat && plane.lon)
-                             marker.setLatLng([plane.lat,plane.lon]);
                          marker.setIcon(getIconForPlane(plane));
+                         if (plane.lat && plane.lon) {
+                             marker.setLatLng([plane.lat,plane.lon]);
+                             myplane.trail.addLatLng([plane.lat,plane.lon]);
+                         }
                          myplane.altitude = plane.altitude;
                          myplane.speed = plane.speed;
                          myplane.lat = plane.lat;
@@ -139,10 +141,18 @@
                              refreshSelectedInfo();
                      } else if (plane.lat && plane.lon) {
                          var icon = getIconForPlane(plane);
-                         var marker = L.marker([plane.lat, plane.lon], {icon: icon}).addTo(Map);
+                         var marker = L.marker(
+                             [plane.lat, plane.lon],
+                             {icon: icon}
+                         ).addTo(Map);
+                         var trail = L.polyline(
+                             [[plane.lat, plane.lon]],
+                             { color: "#0000FF", weight: 5, opacity: 0.4 }
+                         ).addTo(Map);
                          var hex = plane.hex;
                          marker.on('click',selectPlaneCallback(plane.hex));
                          plane.marker = marker;
+                         plane.trail = trail;
                          marker.planehex = plane.hex;
                          Planes[plane.hex] = plane;
                      }
@@ -153,6 +163,7 @@
                  for (var p in Planes) {
                      if (!stillhere[p]) {
                          Map.removeLayer(Planes[p].marker);
+                         /* Map.removeLayer(Planes[p].trail); */
                          delete Planes[p];
                      }
                  }
@@ -160,9 +171,7 @@
                  refreshGeneralInfo();
 
              }).always(function() {
-                 setTimeout(function() {
-                     window.requestAnimationFrame(fetchData);
-                 }, 500);
+                 setTimeout(fetchData, 500);
              });
          }
 

hosts/containers/sdrweb/airplane.svg

@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 375" style="enable-background:new 0 0 300 300;" xml:space="preserve"><g><g><path d="M149.997,0C67.158,0,0.003,67.161,0.003,149.997S67.158,300,149.997,300s150-67.163,150-150.003S232.837,0,149.997,0z     M222.978,99.461l-32.435,30.711l20.562,82.844l-12.27,12.27l-39.262-64.028l-0.905-0.905l-40.385,38.24    c-0.228,0.231-0.485,0.405-0.718,0.622l-1.297,29.481l-44.965-44.962l29.471-1.294c0.218-0.239,0.394-0.493,0.625-0.724    l38.24-40.387L139.314,141l-64.601-39.832l12.27-12.27l82.471,20.946l31.079-32.827c6.201-6.201,16.251-6.199,22.447,0    C229.177,83.215,229.177,93.263,222.978,99.461z"/></g></g><text x="0" y="315" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by egi enggryawan</text><text x="0" y="320" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path d="m150 0c-82.84 0-150 67.16-150 150s67.16 150 150 150 150-67.16 150-150-67.16-150-150-150zm72.98 99.46-32.44 30.71 20.56 82.84-12.27 12.27-39.26-64.03-.905-.905-40.38 38.24c-.228.231-.485.405-.718.622l-1.297 29.48-44.96-44.96 29.47-1.294c.218-.239.394-.493.625-.724l38.24-40.39-.325-.329-64.6-39.83 12.27-12.27 82.47 20.95 31.08-32.83c6.201-6.201 16.25-6.199 22.45 0 6.197 6.198 6.197 16.25-.002 22.44z"/></svg>