[distance-to-portal] also show bearing

external/LatLng_Bearings.js

@@ -0,0 +1,43 @@
+/*
+ * extend Leaflet's LatLng class
+ * giving it the ability to calculate the bearing to another LatLng
+ * Usage example:
+ *     here  = map.getCenter();   / some latlng
+ *     there = L.latlng([37.7833,-122.4167]);
+ *     var whichway = here.bearingWordTo(there);
+ *     var howfar   = (here.distanceTo(there) / 1609.34).toFixed(2);
+ *     alert("San Francisco is " + howfar + " miles, to the " + whichway );
+ * 
+ * Greg Allensworth   <greg.allensworth@gmail.com>
+ * No license, use as you will, kudos welcome but not required, etc.
+ */
+
+
+L.LatLng.prototype.bearingTo = function(other) {
+    var d2r  = L.LatLng.DEG_TO_RAD;
+    var r2d  = L.LatLng.RAD_TO_DEG;
+    var lat1 = this.lat * d2r;
+    var lat2 = other.lat * d2r;
+    var dLon = (other.lng-this.lng) * d2r;
+    var y    = Math.sin(dLon) * Math.cos(lat2);
+    var x    = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
+    var brng = Math.atan2(y, x);
+    brng = parseInt( brng * r2d );
+    brng = (brng + 360) % 360;
+    return brng;
+};
+
+L.LatLng.prototype.bearingWordTo = function(other) {
+    var bearing = this.bearingTo(other);
+    var bearingword = '';
+    if      (bearing >=  22 && bearing <=  67) bearingword = 'NE';
+    else if (bearing >=  67 && bearing <= 112) bearingword =  'E';
+    else if (bearing >= 112 && bearing <= 157) bearingword = 'SE';
+    else if (bearing >= 157 && bearing <= 202) bearingword =  'S';
+    else if (bearing >= 202 && bearing <= 247) bearingword = 'SW';
+    else if (bearing >= 247 && bearing <= 292) bearingword =  'W';
+    else if (bearing >= 292 && bearing <= 337) bearingword = 'NW';
+    else if (bearing >= 337 || bearing <=  22) bearingword =  'N';
+    return bearingword;
+};
+

plugins/distance-to-portal.css

@@ -0,0 +1,28 @@
+#portal-distance {
+	text-align: center;
+}
+#portal-distance-bearing {
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	height: 1em;
+	width: 1em;
+}
+#portal-distance-bearing:before, #portal-distance-bearing:after {
+	border-color: transparent currentcolor transparent transparent;
+	border-style: solid;
+	border-width: 0.75em 0.4em 0 0;
+	content: "";
+	height: 0;
+	width: 0;
+	position: absolute;
+	top: 0.15em;
+	left: 0.15em;
+	transform: skewY(-30deg);
+}
+#portal-distance-bearing:after {
+	left: auto;
+	right: 0.15em;
+	transform: scaleX(-1) skewY(-30deg);
+}
+

plugins/distance-to-portal.user.js

@@ -22,8 +22,6 @@
 // use own namespace for plugin
 window.plugin.distanceToPortal = function() {};
 
-
-
 window.plugin.distanceToPortal.addDistance = function(info) {
 
   var ll = info.portal.getLatLng();
@@ -41,12 +39,22 @@ window.plugin.distanceToPortal.addDistance = function(info) {
       dist = Math.round(dist)+'m';
     }
 
-    text = 'Distance: '+dist;
+    var bearing = window.plugin.distanceToPortal.currentLoc.bearingTo(ll);
+    var bearingWord = window.plugin.distanceToPortal.currentLoc.bearingWordTo(ll);
+
+    text = 'Distance: '+dist+' <span id="portal-distance-bearing" style="transform: rotate('+bearing+'deg)"></span> '
+      + zeroPad(bearing, 3) + '° ' + bearingWord;
   } else {
     text = 'Location not set';
   }
 
-  var div = $('<div>').addClass('portal-distance').text(text).attr('title','Double-click to set/change current location').on('dblclick',window.plugin.distanceToPortal.setLocation);
+  var div = $('<div>')
+    .attr({
+      id: 'portal-distance',
+      title: 'Double-click to set/change current location',
+    })
+    .html(text)
+    .on('dblclick', window.plugin.distanceToPortal.setLocation);
 
   $('#resodetails').after(div);
 
@@ -91,6 +99,8 @@ window.plugin.distanceToPortal.setLocation = function() {
 
 
 window.plugin.distanceToPortal.setup  = function() {
+  // https://github.com/gregallensworth/Leaflet/
+  @@INCLUDERAW:external/LatLng_Bearings.js@@
 
   try {
     window.plugin.distanceToPortal.currentLoc = L.latLng(JSON.parse(localStorage['plugin-distance-to-portal']));
@@ -100,12 +110,7 @@ window.plugin.distanceToPortal.setup  = function() {
 
   window.plugin.distanceToPortal.currentLocMarker = null;
 
-
-  $('head').append(
-    '<style>'+
-    'div.portal-distance { text-align: center; }'+
-    '</style>'
-  );
+  $('<style>').prop('type', 'text/css').html('@@INCLUDESTRING:plugins/distance-to-portal.css@@').appendTo('head');
 
   addHook('portalDetailsUpdated', window.plugin.distanceToPortal.addDistance);
 };