diff --git a/external/L.Control.Pan.css b/external/L.Control.Pan.css
index e9002176..512df2ac 100644
--- a/external/L.Control.Pan.css
+++ b/external/L.Control.Pan.css
@@ -1,3 +1,30 @@
+/* Make the default zoom control align with the pan control.
+   This is ugly.
+   The parent box (class="leaflet-top leaflet-left")
+   should make all the child boxes be center-aligned instead.
+   Not sure if that is possible though.
+*/
+.leaflet-bar {
+	position: relative;
+	left:23px;
+}
+/*
+   Make the zoomSlider control
+   (https://github.com/mattiasbengtsson/Leaflet.zoomslider)
+   align with the pan control.
+*/
+.leaflet-control-zoomslider {
+	position: relative;
+	left:22px;
+}
+
+/*
+  override the scale bar and push it over
+*/
+.leaflet-control-scale {
+  left: 63px !important;
+}
+
 .leaflet-control-pan  {
 	   /* 
 	     .leaflet-control-pan-right-wrap: right 
diff --git a/plugins/pan-control.user.js b/plugins/pan-control.user.js
index b805106c..0bd6f7c2 100644
--- a/plugins/pan-control.user.js
+++ b/plugins/pan-control.user.js
@@ -28,8 +28,15 @@ window.plugin.panControl.setup  = function() {
   @@INCLUDERAW:external/L.Control.Pan.js@@
   try { console.log('done loading Leaflet.Pancontrol JS'); } catch(e) {}
   
-  window.map.addControl(L.control.pan({panOffset: 350}));
+  window.map.panControl = L.control.pan({panOffset: 350});
+  window.map.addControl(window.map.panControl);
   
+  if(map.zoomControl._map) {  // Move above the zoom control
+    window.map.removeControl(map.zoomControl);
+    window.map.zoomControl = L.control.zoom();
+    window.map.addControl(window.map.zoomControl);
+  }
+
   $('head').append('<style>@@INCLUDESTRING:external/L.Control.Pan.css@@</style>');
 };