aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--perllib/FixMyStreet/App/Controller/Admin.pm1
-rw-r--r--perllib/FixMyStreet/Map/Zurich.pm155
-rw-r--r--templates/web/base/maps/noscript_map.html64
-rw-r--r--templates/web/base/maps/openlayers.html61
-rw-r--r--templates/web/zurich/admin/report_edit-sdm.html10
-rw-r--r--templates/web/zurich/admin/report_edit.html10
-rw-r--r--templates/web/zurich/maps/noscript_map.html70
-rw-r--r--web/cobrands/zurich/base.scss50
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;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 16:56:16 +0000