Templating of OSM map.

1 files changed, 32 insertions, 99 deletions

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 &copy; <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;