New plugin add a pan control to the map

external/L.Control.Pan.css

@@ -0,0 +1,112 @@
+.leaflet-control-pan  {
+	   /* 
+	     .leaflet-control-pan-right-wrap: right 
+	   + .leaflet-control-pan a: width
+	   = 52 + 24 = 76
+	   */
+	width: 76px; 
+	   /* 
+	     .leaflet-control-pan-down-wrap: top
+	   + .leaflet-control-pan a: height
+	   = 52 + 24 = 76
+	   */
+	height: 76px;
+}
+
+.leaflet-control-pan > div {
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+.leaflet-control-pan > div {
+  border: 1px solid #888;
+  box-shadow: 0 0 8px rgba(0,0,0,0.4);
+}
+.leaflet-control-pan a {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+.leaflet-control-pan a{
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    display: block;
+}
+.leaflet-control-pan a {
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    width: 22px;
+    height: 22px;
+}
+.leaflet-control-pan a:hover {
+    background-color: #fff;
+}
+
+.leaflet-control-pan-up-wrap {
+	position:absolute;
+	left:26px;
+}
+.leaflet-control-pan-left-wrap {
+	position:absolute;
+	top:26px;
+}
+.leaflet-control-pan-right-wrap {
+	position:absolute;
+	left:52px;	
+	top:26px;
+}
+.leaflet-control-pan-down-wrap {
+	position:absolute;
+	left:26px;
+	top:52px;
+}
+
+.leaflet-control-pan-up {
+	background-image: url(@@INCLUDEIMAGE:images/pan-up.png@@);
+}
+.leaflet-control-pan-left {
+	background-image: url(@@INCLUDEIMAGE:images/pan-left.png@@);
+}
+.leaflet-control-pan-right {
+	background-image: url(@@INCLUDEIMAGE:images/pan-right.png@@);
+}
+.leaflet-control-pan-down {
+	background-image: url(@@INCLUDEIMAGE:images/pan-down.png@@);
+}
+
+/****** Touch Alterations ******/
+.leaflet-touch .leaflet-control-pan div {
+  border: 4px solid rgba(0, 0, 0, 0.3);
+  box-shadow: none;
+
+  border-radius: 10px;
+}
+
+.leaflet-touch .leaflet-control-pan {
+  width: 89px;
+  height: 119px;
+}
+
+.leaflet-touch .leaflet-control-pan a {
+  width: 30px;
+  height: 30px;
+
+  border-radius: 7px;
+}
+
+.leaflet-touch .leaflet-control-pan-up-wrap {
+  left:26px;
+}
+
+.leaflet-touch .leaflet-control-pan-left-wrap {
+  top:40px;
+}
+
+.leaflet-touch .leaflet-control-pan-right-wrap {
+  left:52px;
+  top:40px;
+}
+
+.leaflet-touch .leaflet-control-pan-down-wrap {
+  left:26px;
+  top:80px;
+}

external/L.Control.Pan.js

@@ -0,0 +1,52 @@
+L.Control.Pan = L.Control.extend({
+	options: {
+		position: 'topleft',
+		panOffset: 500
+	},
+
+	onAdd: function (map) {
+		var className = 'leaflet-control-pan',
+			container = L.DomUtil.create('div', className),
+			off = this.options.panOffset;
+
+		this._panButton('Up'   , className + '-up'   
+						, container, map, new L.Point(    0 , -off));
+		this._panButton('Left' , className + '-left' 
+						, container, map, new L.Point( -off ,  0));
+		this._panButton('Right', className + '-right'
+						, container, map, new L.Point(  off ,  0));
+		this._panButton('Down' , className + '-down'
+						, container, map, new L.Point(    0 ,  off));
+		
+		return container;
+	},
+
+	_panButton: function (title, className, container, map, offset, text) {
+		var wrapper = L.DomUtil.create('div', className + "-wrap", container);
+		var link = L.DomUtil.create('a', className, wrapper);
+		link.href = '#';
+		link.title = title;
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', function(){ map.panBy(offset); }, map)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation)
+
+		return link;
+	}
+});
+
+L.Map.mergeOptions({
+    panControl: true
+});
+
+L.Map.addInitHook(function () {
+    if (this.options.panControl) {
+		this.panControl = new L.Control.Pan();
+		this.addControl(this.panControl);
+	}
+});
+
+L.control.pan = function (options) {
+    return new L.Control.Pan(options);
+};

plugins/pan-control.user.js

@@ -0,0 +1,52 @@
+// ==UserScript==
+// @id             iitc-plugin-pan-control@fragger
+// @name           IITC plugin: pan control
+// @version        0.1.0.@@DATETIMEVERSION@@
+// @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
+// @updateURL      @@UPDATEURL@@
+// @downloadURL    @@DOWNLOADURL@@
+// @description    [@@BUILDNAME@@-@@BUILDDATE@@] Shows a panning control on the map
+// @include        https://www.ingress.com/intel*
+// @include        http://www.ingress.com/intel*
+// @match          https://www.ingress.com/intel*
+// @match          http://www.ingress.com/intel*
+// ==/UserScript==
+
+function wrapper() {
+// ensure plugin framework is there, even if iitc is not yet loaded
+if(typeof window.plugin !== 'function') window.plugin = function() {};
+
+
+// PLUGIN START ////////////////////////////////////////////////////////
+
+
+// use own namespace for plugin
+window.plugin.panControl = function() {};
+
+window.plugin.panControl.setup  = function() {
+  try { console.log('Loading Leaflet.Pancontrol JS now'); } catch(e) {}
+  @@INCLUDERAW:external/L.Control.Pan.js@@
+  try { console.log('done loading Leaflet.Pancontrol JS'); } catch(e) {}
+  
+  window.map.addControl(L.control.pan({panOffset: 350}));
+  
+  $('head').append('<style>@@INCLUDESTRING:external/L.Control.Pan.css@@</style>');
+};
+
+var setup =  window.plugin.panControl.setup;
+
+// PLUGIN END //////////////////////////////////////////////////////////
+
+if(window.iitcLoaded && typeof setup === 'function') {
+  setup();
+} else {
+  if(window.bootPlugins)
+    window.bootPlugins.push(setup);
+  else
+    window.bootPlugins = [setup];
+}
+} // wrapper end
+// inject code into site context
+var script = document.createElement('script');
+script.appendChild(document.createTextNode('('+ wrapper +')();'));
+(document.body || document.head || document.documentElement).appendChild(script);