Skip to content
Browse files

Panning works. See TODO for more info.

  • Loading branch information...
1 parent adf7394 commit c1a93f576057643d929e53edb4a6bdb415c59a75 Mattias Bengtsson committed Mar 14, 2012
View
5 TODO.md
@@ -0,0 +1,5 @@
+TODO
+====
+ - Styling
+ - Prevent double-clicking prevent from zooming map
+ - Make panning offset configurable
View
2 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]-->
View
40 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);
+}
View
42 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);
+ }
+});
View
BIN src/images/pan-down.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN src/images/pan-left.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN src/images/pan-right.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN src/images/pan-up.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c1a93f5

Please sign in to comment.
Something went wrong with that request. Please try again.