GPS arrow and Compass

static/css/leaflet-gps.min.css

@@ -0,0 +1,18 @@
+/* 
+ * Leaflet Control GPS v1.1.0 - 2016-06-14 
+ * 
+ * Copyright 2016 Stefano Cudini 
+ * stefano.cudini@gmail.com 
+ * http://labs.easyblog.it/ 
+ * 
+ * Licensed under the MIT license. 
+ * 
+ * Demos: 
+ * http://labs.easyblog.it/maps/leaflet-gps/ 
+ * 
+ * Source: 
+ * git@github.com:stefanocudini/leaflet-gps.git 
+ * 
+ */
+
+.leaflet-container .leaflet-control-gps{position:relative;float:left;background:#fff;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:rgba(255,255,255,.8);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin-left:10px;margin-top:10px}.leaflet-control-gps .gps-button{display:block;float:left;width:26px;height:26px;background:url(../img/gps-icon.png) no-repeat 2px 2px;border-radius:4px}.leaflet-control-gps .gps-button.active:hover,.leaflet-control-gps .gps-button:hover{background:url(../img/gps-icon.png) no-repeat 2px -24px #fff}.leaflet-control-gps .gps-button.active{background:url(../img/gps-icon.png) no-repeat 2px -50px #fff}.leaflet-control-gps .gps-alert{position:absolute;left:26px;bottom:-1px;width:100px;padding:2px;line-height:.95em;color:#e00;border:1px solid #888;background-color:rgba(255,255,255,.75);border-radius:4px}

static/js/leaflet.rotatedMarker.js

@@ -0,0 +1,50 @@
+(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 iconAnchor = 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;
+    });
+
+    L.Marker.include({
+        _initIcon: function() {
+            proto_initIcon.call(this);
+        },
+
+        _setPos: function (pos) {
+            proto_setPos.call(this, pos);
+
+            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;
+        }
+    });
+})();

templates/newmap.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Pokeminer - {{ area_name }}</title>
     <link rel="stylesheet" href="/static/css/leaflet-1.0.0-rc.3.css">
+    <link rel="stylesheet" href="/static/css/leaflet-gps.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <style>
         .map {
@@ -14,28 +15,6 @@
             left: 0;
             z-index: 100;
         }
-        .my-location {
-            z-index: 1000;
-            position: absolute;
-            bottom: 30px;
-            left: 10px;
-            padding: 10px;
-            box-sizing: border-box;
-            background-color: #fff;
-            background-image: url(/static/img/my-location.png);
-            background-size: 24px 24px;
-            background-position: 4px 4px;
-            background-repeat: no-repeat;
-            text-align: center;
-            width: 32px;
-            height: 32px;
-            border-radius: 4px;
-            box-shadow: 0 1px 5px rgba(0,0,0,0.65);
-            cursor: pointer;
-        }
-        .my-location:hover {
-            background-color: #f4f4f4;
-        }
         .fort-icon {
             border-radius: 12px;
             padding: 2px;
@@ -49,13 +28,13 @@
 </head>
 <body>
     <h1>Pokeminer is initializing, please wait.</h1>
-
     <div id="main-map" class="map"></div>
 
-    <a class="my-location"></a>
-
     <script src="/static/js/jquery-3.1.0.min.js"></script>
     <script src="/static/js/leaflet-1.0.0-rc.3.min.js"></script>
+    <script src="/static/js/leaflet.rotatedMarker.js"></script>
+    <script src="/static/js/leaflet-gps.min.js"></script>
+    <script src="/static/js/compass.js"></script>
     <script>
         var PokemonIcon = L.Icon.extend({
             options: {
@@ -219,18 +198,30 @@ <h1>Pokeminer is initializing, please wait.</h1>
                 loadWorkersLayer();
             }
         });
-        L.tileLayer('{{ map_provider_url }}', {
+        map.addLayer(new L.tileLayer('{{ map_provider_url }}', {
             opacity: 0.5,
             attribution: '{{ map_provider_attribution|safe }}'
-        }).addTo(map);
+        }));
+        var gpsMarker = new L.marker([0, 0], {
+            icon: new L.icon({
+                iconUrl:    '/static/img/yellow-team.svg',
+                iconSize:   [24, 24],
+                iconAnchor: [12, 9]
+            }),
+            rotationAngle: 180,
+            rotationOrigin: '50% 37.5%'
+        });
+        map.addControl(new L.Control.Gps({
+            marker: gpsMarker,
+            position: 'bottomleft'
+        }));
         map.whenReady(function () {
-            $('.my-location').on('click', function () {
-                map.locate({ enableHighAccurracy: true, setView: true });
-            });
-
             setInterval(refresh, 30000);
             refresh();
         });
+        Compass.watch(function (heading) {
+          gpsMarker.setRotationAngle(heading - 180);
+        });
     </script>
 </body>
 </html>