From 0f266b1fda0942102fbe8c72ad034db155d3888b Mon Sep 17 00:00:00 2001 From: Patrik Dikant Date: Tue, 23 Aug 2016 16:25:08 +0200 Subject: [PATCH] GPS arrow and Compass --- static/css/leaflet-gps.min.css | 18 +++++ static/img/gps-icon.png | Bin 0 -> 5657 bytes static/img/yellow-team.svg | 117 +++++++++++++++++++++++++++++ static/js/compass.js | 1 + static/js/leaflet-gps.min.js | 17 +++++ static/js/leaflet.rotatedMarker.js | 50 ++++++++++++ templates/newmap.html | 53 ++++++------- 7 files changed, 225 insertions(+), 31 deletions(-) create mode 100644 static/css/leaflet-gps.min.css create mode 100644 static/img/gps-icon.png create mode 100644 static/img/yellow-team.svg create mode 100644 static/js/compass.js create mode 100644 static/js/leaflet-gps.min.js create mode 100644 static/js/leaflet.rotatedMarker.js diff --git a/static/css/leaflet-gps.min.css b/static/css/leaflet-gps.min.css new file mode 100644 index 0000000000..b6c65388cb --- /dev/null +++ b/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} \ No newline at end of file diff --git a/static/img/gps-icon.png b/static/img/gps-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ddc1c3a6ce26e3741c938b4b3d78fe3de2569e30 GIT binary patch literal 5657 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 literal 0 HcmV?d00001 diff --git a/static/img/yellow-team.svg b/static/img/yellow-team.svg new file mode 100644 index 0000000000..3e7ea67b24 --- /dev/null +++ b/static/img/yellow-team.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/js/compass.js b/static/js/compass.js new file mode 100644 index 0000000000..3368d4c5a1 --- /dev/null +++ b/static/js/compass.js @@ -0,0 +1 @@ +(function(e){"use strict";var t=function(t){return t!=null||t!=e},n=function(e,t){var n=i._callbacks[e];for(var r=0;re.length-6;n--)t+=e[n];return t/5},i=window.Compass={method:e,watch:function(e){var t=++i._lastId;return i.init(function(n){if(n=="phonegap")i._watchers[t]=i._nav.compass.watchHeading(e);else if(n=="webkitOrientation"){var r=function(t){e(t.webkitCompassHeading)};i._win.addEventListener("deviceorientation",r),i._watchers[t]=r}else if(n=="orientationAndGPS"){var s,r=function(t){s=-t.alpha+i._gpsDiff,s<0?s+=360:s>360&&(s-=360),e(s)};i._win.addEventListener("deviceorientation",r),i._watchers[t]=r}}),t},unwatch:function(e){return i.init(function(t){t=="phonegap"?i._nav.compass.clearWatch(i._watchers[e]):(t=="webkitOrientation"||t=="orientationAndGPS")&&i._win.removeEventListener("deviceorientation",i._watchers[e]),delete i._watchers[e]}),i},needGPS:function(e){return i._callbacks.needGPS.push(e),i},needMove:function(e){return i._callbacks.needMove.push(e),i},noSupport:function(e){return i.method===!1?e():t(i.method)||i._callbacks.noSupport.push(e),i},init:function(e){if(t(i.method)){e(i.method);return}i._callbacks.init.push(e);if(i._initing)return;return i._initing=!0,i._nav.compass?i._start("phonegap"):i._win.DeviceOrientationEvent?(i._checking=0,i._win.addEventListener("deviceorientation",i._checkEvent),setTimeout(function(){i._checking!==!1&&i._start(!1)},500)):i._start(!1),i},_lastId:0,_watchers:{},_win:window,_nav:navigator,_callbacks:{init:[],noSupport:[],needGPS:[],needMove:[]},_initing:!1,_gpsDiff:e,_start:function(e){i.method=e,i._initing=!1,n("init",[e]),i._callbacks.init=[],e===!1&&n("noSupport",[]),i._callbacks.noSupport=[]},_checking:!1,_checkEvent:function(e){i._checking+=1;var n=!1;t(e.webkitCompassHeading)?i._start("webkitOrientation"):t(e.alpha)&&i._nav.geolocation?i._gpsHack():i._checking>1?i._start(!1):n=!0,n||(i._checking=!1,i._win.removeEventListener("deviceorientation",i._checkEvent))},_gpsHack:function(){var e=!0,s=[],o=[];n("needGPS");var u=function(e){s.push(e.alpha)};i._win.addEventListener("deviceorientation",u);var a=function(a){var f=a.coords;if(!t(f.heading))return;e&&(e=!1,n("needMove")),f.speed>1?(o.push(f.heading),o.length>=5&&s.length>=5&&(i._win.removeEventListener("deviceorientation",u),i._nav.geolocation.clearWatch(l),i._gpsDiff=r(o)+r(s),i._start("orientationAndGPS"))):o=[]},f=function(){i._win.removeEventListener("deviceorientation",u),i._start(!1)},l=i._nav.geolocation.watchPosition(a,f,{enableHighAccuracy:!0})}}})(); \ No newline at end of file diff --git a/static/js/leaflet-gps.min.js b/static/js/leaflet-gps.min.js new file mode 100644 index 0000000000..a65fc6e8b6 --- /dev/null +++ b/static/js/leaflet-gps.min.js @@ -0,0 +1,17 @@ +/* + * 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 + * + */ +(function(){L.Control.Gps=L.Control.extend({includes:L.Mixin.Events,options:{autoActive:!1,autoCenter:!1,maxZoom:null,textErr:null,callErr:null,style:{radius:5,weight:2,color:"#c20",opacity:1,fillColor:"#f23",fillOpacity:1},marker:null,accuracy:!0,title:"Center map on your location",position:"topleft",transform:function(a){return a},setView:!1},initialize:function(a){a&&a.style&&(a.style=L.Util.extend({},this.options.style,a.style)),L.Util.setOptions(this,a),this._errorFunc=this.options.callErr||this.showAlert,this._isActive=!1,this._firstMoved=!1,this._currentLocation=null},onAdd:function(a){this._map=a;var b=L.DomUtil.create("div","leaflet-control-gps");return this._button=L.DomUtil.create("a","gps-button",b),this._button.href="#",this._button.title=this.options.title,L.DomEvent.on(this._button,"click",L.DomEvent.stop,this).on(this._button,"click",this._switchGps,this),this._alert=L.DomUtil.create("div","gps-alert",b),this._alert.style.display="none",this._gpsMarker=this.options.marker?this.options.marker:new L.CircleMarker([0,0],this.options.style),this._map.on("locationfound",this._drawGps,this).on("locationerror",this._errorGps,this),this.options.autoActive&&this.activate(),b},onRemove:function(a){this.deactivate()},_switchGps:function(){this._isActive?this.deactivate():this.activate()},getLocation:function(){return this._currentLocation},activate:function(){this._isActive=!0,this._map.addLayer(this._gpsMarker),this._map.locate({enableHighAccuracy:!0,watch:!0,setView:this.options.setView,maxZoom:this.options.maxZoom})},deactivate:function(){this._isActive=!1,this._firstMoved=!1,this._map.stopLocate(),L.DomUtil.removeClass(this._button,"active"),this._map.removeLayer(this._gpsMarker),this.fire("gpsdisabled")},_drawGps:function(a){this._currentLocation=this.options.transform(a.latlng),this._gpsMarker.setLatLng(this._currentLocation),!this._isActive||this._firstMoved&&!this.options.autoCenter||this._moveTo(this._currentLocation),this.fire("gpslocated",{latlng:this._currentLocation,marker:this._gpsMarker}),L.DomUtil.addClass(this._button,"active")},_moveTo:function(a){this._firstMoved=!0,this.options.maxZoom?this._map.setView(a,Math.min(this._map.getZoom(),this.options.maxZoom)):this._map.panTo(a)},_errorGps:function(a){this.deactivate(),this._errorFunc.call(this,this.options.textErr||a.message)},showAlert:function(a){this._alert.style.display="block",this._alert.innerHTML=a;var b=this;clearTimeout(this.timerAlert),this.timerAlert=setTimeout(function(){b._alert.style.display="none"},2e3)}}),L.Map.addInitHook(function(){this.options.gpsControl&&(this.gpsControl=L.control.gps(this.options.gpsControlOptions),this.addControl(this.gpsControl))}),L.control.gps=function(a){return new L.Control.Gps(a)}}).call(this); \ No newline at end of file diff --git a/static/js/leaflet.rotatedMarker.js b/static/js/leaflet.rotatedMarker.js new file mode 100644 index 0000000000..35ab55aaca --- /dev/null +++ b/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; + } + }); +})(); diff --git a/templates/newmap.html b/templates/newmap.html index 57c124f361..f3b4c8baf3 100644 --- a/templates/newmap.html +++ b/templates/newmap.html @@ -4,6 +4,7 @@ Pokeminer - {{ area_name }} +