Panning works. See TODO for more info.

TODO.md

@@ -0,0 +1,5 @@
+TODO
+====
+ - Styling
+ - Prevent double-clicking prevent from zooming map 
+ - Make panning offset configurable

examples/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="../lib/leaflet-master-120313/leaflet.css" />
-    <link rel="stylesheet" href="../src/L.Control.Zoomslider.css" />
+    <link rel="stylesheet" href="../src/L.Control.Pan.css" />
     <!--[if lt IE 9]>
      <link rel="stylesheet" href="../lib/leaflet-master-120313/leaflet.ie.css"/>
      <![endif]-->

src/L.Control.Pan.css

@@ -0,0 +1,40 @@
+.leaflet-control-pan {
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px;
+}
+.leaflet-control-pan {
+    padding: 5px;
+    background: rgba(0, 0, 0, 0.25);
+}
+.leaflet-control-pan a {
+    background-color: rgba(255, 255, 255, 0.75);
+}
+.leaflet-control-pan a, .leaflet-control-layers 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: 19px;
+    height: 19px;
+}
+.leaflet-control-pan a:hover {
+    background-color: #fff;
+}
+
+.leaflet-control-pan-left {
+	background-image: url(images/pan-left.png);
+}
+.leaflet-control-pan-right {
+	background-image: url(images/pan-right.png);
+}
+.leaflet-control-pan-up {
+	background-image: url(images/pan-up.png);
+}
+.leaflet-control-pan-down {
+	background-image: url(images/pan-down.png);
+}

src/L.Control.Pan.js

@@ -0,0 +1,42 @@
+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('Left' , className + '-left' , container, map, new L.Point( -off ,  0));
+		this._panButton('Right', className + '-right', container, map, new L.Point(  off ,  0));
+		this._panButton('Up'   , className + '-up'   , container, map, new L.Point(    0 , -off));
+		this._panButton('Down' , className + '-down' , container, map, new L.Point(    0 ,  off));
+
+		return container;
+	},
+
+	_panButton: function (title, className, container, map, offset) {
+		var link = L.DomUtil.create('a', className, container);
+		link.href = '#';
+		link.title = title;
+		L.DomEvent
+			.addListener(link, 'click', L.DomEvent.stopPropagation)
+			.addListener(link, 'click', L.DomEvent.preventDefault)
+			.addListener(link, 'click', function(){ map.panBy(offset); }, map);
+
+		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);
+	}
+});