[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

8 files changed, 326 insertions, 95 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Admin.pm b/perllib/FixMyStreet/App/Controller/Admin.pm
index 677aa66d7..ae64bd42d 100644
--- a/perllib/FixMyStreet/App/Controller/Admin.pm
+++ b/perllib/FixMyStreet/App/Controller/Admin.pm
@@ -678,6 +678,7 @@ sub report_edit : Path('report_edit') : Args(1) {
                 type      => 'big',
               } ]
             : [],
+            print_report => 1,
         );
     }
 
diff --git a/perllib/FixMyStreet/Map/Zurich.pm b/perllib/FixMyStreet/Map/Zurich.pm
index 04fd596d1..3e198f820 100644
--- a/perllib/FixMyStreet/Map/Zurich.pm
+++ b/perllib/FixMyStreet/Map/Zurich.pm
@@ -15,22 +15,49 @@ use constant ZOOM_LEVELS    => 9;
 use constant DEFAULT_ZOOM   => 5;
 use constant MIN_ZOOM_LEVEL => 0;
 use constant ID_OFFSET      => 2;
-use constant TILE_SIZE      => 256;
+use constant TILE_SIZE      => 512;
 
 sub map_tiles {
-    my ( $self, %params ) = @_;
-    my ( $col, $row, $z ) = ( $params{x_tile}, $params{y_tile}, $params{matrix_id} );
+    my ($self, %params) = @_;
+    my ($left_col, $top_row, $z) = @params{'x_left_tile', 'y_top_tile', 'matrix_id'};
     my $tile_url = $self->base_tile_url();
+    my $cols = $params{cols};
+    my $rows = $params{rows};
+
+    my @col_offsets = (0.. ($cols-1) );
+    my @row_offsets = (0.. ($rows-1) );
+
     return [
-        "$tile_url/$z/" . ($row - 1) . "/" . ($col - 1) . ".jpg",
-        "$tile_url/$z/" . ($row - 1) . "/$col.jpg",
-        "$tile_url/$z/$row/" . ($col - 1) . ".jpg",
-        "$tile_url/$z/$row/$col.jpg",
+        map {
+            my $row_offset = $_;
+            [
+                map {
+                    my $col_offset = $_;
+                    my $row = $top_row + $row_offset;
+                    my $col = $left_col + $col_offset;
+                    my $src = sprintf '%s/%d/%d/%d.jpg',
+                        $tile_url, $z, $row, $col;
+                    my $dotted_id = sprintf '%d.%d', $col, $row;
+
+                    # return the data structure for the cell
+                    +{
+                        src => $src,
+                        row_offset => $row_offset,
+                        col_offset => $col_offset,
+                        dotted_id => $dotted_id,
+                        alt => "Map tile $dotted_id", # TODO "NW map tile"?
+                    }
+                }
+                @col_offsets
+            ]
+        }
+        @row_offsets
     ];
 }
 
 sub base_tile_url {
-    return '/maps/Hybrid/1.0.0/Hybrid/default/nativeTileMatrixSet';
+    # use the new 512px maps as used by Javascript
+    return 'http://www.gis.stadt-zuerich.ch/maps/rest/services/tiled/LuftbildHybrid/MapServer/WMTS/tile/1.0.0/tiled_LuftbildHybrid/default/default028mm';
 }
 
 sub copyright {
@@ -51,29 +78,77 @@ sub display_map {
     $params{longitude} = Utils::truncate_coordinate($c->get_param('lon') + 0)
         if defined $c->get_param('lon');
 
-    my $zoom = defined $c->get_param('zoom')
-        ? $c->get_param('zoom') + 0
-        : $c->stash->{page} eq 'report'
-            ? DEFAULT_ZOOM+1
-            : DEFAULT_ZOOM;
-    $zoom = ZOOM_LEVELS - 1 if $zoom >= ZOOM_LEVELS;
-    $zoom = 0 if $zoom < 0;
+    $params{rows} //= 2; # 2x2 square is default
+    $params{cols} //= 2;
+
+    $params{zoom} = do {
+        my $zoom = defined $c->get_param('zoom')
+            ? $c->get_param('zoom') + 0
+            : $c->stash->{page} eq 'report'
+                ? DEFAULT_ZOOM+1
+                : DEFAULT_ZOOM;
+        $zoom = ZOOM_LEVELS - 1 if $zoom >= ZOOM_LEVELS;
+        $zoom = 0 if $zoom < 0;
+        $zoom;
+    };
 
-    ($params{x_tile}, $params{y_tile}, $params{matrix_id}) = latlon_to_tile_with_adjust($params{latitude}, $params{longitude}, $zoom);
+    $c->stash->{map} = $self->get_map_hash( %params );
 
-    foreach my $pin (@{$params{pins}}) {
-        ($pin->{px}, $pin->{py}) = latlon_to_px($pin->{latitude}, $pin->{longitude}, $params{x_tile}, $params{y_tile}, $zoom);
+    if ($params{print_report}) {
+        $params{zoom}++ unless $params{zoom} >= ZOOM_LEVELS;
+        $c->stash->{print_report_map}
+            = $self->get_map_hash(
+                %params,
+                img_type => 'img',
+                cols => 4, rows => 4,
+            );
+        # NB: we can passthrough img_type as literal here, as only designed for print
+
+        # NB we can do arbitrary size, including non-squares, however we'd have
+        # to modify .square-map style with padding-bottom percentage calculated in
+        # an inline style:
+        # <zarino> in which case, the only change that'd be required is
+        # removing { padding-bottom: 100% } from .square-map__outer, putting
+        # the percentage into an inline style on the element itself, and then
+        # probably renaming .square-map__* to .fixed-aspect-map__* or something
+        # since it's no longer necessarily square
     }
+}
+
+sub get_map_hash {
+    my ($self, %params) = @_;
+
+    @params{'x_centre_tile', 'y_centre_tile', 'matrix_id'}
+        = latlon_to_tile_with_adjust(
+            @params{'latitude', 'longitude', 'zoom', 'rows', 'cols'});
 
-    $c->stash->{map} = {
+    # centre_(row|col) is either in middle, or just to right.
+    # e.g. if centre is the number in parens:
+    # 1 (2) 3 => 2 - int( 3/2 ) = 1
+    # 1 2 (3) 4 => 3 - int( 4/2 ) = 1
+    $params{x_left_tile} = $params{x_centre_tile} - int($params{cols} / 2);
+    $params{y_top_tile}  = $params{y_centre_tile} - int($params{rows} / 2);
+
+    $params{pins} = [
+        map {
+            my $pin = { %$_ }; # shallow clone
+            ($pin->{px}, $pin->{py})
+                = latlon_to_px($pin->{latitude}, $pin->{longitude},
+                            @params{'x_left_tile', 'y_top_tile', 'zoom'});
+            $pin;
+        } @{ $params{pins} }
+    ];
+
+    return {
         %params,
         type => 'zurich',
         map_type => 'OpenLayers.Layer.WMTS',
         tiles => $self->map_tiles( %params ),
         copyright => $self->copyright(),
-        zoom => $zoom,
+        zoom => $params{zoom},,
         zoomOffset => MIN_ZOOM_LEVEL,
         numZoomLevels => ZOOM_LEVELS,
+        tile_size => TILE_SIZE,
     };
 }
 
@@ -84,9 +159,17 @@ sub latlon_to_tile($$$) {
     my ($x, $y) = Geo::Coordinates::CH1903::from_latlon($lat, $lon);
 
     my $matrix_id = $zoom + ID_OFFSET;
-    my @scales = ( '250000', '125000', '64000', '32000', '16000', '8000', '4000', '2000', '1000', '500', '250' );
+    my @scales = (
+        '250000', '125000',
+        '64000', '32000',
+        '16000', '8000',
+        '4000', '2000',
+        '1000', '500',
+        '250'
+    );
     my $tileOrigin = { lat => 30814423, lon => -29386322 };
-    my $res = $scales[$matrix_id] / (39.3701 * 96); # OpenLayers.INCHES_PER_UNIT[units] * OpenLayers.DOTS_PER_INCH
+    my $res = $scales[$matrix_id] / (39.3701 * 96);
+        # OpenLayers.INCHES_PER_UNIT[units] * OpenLayers.DOTS_PER_INCH
 
     my $fx = ( $x - $tileOrigin->{lon} ) / ($res * TILE_SIZE);
     my $fy = ( $tileOrigin->{lat} - $y ) / ($res * TILE_SIZE);
@@ -96,16 +179,26 @@ sub latlon_to_tile($$$) {
 
 # Given a lat/lon, convert it to OSM tile co-ordinates (nearest actual tile,
 # adjusted so the point will be near the centre of a 2x2 tiled map).
-sub latlon_to_tile_with_adjust($$$) {
-    my ($lat, $lon, $zoom) = @_;
-    my ($x_tile, $y_tile, $matrix_id) = latlon_to_tile($lat, $lon, $zoom);
+#
+# Takes parameter for rows/cols.  For even sizes (2x2, 4x4 etc.) will
+# do adjustment, but simply returns actual for odd sizes.
+#
+sub latlon_to_tile_with_adjust {
+    my ($lat, $lon, $zoom, $rows, $cols) = @_;
+    my ($x_tile, $y_tile, $matrix_id)
+        = my @ret
+        = latlon_to_tile($lat, $lon, $zoom);
 
-    # Try and have point near centre of map
-    if ($x_tile - int($x_tile) > 0.5) {
-        $x_tile += 1;
+    # Try and have point near centre of map, passing through if odd
+    unless ($cols % 2) {
+        if ($x_tile - int($x_tile) > 0.5) {
+            $x_tile += 1;
+        }
     }
-    if ($y_tile - int($y_tile) > 0.5) {
-        $y_tile += 1;
+    unless ($rows % 2) {
+        if ($y_tile - int($y_tile) > 0.5) {
+            $y_tile += 1;
+        }
     }
 
     return ( int($x_tile), int($y_tile), $matrix_id );
@@ -140,7 +233,7 @@ sub latlon_to_px($$$$$) {
 # C is centre tile reference of displayed map
 sub tile_to_px {
     my ($p, $c) = @_;
-    $p = TILE_SIZE * ($p - $c + 1);
+    $p = TILE_SIZE * ($p - $c);
     $p = int($p + .5 * ($p <=> 0));
     return $p;
 }
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 %]
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index b9c4f1134..9b3543116 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -247,6 +247,29 @@ h4.static-with-rule {
     border-radius: 0;
 }
 
+.square-map__outer {
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%; // 100% of parent WIDTH!! Makes a square element.
+    position: relative;
+}
+
+.square-map__inner {
+    position: absolute; // Parent must keep its 0 height, so we need to create a new container for tiles.
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    #drag .square-map__tile {
+        position: static; // override position:absolute
+    }
+}
+
+#map_box {
+    top: 6em; // the default, 3em, overlaps the header
+}
+
 @media screen {
     dd.screen-no-space-after {
       margin-bottom: 0;
@@ -263,18 +286,23 @@ h4.static-with-rule {
 
     .mappage.admin {
       .container {
-        padding: 0;
+          padding: 0;
+          position: relative;
       }
 
       .content {
-        overflow: auto;
-        font-size: 0.8em;
-        background: transparent url(/cobrands/zurich/admin-print-columns.gif) top center repeat-y;
-        min-height: 0 !important; // override hard-coded inline min-height style
+          overflow: auto;
+          font-size: 0.8em;
+          background: transparent url(/cobrands/zurich/admin-print-columns.gif) top center repeat-y;
+          min-height: 0 !important; // override hard-coded inline min-height style
+
+          form {
+              @include clearfix; // because .admin-report-edit children are floated
+          }
       }
 
       #map_box {
-        display: none; // I am out of ideas for this element, so let's hide it for now
+          display: none; // Zurich has its own clone of the map, inside admin-report-edit--interact
       }
     }
 
@@ -309,7 +337,17 @@ h4.static-with-rule {
         float: right;
     }
 
+    .map_clone {
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+    }
+
     dd.print-no-space-after {
         margin-bottom: 0;
     }
+
+    #print_report_map {
+      page-break-before: always;
+    }
 }