[Zurich] Add maps to Zurich admin report print view

 - Includes a small map at the top of the first page and a second
   full-width map on a separate page.
 - upgrades tiles to the new 512px ones already used by JS
   as implemented in https://github.com/mysociety/FixMyStreet-Commercial/issues/668
 - Uses jQuery to clone a copy of the "noscript" map elsewhere into
   the DOM, because the original is too far from where we need it.
 - extracts maps/openlayers.html to call maps/noscript_map.html
 - specialises the Zurich version to allow a richer structure to be
   returned, including arbitrary sized map
 - Map::Zurich now returns nearly arbitrary sized map tiles
 - second larger map is prepared (only for admin/report_edit)

See mysociety/FixMyStreet-Commercial#677

5 files changed, 157 insertions, 58 deletions

diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
new file mode 100644
index 000000000..aaaa217c9
--- /dev/null
+++ b/templates/web/base/maps/noscript_map.html
@@ -0,0 +1,64 @@
+<div class="noscript">
+    <div id="[% nsm_prefix %]drag">
+        <[% map.img_type %]
+            alt="NW map tile" id="[% nsm_prefix %]t2.2"
+            name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
+            src="[% map.tiles.0 %]"
+            style="top:0; left:0;">
+        <[% map.img_type %]
+            alt="NE map tile" id="[% nsm_prefix %]t2.3"
+            name="tile_[% map.x_tile %].[% map.y_tile - 1 %]"
+            src="[% map.tiles.1 %]"
+            style="top:0px; left:256px;">
+        <br>
+        <[% map.img_type %]
+            alt="SW map tile" id="[% nsm_prefix %]t3.2"
+            name="tile_[% map.x_tile - 1 %].[% map.y_tile %]"
+            src="[% map.tiles.2 %]"
+            style="top:256px; left:0;">
+        <[% map.img_type %]
+            alt="SE map tile" id="[% nsm_prefix %]t3.3"
+            name="tile_[% map.x_tile %].[% map.y_tile %]"
+            src="[% map.tiles.3 %]"
+            style="top:256px; left:256px;">
+    </div>
+    <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+    [% INCLUDE compass %]
+</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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/img/zoom-minus-mini.png" border="0"></a></div>
+</div>
+[% END %]
+
+
+[% BLOCK pin %]
+
+[% IF pin.id %]
+<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
+[%- END -%]
+<img border="0" class="pin" src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
+    alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
+[%- IF pin.id -%]
+</a>
+[% END %]
+
+[% END %]
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 5805f5e16..1e7ae5ce8 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -30,65 +30,10 @@ var fixmystreet = {
 </script>
 <div id="map_box" aria-hidden="true">
     [% pre_map %]
-    <div id="map"><div class="noscript">
-        <div id="drag"><[% map.img_type %]
-            alt="NW map tile" id="t2.2"
-            name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
-            src="[% map.tiles.0 %]"
-            style="top:0; left:0;"><[% map.img_type %]
-            alt="NE map tile" id="t2.3"
-            name="tile_[% map.x_tile %].[% map.y_tile - 1 %]"
-            src="[% map.tiles.1 %]"
-            style="top:0px; left:256px;"><br><[% map.img_type %]
-            alt="SW map tile" id="t3.2"
-            name="tile_[% map.x_tile - 1 %].[% map.y_tile %]"
-            src="[% map.tiles.2 %]"
-            style="top:256px; left:0;"><[% map.img_type %]
-            alt="SE map tile" id="t3.3"
-            name="tile_[% map.x_tile %].[% map.y_tile %]"
-            src="[% map.tiles.3 %]"
-            style="top:256px; left:256px;"></div>
-        <div id="pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
-        [% INCLUDE compass %]
-    </div></div>
+    <div id="map">
+      [% INCLUDE 'maps/noscript_map.html' %]
+    </div>
     [% IF map.copyright %]
     <div class="olControlAttribution" style="position: absolute;">[% map.copyright %]</div>
     [% END %]
 
-
-[% 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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/img/zoom-minus-mini.png" border="0"></a></div>
-</div>
-[% END %]
-
-
-[% BLOCK pin %]
-
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img border="0" class="pin" src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
-    alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
-[%- IF pin.id -%]
-</a>
-[% END %]
-
-[% END %]
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index aeb28e3a7..8d478555c 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -97,6 +97,12 @@
 
 <div class="admin-report-edit admin-report-edit--interact">
 
+<script type="text/javascript">
+    $(function(){
+        $('#map_box .noscript').clone().removeClass('noscript').addClass('map_clone print-only').prependTo('.admin-report-edit--interact');
+    });
+</script>
+
 <p align="right" class="screen-only"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
 <p align="right" class="screen-only"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
 
@@ -135,4 +141,8 @@
 </div>
 </form>
 
+<div id="print_report_map" class="print-only">
+[% INCLUDE 'maps/noscript_map.html' map=print_report_map nsm_prefix="large_" %]
+</div>
+
 [% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 093f9064b..335005f89 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -127,6 +127,12 @@
 
 [% status_message %]
 
+<script type="text/javascript">
+    $(function(){
+        $('#map_box .noscript').clone().removeClass('noscript').addClass('map_clone print-only').prependTo('.admin-report-edit--interact');
+    });
+</script>
+
 <dl>
 
     <dt class="screen-only">
@@ -339,4 +345,8 @@ $(function(){
 });
 </script>
 
+<div id="print_report_map" class="print-only">
+[% INCLUDE 'maps/noscript_map.html' map=print_report_map nsm_prefix="large_" %]
+</div>
+
 [% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/zurich/maps/noscript_map.html b/templates/web/zurich/maps/noscript_map.html
new file mode 100644
index 000000000..5c2a2c064
--- /dev/null
+++ b/templates/web/zurich/maps/noscript_map.html
@@ -0,0 +1,70 @@
+<div class="noscript square-map__outer">
+    <div class="square-map__inner">
+        <div id="[% nsm_prefix %]drag">
+            [%- FOR row IN map.tiles -%]
+                [%- FOR tile IN row -%]
+                    [%- top_px = tile.row_offset * map.tile_size -%]
+                    [%- left_px = tile.col_offset * map.tile_size %]
+                    <[% map.img_type %]
+                        class="square-map__tile"
+                        alt="[% tile.alt %]"
+                        id="[% nsm_prefix %]t[% tile.dotted_id %]"
+                        name="tile_[% tile.dotted_id %]"
+                        src="[% tile.src %]"
+                        style="width: [% 100 / map.cols %]%; height: auto; float: left;">
+                [%- END -%]
+            [% END %]
+        </div>
+        <div id="[% nsm_prefix %]pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+        [% INCLUDE compass %]
+    </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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/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-2.13.1/img/zoom-minus-mini.png" border="0"></a></div>
+</div>
+[% END %]
+
+
+[% BLOCK pin %]
+
+[% IF pin.id %]
+<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
+[%- END -%]
+<img
+    data-foo="[% pin.px %],[% pin.py %]/ [% map.tile_size %]*[% map.cols %],[% map.rows %]"
+    border="0"
+    class="pin"
+    src="[% c.uri_for( c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png') %]"
+    alt="[% loc('Problem') %]"
+    style="
+        top: [% pin.py / ( map.tile_size * map.rows ) * 100  %]%;
+        left: [% pin.px / ( map.tile_size * map.cols ) * 100  %]%;
+        position: absolute;
+        margin-left: -24px; /* Half of 48px wide image */
+        margin-top: -64px; /* All of 64px tall image */
+    "
+>
+[%- IF pin.id -%]
+</a>
+[% END %]
+
+[% END %]