Port webpage from Google Maps to leaflet

#27
mhostetter · Aug 2, 2019 · c0f6ffd · c0f6ffd
1 parent 8516a25
commit c0f6ffd
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 276 deletions.
diff --git a/web/static/img/airliner.png b/web/static/img/airliner.png
diff --git a/web/static/index.html b/web/static/index.html
@@ -1,16 +1,16 @@
 <!--
- Copyright 2016-2017 Matt Hostetter.
- 
+ Copyright 2016-2019 Matt Hostetter.
+
  This is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 3, or (at your option)
  any later version.
- 
+
  This software is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
- 
+
  You should have received a copy of the GNU General Public License
  along with this software; see the file COPYING.  If not, write to
  the Free Software Foundation, Inc., 51 Franklin Street,
@@ -19,35 +19,26 @@
 
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>gr-adsb</title>
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
-    <meta charset="utf-8">
-    <style>
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-      }
-      #map {
-        height: 100%;
-      }
-      #colorbar {
-        position: absolute;
-        top: 40px;
-        left: 10px;
-        z-index: 99;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="map">  
-    </div>
-<!--     <div id="colorbar">
-      <img src="./img/colorbar.png" align="middle">
-    </div> -->
-    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
-    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>
-    <script src="./js/map.js"></script>
-  </body>
-</html>
+<head>
+  <title>gr-adsb</title>
+  <meta charset="utf-8"/>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    #map {
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
+  <script src="./js/leaflet.rotatedMarker.js"></script>
+  <script src="./js/map.js"></script>
+</body>
+</html>
diff --git a/web/static/js/leaflet.rotatedMarker.js b/web/static/js/leaflet.rotatedMarker.js
@@ -0,0 +1,62 @@
+//
+// Credit: bbecquet
+// Github: https://github.com/bbecquet/Leaflet.RotatedMarker
+//
+
+(function() {
+    // save these original methods before they are overwritten
+    var proto_initIcon = L.Marker.prototype._initIcon;
+    var proto_setPos = L.Marker.prototype._setPos;
+
+    var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
+
+    L.Marker.addInitHook(function () {
+        var iconOptions = this.options.icon && this.options.icon.options;
+        var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
+        if (iconAnchor) {
+            iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
+        }
+        this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ;
+        this.options.rotationAngle = this.options.rotationAngle || 0;
+
+        // Ensure marker keeps rotated during dragging
+        this.on('drag', function(e) { e.target._applyRotation(); });
+    });
+
+    L.Marker.include({
+        _initIcon: function() {
+            proto_initIcon.call(this);
+        },
+
+        _setPos: function (pos) {
+            proto_setPos.call(this, pos);
+            this._applyRotation();
+        },
+
+        _applyRotation: function () {
+            if(this.options.rotationAngle) {
+                this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;
+
+                if(oldIE) {
+                    // for IE 9, use the 2D rotation
+                    this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
+                } else {
+                    // for modern browsers, prefer the 3D accelerated version
+                    this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
+                }
+            }
+        },
+
+        setRotationAngle: function(angle) {
+            this.options.rotationAngle = angle;
+            this.update();
+            return this;
+        },
+
+        setRotationOrigin: function(origin) {
+            this.options.rotationOrigin = origin;
+            this.update();
+            return this;
+        }
+    });
+})();