user-location: use circle by default, or arrow if device sends orientation events

mobile/plugins/user-location.css

@@ -0,0 +1,65 @@
+.user-location {
+  pointer-events: none;
+}
+
+.user-location .container {
+  height: 32px;
+  width: 32px;
+  transform-origin: center;
+  -webkit-transform-origin: center;
+}
+
+.user-location .container .inner,
+.user-location .container .outer {
+  position: absolute;
+}
+
+.user-location .res .inner {
+  background-color: #0088b3;
+  border-color: #0088b3;
+}
+
+.user-location .res .outer {
+  background-color: #03baf4;
+  border-color: #03baf4;
+}
+
+.user-location .enl .inner {
+  background-color: #1ee681;
+  border-color: #1ee681;
+}
+
+.user-location .enl .outer {
+  background-color: #00aa4e;
+  border-color: #00aa4e;
+}
+
+.user-location .circle .inner,
+.user-location .circle .outer {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+}
+
+.user-location .circle .inner {
+  transform: scale(0.6);
+  -webkit-transform: scale(0.6);
+}
+
+.user-location .arrow .inner,
+.user-location .arrow .outer {
+  left: 4px;
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  border-width: 0px 12px 32px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  background: transparent;
+}
+
+.user-location .arrow .inner {
+  transform: scale(0.6) translateY(15%);
+  -webkit-transform: scale(0.6) translateY(15%);
+}
+

mobile/plugins/user-location.user.js

@@ -1,7 +1,8 @@
 // ==UserScript==
 // @id             iitc-plugin-user-location@cradle
 // @name           IITC plugin: User Location
-// @version        0.1.4.@@DATETIMEVERSION@@
+// @category       Tweaks
+// @version        0.2.0.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@
@@ -10,6 +11,7 @@
 // @include        http://www.ingress.com/intel*
 // @match          https://www.ingress.com/intel*
 // @match          http://www.ingress.com/intel*
+// @grant          none
 // ==/UserScript==
 
 @@PLUGINSTART@@
@@ -18,39 +20,66 @@
 
 window.plugin.userLocation = function() {};
 
-window.plugin.userLocation.marker = {};
 window.plugin.userLocation.locationLayer = new L.LayerGroup();
 
 window.plugin.userLocation.setup = function() {
+  $('<style>').prop('type', 'text/css').html('@@INCLUDESTRING:mobile/plugins/user-location.css@@').appendTo('head');
 
-    var iconImage = '@@INCLUDEIMAGE:images/marker-icon.png@@';
+  var cssClass = PLAYER.team === 'RESISTANCE' ? 'res' : 'enl';
-    var iconRetImage = '@@INCLUDEIMAGE:images/marker-icon-2x.png@@';
 
-    plugin.userLocation.icon = L.Icon.Default.extend({options: {
+  var icon = L.divIcon({
-        iconUrl: iconImage,
+    iconSize: L.point(32, 32),
-        iconRetinaUrl: iconRetImage
+    iconAnchor: L.point(16, 16),
-    }});
+    className: 'user-location',
+    html: '<div class="container ' + cssClass + ' circle"><div class="outer"></div><div class="inner"></div></div>'
+  });
 
-    var cssClass = PLAYER.team === 'RESISTANCE' ? 'res' : 'enl';
+  var marker = L.marker(new L.LatLng(0,0), {
-    var title = '<span class="nickname '+ cssClass+'" style="font-weight:bold;">' + PLAYER.nickname + '</span>\'s location';
+    icon: icon,
+    zIndexOffset: 300,
+    clickable: false
+  });
 
-    var marker = L.marker(window.map.getCenter(), {
+  marker.addTo(window.map);
-        icon: new plugin.userLocation.icon()
+  var container = $(".container", marker._icon);
-    });
 
-    marker.bindPopup(title);
+  window.plugin.userLocation.marker = marker;
+  window.plugin.userLocation.icon = icon;
+  window.plugin.userLocation.container = container;
 
-    plugin.userLocation.marker = marker;
+  if('ondeviceorientation' in window)
-    marker.addTo(window.map);
+    window.addEventListener('deviceorientation', window.plugin.userLocation.onDeviceOrientation, false);
-    // jQueryUI doesn’t automatically notice the new markers
-    window.setupTooltips($(marker._icon));
 };
 
-window.plugin.userLocation.updateLocation = function(lat, lng) {
+window.plugin.userLocation.onDeviceOrientation = function(e) {
-    var latlng = new L.LatLng(lat, lng);
+  var direction, delta, heading;
-    window.plugin.userLocation.marker.setLatLng(latlng);
+
+  if (typeof e.webkitCompassHeading !== 'undefined') {
+    direction = e.webkitCompassHeading;
+    if (typeof window.orientation !== 'undefined') {
+      direction += window.orientation;
+    }
+  }
+  else {
+    // http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation
+    direction = 360 - e.alpha;
+  }
+
+  var container = window.plugin.userLocation.container;
+  container
+    .removeClass("circle")
+    .addClass("arrow")
+    .css({
+      "transform": "rotate(" + direction + "deg)",
+      "webkitTransform": "rotate(" + direction + "deg)"
+    });
 }
 
+window.plugin.userLocation.updateLocation = function(lat, lng) {
+  var latlng = new L.LatLng(lat, lng);
+  window.plugin.userLocation.marker.setLatLng(latlng);
+};
+
 var setup = window.plugin.userLocation.setup;
 
 // PLUGIN END //////////////////////////////////////////////////////////