diff options
| -rw-r--r-- | perllib/FixMyStreet/App.pm | 13 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/FiksGataMi.pm | 2 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Map/OSM.pm | 131 | ||||
| -rw-r--r-- | templates/web/default/around/around_index.html | 11 | ||||
| -rw-r--r-- | templates/web/default/maps/osm.html | 87 | ||||
| -rw-r--r-- | templates/web/default/maps/tilma/original.html | 39 |
6 files changed, 163 insertions, 120 deletions
diff --git a/perllib/FixMyStreet/App.pm b/perllib/FixMyStreet/App.pm index d6314ebf8..0c3a8d1cf 100644 --- a/perllib/FixMyStreet/App.pm +++ b/perllib/FixMyStreet/App.pm @@ -305,6 +305,19 @@ sub send_email { return $email; } +=head2 uri_with + + $uri = $c->uri_with( ... ); + +Simply forwards on to $c->req->uri_with - this is a common typo I make! + +=cut + +sub uri_with { + my $c = shift; + return $c->req->uri_with(@_); +} + =head2 uri_for $uri = $c->uri_for( ... ); diff --git a/perllib/FixMyStreet/Cobrand/FiksGataMi.pm b/perllib/FixMyStreet/Cobrand/FiksGataMi.pm index 9516cf0f6..adb044493 100644 --- a/perllib/FixMyStreet/Cobrand/FiksGataMi.pm +++ b/perllib/FixMyStreet/Cobrand/FiksGataMi.pm @@ -17,7 +17,7 @@ sub set_lang_and_domain { sub enter_postcode_text { my ( $self, $q ) = @_; - return _('Enter a nearby postcode, or street name and area:'); + return _('Enter a nearby postcode, or street name and area'); } # Is also adding language parameter diff --git a/perllib/FixMyStreet/Map/OSM.pm b/perllib/FixMyStreet/Map/OSM.pm index 4786ed59b..9ccbac017 100644 --- a/perllib/FixMyStreet/Map/OSM.pm +++ b/perllib/FixMyStreet/Map/OSM.pm @@ -32,7 +32,6 @@ sub map_type { # PINS is array of pins to show, location and colour sub display_map { my ($self, $c, %params) = @_; - $params{pre} ||= ''; # Map centre may be overridden in the query string $params{latitude} = Utils::truncate_coordinate($c->req->params->{lat} + 0) @@ -40,81 +39,46 @@ sub display_map { $params{longitude} = Utils::truncate_coordinate($c->req->params->{lon} + 0) if defined $c->req->params->{lon}; - my $zoom = defined $c->req->params->{zoom} ? $c->req->params->{zoom} : 2; + my $zoom = defined $c->req->params->{zoom} ? $c->req->params->{zoom} + 0 : 2; + $zoom = 3 if $zoom > 3; + $zoom = 0 if $zoom < 0; my $zoom_act = 14 + $zoom; my ($x_tile, $y_tile) = latlon_to_tile_with_adjust($params{latitude}, $params{longitude}, $zoom_act); - my $tl = ($x_tile-1) . "/" . ($y_tile-1); - my $tr = "$x_tile/" . ($y_tile-1); - my $bl = ($x_tile-1) . "/$y_tile"; - my $br = "$x_tile/$y_tile"; - my $tl_src = "http://a.tile.openstreetmap.org/$zoom_act/$tl.png"; - my $tr_src = "http://b.tile.openstreetmap.org/$zoom_act/$tr.png"; - my $bl_src = "http://c.tile.openstreetmap.org/$zoom_act/$bl.png"; - my $br_src = "http://tile.openstreetmap.org/$zoom_act/$br.png"; - map { s{/}{.} } ($tl, $tr, $bl, $br); - my @pins; - my $pins = ''; foreach my $pin (@{$params{pins}}) { - $pin->[3] ||= ''; - push @pins, "[ $pin->[0], $pin->[1], '$pin->[2]', '$pin->[3]' ]"; - $pins .= display_pin($q, $pin, $x_tile, $y_tile, $zoom_act); + my ($px, $py) = latlon_to_px($pin->[0], $pin->[1], $x_tile, $y_tile, $zoom_act); + push @pins, { + lat => $pin->[0], + lon => $pin->[1], + px => $px, + py => $py, + col => $pin->[2], + id => $pin->[3], + title => $pin->[4], + }; } - my $pins_js = join(",\n", @pins); - my $img_type; - if ($params{type}) { - $img_type = '<input type="image"'; - } else { - $img_type = '<img'; - } - my $out = ''; - my $copyright = _('Map © <a id="osm_link" href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'); - my $compass = compass($q, $x_tile, $y_tile, $zoom); - my $map_type = $self->map_type(); - $out .= <<EOF; -<input type="hidden" name="zoom" value="$zoom"> -<script type="text/javascript"> -var fixmystreet = { - 'latitude': $params{latitude}, - 'longitude': $params{longitude}, - 'pins': [ $pins_js ], - 'map_type': $map_type -} -</script> -<div id="map_box"> - $params{pre} - <div id="map"><noscript> - <div id="drag">$img_type alt="NW map tile" id="t2.2" name="tile_$tl" src="$tl_src" style="top:0; left:0;">$img_type alt="NE map tile" id="t2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:256px;"><br>$img_type alt="SW map tile" id="t3.2" name="tile_$bl" src="$bl_src" style="top:256px; left:0;">$img_type alt="SE map tile" id="t3.3" name="tile_$br" src="$br_src" style="top:256px; left:256px;"></div> - <div id="pins">$pins</div> - $compass - </noscript></div> - <p id="copyright">$copyright</p> -EOF + my $compass = { + north => [ map { Utils::truncate_coordinate($_) } tile_to_latlon( $x_tile, $y_tile-1, $zoom_act ) ], + south => [ map { Utils::truncate_coordinate($_) } tile_to_latlon( $x_tile, $y_tile+1, $zoom_act ) ], + west => [ map { Utils::truncate_coordinate($_) } tile_to_latlon( $x_tile-1, $y_tile, $zoom_act ) ], + east => [ map { Utils::truncate_coordinate($_) } tile_to_latlon( $x_tile+1, $y_tile, $zoom_act ) ], + here => [ map { Utils::truncate_coordinate($_) } tile_to_latlon( $x_tile, $y_tile, $zoom_act ) ], + }; $c->stash->{map} = { type => 'osm', + clickable => $params{type}, + latitude => $params{latitude}, + longitude => $params{longitude}, + map_type => $self->map_type(), + x_tile => $x_tile, + y_tile => $y_tile, + zoom => $zoom, + zoom_act => $zoom_act, + pins => \@pins, + compass => $compass, }; - return $out; -} - -sub display_pin { - my ($q, $pin, $x_tile, $y_tile, $zoom) = @_; - - my ($px, $py) = latlon_to_px($pin->[0], $pin->[1], $x_tile, $y_tile, $zoom); - - my $num = ''; - my $host = Page::base_url_with_lang($q, undef); - my %cols = (red=>'R', green=>'G', blue=>'B', purple=>'P'); - my $out = '<img border="0" class="pin" src="' . $host . '/i/pin' . $cols{$pin->[2]} - . $num . '.gif" alt="' . _('Problem') . '" style="top:' . ($py-59) - . 'px; left:' . ($px) . 'px; position: absolute;">'; - return $out unless $pin->[3]; - my $cobrand = Page::get_cobrand($q); - my $url = Cobrand::url($cobrand, NewURL($q, -url => '/report/' . $pin->[3]), $q); - # XXX Would like to include title here in title="" - $out = '<a href="' . $url . '">' . $out . '</a>'; - return $out; } # Given a lat/lon, convert it to OSM tile co-ordinates (precise). @@ -178,43 +142,12 @@ sub click_to_tile { # Given some click co-ords (the tile they were on, and where in the # tile they were), convert to WGS84 and return. sub click_to_wgs84 { - my ($self, $q, $pin_tile_x, $pin_x, $pin_tile_y, $pin_y) = @_; + my ($self, $c, $pin_tile_x, $pin_x, $pin_tile_y, $pin_y) = @_; my $tile_x = click_to_tile($pin_tile_x, $pin_x); my $tile_y = click_to_tile($pin_tile_y, $pin_y); - my $zoom = 14 + (defined $q->param('zoom') ? $q->param('zoom') : 2); + my $zoom = 14 + (defined $c->req->params->{zoom} ? $c->req->params->{zoom} : 2); my ($lat, $lon) = tile_to_latlon($tile_x, $tile_y, $zoom); return ( $lat, $lon ); } -sub compass ($$$$) { - my ( $q, $x, $y, $zoom ) = @_; - - my ($lat, $lon) = map { Utils::truncate_coordinate($_) } tile_to_latlon($x, $y-1, $zoom+14); - my $north = NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom ); - ($lat, $lon) = map { Utils::truncate_coordinate($_) } tile_to_latlon($x, $y+1, $zoom+14); - my $south = NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom ); - ($lat, $lon) = map { Utils::truncate_coordinate($_) } tile_to_latlon($x-1, $y, $zoom+14); - my $west = NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom ); - ($lat, $lon) = map { Utils::truncate_coordinate($_) } tile_to_latlon($x+1, $y, $zoom+14); - my $east = NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom ); - ($lat, $lon) = map { Utils::truncate_coordinate($_) } tile_to_latlon($x, $y, $zoom+14); - my $zoom_in = $zoom < 3 ? NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom+1 ) : '#'; - my $zoom_out = $zoom > 0 ? NewURL( $q, lat => $lat, lon => $lon, zoom => $zoom-1 ) : '#'; - my $world = NewURL( $q, lat => $lat, lon => $lon, zoom => 0 ); - - #my $host = Page::base_url_with_lang( $q, undef ); - my $dir = "/jslib/OpenLayers-2.10/img"; - return <<EOF; -<div style="position: absolute; left: 4px; top: 4px; z-index: 1007;" class="olControlPanZoom olControlNoSelect" unselectable="on"> - <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a href="$north"><img style="position: relative; width: 18px; height: 18px;" src="$dir/north-mini.png" border="0"></a></div> - <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a href="$west"><img style="position: relative; width: 18px; height: 18px;" src="$dir/west-mini.png" border="0"></a></div> - <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a href="$east"><img style="position: relative; width: 18px; height: 18px;" src="$dir/east-mini.png" border="0"></a></div> - <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a href="$south"><img style="position: relative; width: 18px; height: 18px;" src="$dir/south-mini.png" border="0"></a></div> - <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a href="$zoom_in"><img style="position: relative; width: 18px; height: 18px;" src="$dir/zoom-plus-mini.png" border="0"></a></div> - <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a href="$world"><img style="position: relative; width: 18px; height: 18px;" src="$dir/zoom-world-mini.png" border="0"></a></div> - <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a href="$zoom_out"><img style="position: relative; width: 18px; height: 18px;" src="$dir/zoom-minus-mini.png" border="0"></a></div> -</div> -EOF -} - 1; diff --git a/templates/web/default/around/around_index.html b/templates/web/default/around/around_index.html index d9e0bcddc..38d692db2 100644 --- a/templates/web/default/around/around_index.html +++ b/templates/web/default/around/around_index.html @@ -7,10 +7,15 @@ # '/report/new' and the partial hidden field is added to the form. %] +[% + question + = c.cobrand.enter_postcode_text() + || loc("Enter a nearby GB postcode, or street name and area"); +%] -<form action="[% '/around' %]" method="get" name="postcodeForm" id="postcodeForm"> - <label for="pc">[% loc("Enter a nearby GB postcode, or street name and area") %]:</label> <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200"> <input type="submit" value="[% loc('Go') %]" id="submit"> -[% c.cobrand.form_elements %] +<form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm"> + <label for="pc">[% question %]:</label> <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200"> <input type="submit" value="[% loc('Go') %]" id="submit"> +[% c.cobrand.form_elements('postcodeForm') %] [% IF partial_token %] <input type="hidden" name="partial" value="[% partial_token.token %]"> diff --git a/templates/web/default/maps/osm.html b/templates/web/default/maps/osm.html new file mode 100644 index 000000000..4c1c23166 --- /dev/null +++ b/templates/web/default/maps/osm.html @@ -0,0 +1,87 @@ +[% IF map.clickable %] + [% map.img_type = 'input type="image"' %] +[% ELSE %] + [% map.img_type = 'img' %] +[% END %] + +<input type="hidden" name="zoom" value="[% map.zoom %]"> +<script type="text/javascript"> +var fixmystreet = { + 'latitude': [% map.latitude %], + 'longitude': [% map.longitude %], + 'pins': [ +[% FOR pin IN map.pins -%] + [ [% pin.lat %], [% pin.lon %], '[% pin.col %]', '[% pin.id %]', '[% pin.title %]' ] + [%- IF !loop.last %],[% END %] +[% END %] ], + 'map_type': [% map.map_type %] +} +</script> +<div id="map_box"> + [% pre_map %] + <div id="map"><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="http://a.tile.openstreetmap.org/[% map.zoom_act %]/[% map.x_tile - 1 %]/[% map.y_tile - 1 %].png" + 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="http://b.tile.openstreetmap.org/[% map.zoom_act %]/[% map.x_tile %]/[% map.y_tile - 1 %].png" + 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="http://c.tile.openstreetmap.org/[% map.zoom_act %]/[% map.x_tile - 1 %]/[% map.y_tile %].png" + style="top:256px; left:0;"><[% map.img_type %] + alt="SE map tile" id="t3.3" + name="tile_[% map.x_tile %].[% map.y_tile %]" + src="http://tile.openstreetmap.org/[% map.zoom_act %]/[% map.x_tile %]/[% map.y_tile %].png" + style="top:256px; left:256px;"></div> + <div id="pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div> + [% INCLUDE compass %] + </noscript></div> + <p id="copyright"> + [% loc('Map © <a id="osm_link" href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>') %] + </p> + + +[% 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 } ); + zoom_in = c.uri_with( { zoom = map.zoom + 1 } ) IF map.zoom < 3; + zoom_out = c.uri_with( { zoom = map.zoom - 1 } ) IF map.zoom > 0; + zoom_in = '#' IF map.zoom >= 3; + zoom_out = '#' IF map.zoom <= 0 +%] +<div style="position: absolute; left: 4px; top: 4px; z-index: 1007;" class="olControlPanZoom olControlNoSelect" unselectable="on"> + <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/north-mini.png" border="0"></a></div> + <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/west-mini.png" border="0"></a></div> + <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/east-mini.png" border="0"></a></div> + <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/south-mini.png" border="0"></a></div> + <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-plus-mini.png" border="0"></a></div> + <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-world-mini.png" border="0"></a></div> + <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-minus-mini.png" border="0"></a></div> +</div> +[% END %] + + +[% BLOCK pin %] + +[% cols = { + red = 'R', green = 'G', blue = 'B', purple = 'P', + } +%] +[% 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('/i/pin' _ cols.${pin.col} _ '.gif') %]" + alt="[% loc('Problem') %]" style="top:[% pin.py - 59 %]px; left:[% pin.px %]px; position: absolute;"> +[%- IF pin.id -%] +</a> +[% END %] + +[% END %] diff --git a/templates/web/default/maps/tilma/original.html b/templates/web/default/maps/tilma/original.html index 53231672a..6e3c34a86 100644 --- a/templates/web/default/maps/tilma/original.html +++ b/templates/web/default/maps/tilma/original.html @@ -36,23 +36,7 @@ var fixmystreet = { <div id="pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div> </div> [% '<div id="watermark"></div>' IF map.watermark %] - <table cellpadding="0" cellspacing="0" border="0" id="compass"> - <tr valign="bottom"> - <td align="right"><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-northwest.gif') %]" alt="NW" width=11 height=11></a></td> - <td align="center"><a href="[% c.req.uri_with( { x => map.x, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-north.gif') %]" vspace="3" alt="N" width=13 height=11></a></td> - <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-northeast.gif') %]" alt="NE" width=11 height=11></a></td> - </tr> - <tr> - <td><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y } ) %]"><img src="[% c.uri_for('/i/arrow-west.gif') %]" hspace="3" alt="W" width=11 height=13></a></td> - <td align="center"><a href="$recentre"><img src="[% c.uri_for('/i/rose.gif') %]" alt="Recentre" width=35 height=34></a></td> - <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y } ) %]"><img src="[% c.uri_for('/i/arrow-east.gif') %]" hspace="3" alt="E" width=11 height=13></a></td> - </tr> - <tr valign="top"> - <td align="right"><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-southwest.gif') %]" alt="SW" width=11 height=11></a></td> - <td align="center"><a href="[% c.req.uri_with( { x => map.x, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-south.gif') %]" vspace="3" alt="S" width=13 height=11></a></td> - <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-southeast.gif') %]" alt="SE" width=11 height=11></a></td> - </tr> - </table> + [% INCLUDE compass %] </div> <p id="copyright">[% map.copyright %]</p> @@ -74,3 +58,24 @@ var fixmystreet = { [% END %] [% END %] + + +[% BLOCK compass %] + <table cellpadding="0" cellspacing="0" border="0" id="compass"> + <tr valign="bottom"> + <td align="right"><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-northwest.gif') %]" alt="NW" width=11 height=11></a></td> + <td align="center"><a href="[% c.req.uri_with( { x => map.x, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-north.gif') %]" vspace="3" alt="N" width=13 height=11></a></td> + <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y + 1 } ) %]"><img src="[% c.uri_for('/i/arrow-northeast.gif') %]" alt="NE" width=11 height=11></a></td> + </tr> + <tr> + <td><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y } ) %]"><img src="[% c.uri_for('/i/arrow-west.gif') %]" hspace="3" alt="W" width=11 height=13></a></td> + <td align="center"><a href="$recentre"><img src="[% c.uri_for('/i/rose.gif') %]" alt="Recentre" width=35 height=34></a></td> + <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y } ) %]"><img src="[% c.uri_for('/i/arrow-east.gif') %]" hspace="3" alt="E" width=11 height=13></a></td> + </tr> + <tr valign="top"> + <td align="right"><a href="[% c.req.uri_with( { x => map.x - 1, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-southwest.gif') %]" alt="SW" width=11 height=11></a></td> + <td align="center"><a href="[% c.req.uri_with( { x => map.x, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-south.gif') %]" vspace="3" alt="S" width=13 height=11></a></td> + <td><a href="[% c.req.uri_with( { x => map.x + 1, y => map.y - 1 } ) %]"><img src="[% c.uri_for('/i/arrow-southeast.gif') %]" alt="SE" width=11 height=11></a></td> + </tr> + </table> +[% END %] |