Move non-JavaScript pan/zoom to same as with JS.

No need to use old OpenLayers PanZoom defaults, or load images we don't
want to use.

6 files changed, 42 insertions, 81 deletions

diff --git a/templates/web/base/maps/_compass.html b/templates/web/base/maps/_compass.html
new file mode 100644
index 000000000..c5db05b1d
--- /dev/null
+++ b/templates/web/base/maps/_compass.html
@@ -0,0 +1,19 @@
+[%
+    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
+    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
+    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
+    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } );
+    SET zoom_in  = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom + 1 } ) IF map.zoom < map.numZoomLevels - 1;
+    SET zoom_out = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom - 1 } ) IF map.zoom > 0;
+    SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 1;
+    SET zoom_out = '#' IF map.zoom <= 0;
+%]
+
+<div id="fms_pan_zoom" style="position: absolute;" class="olControlPanZoom olControlNoSelect" unselectable="on">
+    <a rel="nofollow" href="[% north %]"><span id="fms_pan_zoom_panup" class="olButton">pan up</span></a>
+    <a rel="nofollow" href="[% west %]"><span id="fms_pan_zoom_panleft" class="olButton">pan left</span></a>
+    <a rel="nofollow" href="[% east %]"><span id="fms_pan_zoom_panright" class="olButton">pan right</span></a>
+    <a rel="nofollow" href="[% south %]"><span id="fms_pan_zoom_pandown" class="olButton">pan down</span></a>
+    <a rel="nofollow" href="[% zoom_in %]"><span id="fms_pan_zoom_zoomin" class="olButton">zoom in</span></a>
+    <a rel="nofollow" href="[% zoom_out %]"><span id="fms_pan_zoom_zoomout" class="olButton">zoom out</span></a>
+</div>
diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
index c477ec5ac..8418c4eb8 100644
--- a/templates/web/base/maps/noscript_map.html
+++ b/templates/web/base/maps/noscript_map.html
@@ -24,28 +24,5 @@
             style="top:256px; left:256px;">
     </div>
     <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
-    [% INCLUDE compass %]
+    [% INCLUDE 'maps/_compass.html' %]
 </div>
-
-[% BLOCK compass %]
-[%
-    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
-    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
-    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
-    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } )
-    world    = c.uri_with( { zoom = 0 } );
-    SET zoom_in  = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom + 1 } ) IF map.zoom < map.numZoomLevels - 1;
-    SET zoom_out = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom - 1 } ) IF map.zoom > 0;
-    SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 1;
-    SET zoom_out = '#' IF map.zoom <= 0;
-%]
-<div style="position: absolute; left: 4px; top: 4px;" class="olControlPanZoom olControlNoSelect" unselectable="on">
-    <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a rel="nofollow" href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/north-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/west-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/east-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a rel="nofollow" href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/south-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/zoom-plus-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a rel="nofollow" href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/zoom-world-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="[% start %]/js/OpenLayers/img/zoom-minus-mini.png" border="0"></a></div>
-</div>
-[% END %]
diff --git a/templates/web/bristol/maps/noscript_map.html b/templates/web/bristol/maps/noscript_map.html
index 0b4fe1ebf..987aa76a6 100644
--- a/templates/web/bristol/maps/noscript_map.html
+++ b/templates/web/bristol/maps/noscript_map.html
@@ -16,34 +16,10 @@
             [% END %]
         </div>
         <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
-        [% INCLUDE compass %]
+        [% INCLUDE 'maps/_compass.html' %]
     </div>
 </div>
 
-[% BLOCK compass %]
-[%
-    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
-    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
-    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
-    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } )
-    world    = c.uri_with( { zoom = 0 } );
-    SET zoom_in  = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom + 1 } ) IF map.zoom < map.numZoomLevels - 1;
-    SET zoom_out = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom - 1 } ) IF map.zoom > 0;
-    SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 1;
-    SET zoom_out = '#' IF map.zoom <= 0;
-%]
-<div style="position: absolute; left: 4px; top: 4px;" class="olControlPanZoom olControlNoSelect" unselectable="on">
-    <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a rel="nofollow" href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/north-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/west-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/east-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a rel="nofollow" href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/south-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-plus-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a rel="nofollow" href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-world-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-minus-mini.png" border="0"></a></div>
-</div>
-[% END %]
-
-
 [% BLOCK pin %]
 [%
     SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
diff --git a/templates/web/zurich/maps/noscript_map.html b/templates/web/zurich/maps/noscript_map.html
index 2ebfcbf11..dcd577c52 100644
--- a/templates/web/zurich/maps/noscript_map.html
+++ b/templates/web/zurich/maps/noscript_map.html
@@ -16,34 +16,10 @@
             [% END %]
         </div>
         <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
-        [% INCLUDE compass %]
+        [% INCLUDE 'maps/_compass.html' %]
     </div>
 </div>
 
-[% BLOCK compass %]
-[%
-    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
-    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
-    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
-    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } )
-    world    = c.uri_with( { zoom = 0 } );
-    SET zoom_in  = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom + 1 } ) IF map.zoom < map.numZoomLevels - 1;
-    SET zoom_out = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom - 1 } ) IF map.zoom > 0;
-    SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 1;
-    SET zoom_out = '#' IF map.zoom <= 0;
-%]
-<div style="position: absolute; left: 4px; top: 4px;" class="olControlPanZoom olControlNoSelect" unselectable="on">
-    <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a rel="nofollow" href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/north-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/west-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a rel="nofollow" href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/east-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a rel="nofollow" href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/south-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-plus-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a rel="nofollow" href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-world-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a rel="nofollow" href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="/js/OpenLayers/img/zoom-minus-mini.png" border="0"></a></div>
-</div>
-[% END %]
-
-
 [% BLOCK pin %]
 [%
     SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index d21003a43..d7b3263a3 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1085,6 +1085,8 @@ html.js #map .noscript {
 #fms_pan_zoom_panright,
 #fms_pan_zoom_zoomin,
 #fms_pan_zoom_zoomout {
+  position: absolute;
+  cursor: pointer;
   width: 36px;
   height: 36px;
   text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index f202e1392..2790f13d3 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -569,6 +569,17 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
                 }
         }
     },
+    _addButton: function(id1, id2) {
+        var btn = document.createElement('div'),
+            id = id1 + id2;
+        btn.innerHTML = id1 + ' ' + id2;
+        btn.id = this.id + "_" + id;
+        btn.action = id;
+        btn.className = "olButton";
+        this.div.appendChild(btn);
+        this.buttons.push(btn);
+        return btn;
+    },
     moveTo: function(){},
     draw: function(px) {
         // A customised version of .draw() that doesn't specify
@@ -576,13 +587,13 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         // size and position them all using CSS.
         OpenLayers.Control.prototype.draw.apply(this, arguments);
         this.buttons = [];
-        this._addButton("panup", "north-mini.png");
-        this._addButton("panleft", "west-mini.png");
-        this._addButton("panright", "east-mini.png");
-        this._addButton("pandown", "south-mini.png");
-        this._addButton("zoomin", "zoom-plus-mini.png");
-        this._addButton("zoomworld", "zoom-world-mini.png");
-        this._addButton("zoomout", "zoom-minus-mini.png");
+        this._addButton("pan", "up");
+        this._addButton("pan", "left");
+        this._addButton("pan", "right");
+        this._addButton("pan", "down");
+        this._addButton("zoom", "in");
+        this._addButton("zoom", "world");
+        this._addButton("zoom", "out");
         return this.div;
     }
 });