From 7df4e879941b3f5f6fd883e606cad883f277872b Mon Sep 17 00:00:00 2001
From: antirez <antirez@gmail.com>
Date: Sun, 2 Feb 2020 18:18:27 +0100
Subject: [PATCH] OSM: porting to Open Street Map, basic features.

---
 gmap.html | 76 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 42 insertions(+), 34 deletions(-)
diff --git a/gmap.html b/gmap.html
index b39a30a..b4b3678 100644
--- a/gmap.html
+++ b/gmap.html
@@ -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>
