Template original Tilma map and some more text, updates on questionnaire page, bring in click pin fix from pre-london branch, other map types will be broken.

17 files changed, 148 insertions, 109 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm
index f8befcef7..054f83a35 100644
--- a/perllib/FixMyStreet/App/Controller/Around.pm
+++ b/perllib/FixMyStreet/App/Controller/Around.pm
@@ -182,12 +182,12 @@ sub display_location : Private {
     # create a list of all the pins
     my @pins = map {
         my $pin_colour = $_->{state} eq 'fixed' ? 'green' : 'red';
-        [ $_->{latitude}, $_->{longitude}, $pin_colour, $_->{id} ];
+        [ $_->{latitude}, $_->{longitude}, $pin_colour, $_->{id}, $_->{title} ];
     } @$on_map_all, @$around_map;
 
     {    # FIXME - ideally this indented code should be in the templates
         $c->stash->{map_html} = FixMyStreet::Map::display_map(
-            $c->fake_q,
+            $c, $c->fake_q,
             latitude  => $latitude,
             longitude => $longitude,
             type      => 1,
diff --git a/perllib/FixMyStreet/App/Controller/Questionnaire.pm b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
index 8b804e421..0fafcdc2e 100755
--- a/perllib/FixMyStreet/App/Controller/Questionnaire.pm
+++ b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
@@ -202,14 +202,17 @@ sub display : Private {
       map { Utils::truncate_coordinate($_) }
       ( $problem->latitude, $problem->longitude );
 
-    my $problem_text = ''; # Page::display_problem_text($c->fake_q, $problem); # FIXME This needs to be in the template
-    $c->stash->{updates} = ''; # FIXME Should be database ResultSet of problem's pdates
+    my $updates = $c->model('DB::Comment')->search(
+        { problem_id => $problem->id, state => 'confirmed' },
+        { order_by => 'confirmed' }
+    );
+    $c->stash->{updates} = $updates;
+
     $c->stash->{map_start_html} = FixMyStreet::Map::display_map(
-        $c->fake_q,
+        $c, $c->fake_q,
         latitude  => $problem->latitude,
         longitude => $problem->longitude,
         pins      => [ [ $problem->latitude, $problem->longitude, $problem->state eq 'fixed' ? 'green' : 'red' ] ],
-        pre       => $problem_text,
     );
     $c->stash->{map_js}                = FixMyStreet::Map::header_js();
     $c->stash->{cobrand_form_elements} = $c->cobrand->form_elements('questionnaireForm');
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 3a915b0a0..a0e5d44c4 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -148,23 +148,10 @@ sub format_problem_for_display : Private {
 sub generate_map_tags : Private {
     my ( $self, $c ) = @_;
 
-    my $problem   = $c->stash->{problem};
-
-    my ( $short_lat, $short_lon ) =
-      ( $c->stash->{short_latitude}, $c->stash->{short_longitude} );
-
-    my $google_link =
-      $c->cobrand->base_url_for_emails() . '/report/' . $problem->id;
-
-    $c->stash->{map_links} =
-        "<p id='sub_map_links'>"
-      . "<a href=\"http://maps.google.co.uk/maps?output=embed&amp;z=16&amp;q="
-      . URI::Escape::uri_escape_utf8( $problem->title . ' - ' . $google_link )
-      . "\@$short_lat,$short_lon\">View on Google Maps</a></p>"
-      if mySociety::Config::get('COUNTRY') eq 'GB';
+    my $problem = $c->stash->{problem};
 
     $c->stash->{map_start_html} = FixMyStreet::Map::display_map(
-        $c->fake_q,
+        $c, $c->fake_q,
         latitude  => $problem->latitude,
         longitude => $problem->longitude,
         type      => 0,
@@ -174,7 +161,7 @@ sub generate_map_tags : Private {
     );
     $c->stash->{map_js}       = FixMyStreet::Map::header_js();
 
-      return 1;
+    return 1;
 }
 
 __PACKAGE__->meta->make_immutable;
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 180d2198d..817cee11e 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -903,13 +903,11 @@ sub generate_map : Private {
 
     # Don't do anything if the user skipped the map
     unless ( $c->req->param('skipped') ) {
-        my $map_type = $allow_photo_upload ? 2 : 1;
-
         $c->stash->{map_html} = FixMyStreet::Map::display_map(
-            $c->fake_q,
+            $c, $c->fake_q,
             latitude  => $latitude,
             longitude => $longitude,
-            type      => $map_type,
+            type      => 1,
             pins      => [ [ $latitude, $longitude, 'purple' ] ],
         );
     }
diff --git a/perllib/FixMyStreet/Map/Bing.pm b/perllib/FixMyStreet/Map/Bing.pm
index 4b15b4a76..ccd57221f 100644
--- a/perllib/FixMyStreet/Map/Bing.pm
+++ b/perllib/FixMyStreet/Map/Bing.pm
@@ -26,7 +26,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/BingOL.pm b/perllib/FixMyStreet/Map/BingOL.pm
index 39ac2781a..4d1e0a270 100644
--- a/perllib/FixMyStreet/Map/BingOL.pm
+++ b/perllib/FixMyStreet/Map/BingOL.pm
@@ -28,7 +28,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/Google.pm b/perllib/FixMyStreet/Map/Google.pm
index d74f5eb2d..92eda0a7b 100644
--- a/perllib/FixMyStreet/Map/Google.pm
+++ b/perllib/FixMyStreet/Map/Google.pm
@@ -26,7 +26,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/OSM.pm b/perllib/FixMyStreet/Map/OSM.pm
index 292ad4ed7..73742d0d3 100644
--- a/perllib/FixMyStreet/Map/OSM.pm
+++ b/perllib/FixMyStreet/Map/OSM.pm
@@ -33,7 +33,7 @@ sub map_type {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     # Map centre may be overridden in the query string
@@ -94,6 +94,9 @@ var fixmystreet = {
     </noscript></div>
     <p id="copyright">$copyright</p>
 EOF
+    $c->stash->{map} = {
+        type => 'osm',
+    };
     return $out;
 }
 
diff --git a/perllib/FixMyStreet/Map/OSM/StreetView.pm b/perllib/FixMyStreet/Map/OSM/StreetView.pm
index 9849c1ed5..e9b86547e 100644
--- a/perllib/FixMyStreet/Map/OSM/StreetView.pm
+++ b/perllib/FixMyStreet/Map/OSM/StreetView.pm
@@ -27,7 +27,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/Tilma/OL/1_10k.pm b/perllib/FixMyStreet/Map/Tilma/OL/1_10k.pm
index d8ce80fab..08e1036bb 100644
--- a/perllib/FixMyStreet/Map/Tilma/OL/1_10k.pm
+++ b/perllib/FixMyStreet/Map/Tilma/OL/1_10k.pm
@@ -33,7 +33,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/Tilma/OL/StreetView.pm b/perllib/FixMyStreet/Map/Tilma/OL/StreetView.pm
index 74dd315bb..bbef3c532 100644
--- a/perllib/FixMyStreet/Map/Tilma/OL/StreetView.pm
+++ b/perllib/FixMyStreet/Map/Tilma/OL/StreetView.pm
@@ -33,7 +33,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
+    my ($self, $c, $q, %params) = @_;
     $params{pre} ||= '';
 
     my @pins;
diff --git a/perllib/FixMyStreet/Map/Tilma/Original.pm b/perllib/FixMyStreet/Map/Tilma/Original.pm
index bf55e51eb..d5f92d3c9 100644
--- a/perllib/FixMyStreet/Map/Tilma/Original.pm
+++ b/perllib/FixMyStreet/Map/Tilma/Original.pm
@@ -41,8 +41,7 @@ sub header_js {
 # PINS is array of pins to show, location and colour
 # PRE/POST are HTML to show above/below map
 sub display_map {
-    my ($self, $q, %params) = @_;
-    $params{pre} ||= '';
+    my ($self, $c, $q, %params) = @_;
     my $mid_point = TILE_WIDTH; # Map is 2 TILE_WIDTHs in size, square.
     if (my $mp = Cobrand::tilma_mid_point(Page::get_cobrand($q))) {
         $mid_point = $mp;
@@ -68,11 +67,17 @@ sub display_map {
 
     my ($x, $y, $px, $py) = os_to_px_with_adjust($q, $params{easting}, $params{northing}, $input{x}, $input{y});
 
-    my $pins = '';
+    my @pins;
     foreach my $pin (@{$params{pins}}) {
         my $pin_x = os_to_px($pin->[0], $x);
         my $pin_y = os_to_px($pin->[1], $y, 1);
-        $pins .= display_pin($q, $pin_x, $pin_y, $pin->[2]);
+        push @pins, {
+            px => $pin_x,
+            py => $pin_y,
+            col => $pin->[2],
+            id => $pin->[3],
+            title => $pin->[4],
+        };
     }
 
     $px = defined($px) ? $mid_point - $px : 0;
@@ -82,76 +87,38 @@ sub display_map {
     my $url = 'http://tilma.mysociety.org/tileserver/' . TILE_TYPE . '/';
     my $tiles_url = $url . ($x-1) . '-' . $x . ',' . ($y-1) . '-' . $y . '/RABX';
     my $tiles = LWP::Simple::get($tiles_url);
-    return '<div id="map_box"> <div id="map"><div id="drag">' . _("Unable to fetch the map tiles from the tile server.") . '</div></div></div><div id="side">' if !$tiles;
     my $tileids = RABX::unserialise($tiles);
-    my $tl = ($x-1) . '.' . $y;
-    my $tr = $x . '.' . $y;
-    my $bl = ($x-1) . '.' . ($y-1);
-    my $br = $x . '.' . ($y-1);
-    return '<div id="side">' if (!$tileids->[0][0] || !$tileids->[0][1] || !$tileids->[1][0] || !$tileids->[1][1]);
-    my $tl_src = $url . $tileids->[0][0];
-    my $tr_src = $url . $tileids->[0][1];
-    my $bl_src = $url . $tileids->[1][0];
-    my $br_src = $url . $tileids->[1][1];
-
-    my $cobrand = Page::get_cobrand($q);
-    my $root_path_js = Cobrand::root_path_js($cobrand, $q);
-    my $out = '';
-    my $img_type;
-    if ($params{type}) {
-        $out .= <<EOF;
-<input type="hidden" name="x" id="formX" value="$x">
-<input type="hidden" name="y" id="formY" value="$y">
-EOF
-        $img_type = '<input type="image"';
-    } else {
-        $img_type = '<img';
-    }
-    my $imgw = TILE_WIDTH . 'px';
-    my $tile_width = TILE_WIDTH;
-    my $tile_type = TILE_TYPE;
-    $out .= <<EOF;
-<script type="text/javascript">
-$root_path_js
-var fixmystreet = {
-    'x': $x - 3,
-    'y': $y - 3,
-    'start_x': $px,
-    'start_y': $py,
-    'tile_type': '$tile_type',
-    'tilewidth': $tile_width,
-    'tileheight': $tile_width
-};
-</script>
-<div id="map_box">
-$params{pre}
-    <div id="map"><div id="drag">
-        $img_type alt="NW map tile" id="t2.2" name="tile_$tl" src="$tl_src" style="top:0px; left:0;">$img_type alt="NE map tile" id="t2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:$imgw;"><br>$img_type alt="SW map tile" id="t3.2" name="tile_$bl" src="$bl_src" style="top:$imgw; left:0;">$img_type alt="SE map tile" id="t3.3" name="tile_$br" src="$br_src" style="top:$imgw; left:$imgw;">
-        <div id="pins">$pins</div>
-    </div>
-EOF
-    $out .= '<div id="watermark"></div>' if $self->watermark();
-    $out .= compass($q, $x, $y);
-    my $copyright = $self->copyright();
-    $out .= <<EOF;
-    </div>
-    <p id="copyright">$copyright</p>
-EOF
-    return $out;
+    $c->stash->{map} = {
+        type => 'tilma/original',
+        pins => \@pins,
+        tiles => $tiles,
+        clickable => $params{type},
+        url => $url,
+        tileids => $tileids,
+        x => $x,
+        y => $y,
+        px => $px,
+        py => $py,
+        tile_type => TILE_TYPE,
+        tilewidth => TILE_WIDTH,
+        tileheight => TILE_WIDTH,
+        watermark => $self->watermark(),
+        copyright => $self->copyright(),
+    };
 }
 
 sub display_pin {
-    my ($q, $px, $py, $col, $num) = @_;
+    my ($q, $px, $py, $col, $id, $title, $num) = @_;
     $num = '' if !$num || $num > 9;
     my $host = Page::base_url_with_lang($q, undef);
     my %cols = (red=>'R', green=>'G', blue=>'B', purple=>'P');
     my $out = '<img class="pin" src="' . $host . '/i/pin' . $cols{$col}
         . $num . '.gif" alt="' . _('Problem') . '" style="top:' . ($py-59)
         . 'px; left:' . ($px) . 'px; position: absolute;">';
-    return $out unless $_ && $_->{id} && $col ne 'blue';
+    return $out unless $id;
     my $cobrand = Page::get_cobrand($q);
-    my $url = Cobrand::url($cobrand, NewURL($q, -url => '/report/' . $_->{id}), $q);
-    $out = '<a title="' . ent($_->{title}) . '" href="' . $url . '">' . $out . '</a>';
+    my $url = Cobrand::url($cobrand, NewURL($q, -url => '/report/' . $id), $q);
+    $out = '<a title="' . ent($title) . '" href="' . $url . '">' . $out . '</a>';
     return $out;
 }
 
@@ -172,7 +139,7 @@ sub map_pins {
         my $px = os_to_px($_->{easting}, $sx);
         my $py = os_to_px($_->{northing}, $sy, 1);
         my $col = $_->{state} eq 'fixed' ? 'green' : 'red';
-        $pins .= display_pin($q, $px, $py, $col);
+        $pins .= display_pin($q, $px, $py, $col, $_->{id}, $_->{title});
     }
 
     foreach (@$nearby) {
@@ -181,7 +148,7 @@ sub map_pins {
         my $px = os_to_px($_->{easting}, $sx);
         my $py = os_to_px($_->{northing}, $sy, 1);
         my $col = $_->{state} eq 'fixed' ? 'green' : 'red';
-        $pins .= display_pin($q, $px, $py, $col);
+        $pins .= display_pin($q, $px, $py, $col, $_->{id}, $_->{title});
     }
 
     return ($pins, $around_map_list, $nearby, $dist);
diff --git a/templates/web/default/around/display_location.html b/templates/web/default/around/display_location.html
index b46b242d6..f9a9bdc51 100755
--- a/templates/web/default/around/display_location.html
+++ b/templates/web/default/around/display_location.html
@@ -43,7 +43,7 @@
 <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% short_latitude | html %]">
 <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% short_longitude | html %]">
 
-[% map_html %]
+[% INCLUDE "maps/${map.type}.html" %]
 
 <p id='sub_map_links'>
     [% IF c.req.params.no_pins %]
diff --git a/templates/web/default/maps/tilma/original.html b/templates/web/default/maps/tilma/original.html
new file mode 100644
index 000000000..53231672a
--- /dev/null
+++ b/templates/web/default/maps/tilma/original.html
@@ -0,0 +1,76 @@
+[% IF !map.tiles %]
+    <div id="map_box">
+        <div id="map"><div id="drag">
+            [% loc("Unable to fetch the map tiles from the tile server.") %]
+        </div></div>
+    [% RETURN %]
+[% END %]
+
+[% IF map.clickable %]
+<input type="hidden" name="x" id="formX" value="[% map.x %]">
+<input type="hidden" name="y" id="formY" value="[% map.y %]">
+    [% map.img_type = 'input type="image"' %]
+[% ELSE %]
+    [% map.img_type = 'img' %]
+[% END %]
+<script type="text/javascript">
+[% c.cobrand.root_path_js %]
+var fixmystreet = {
+    'x': [% map.x - 3 %],
+    'y': [% map.y - 3 %],
+    'start_x': [% map.px %],
+    'start_y': [% map.py %],
+    'tile_type': '[% map.tile_type %]',
+    'tilewidth': [% map.tilewidth %],
+    'tileheight': [% map.tilewidth %]
+};
+</script>
+<div id="map_box">
+    [% pre_map %]
+    <div id="map"><div id="drag">
+        <[% map.img_type %]
+            alt="NW map tile" id="t2.2" name="tile_[% map.x - 1 %].[% map.y %]" src="[% map.url %][% map.tileids.0.0 %]" style="top:0px; left:0;"><[% map.img_type %]
+            alt="NE map tile" id="t2.3" name="tile_[% map.x %].[% map.y %]" src="[% map.url %][% map.tileids.0.1 %]" style="top:0px; left:[% map.tilewidth %]px;"><br><[% map.img_type %]
+            alt="SW map tile" id="t3.2" name="tile_[% map.x - 1 %].[% map.y - 1 %]" src="[% map.url %][% map.tileids.1.0 %]" style="top:[% map.tilewidth %]px; left:0;"><[% map.img_type %]
+            alt="SE map tile" id="t3.3" name="tile_[% map.x %].[% map.y - 1 %]" src="[% map.url %][% map.tileids.1.1 %]" style="top:[% map.tilewidth %]px; left:[% map.tilewidth %]px;">
+        <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>
+    </div>
+    <p id="copyright">[% map.copyright %]</p>
+
+
+[% BLOCK pin %]
+
+[% num = '' IF !num or num > 9;
+   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 class="pin" src="[% c.uri_for('/i/pin' _ cols.${pin.col} _ num _ '.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/questionnaire/index.html b/templates/web/default/questionnaire/index.html
index 2bc28451f..dd811394c 100644
--- a/templates/web/default/questionnaire/index.html
+++ b/templates/web/default/questionnaire/index.html
@@ -1,9 +1,8 @@
 [% INCLUDE 'header.html', title = loc('Questionnaire') %]
 
-[% INCLUDE 'report/_main.html' %]
+[% pre_map = INCLUDE 'report/_main.html' %]
 
-# FIXME The below should be in the template, by including a map template.
-[% map_start_html %]
+[% INCLUDE "maps/${map.type}.html" %]
 
 [% INCLUDE 'report/updates.html' %]
 
diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html
index 58bc494e9..1461ffc39 100644
--- a/templates/web/default/report/display.html
+++ b/templates/web/default/report/display.html
@@ -6,8 +6,15 @@
         robots = 'index, nofollow'
 %]
 
-[% map_start_html %]
-[% map_links %]
+[% INCLUDE "maps/${map.type}.html" %]
+
+[% IF c.config.COUNTRY == 'GB' %]
+<p id='sub_map_links'>
+    <a href="http://maps.google.co.uk/maps?output=embed&amp;z=16&amp;q=
+    [%- problem.title _ ' - ' _ c.cobrand.base_url_for_emails _ '/report/' _ problem.id | uri -%]
+@[% short_latitude %],[% short_longitude %]">View on Google Maps</a></p>
+[% END %]
+
 </div>
 <div id="side">
 
diff --git a/templates/web/default/report/new/fill_in_details.html b/templates/web/default/report/new/fill_in_details.html
index 1016a1ede..fcf08b884 100644
--- a/templates/web/default/report/new/fill_in_details.html
+++ b/templates/web/default/report/new/fill_in_details.html
@@ -16,13 +16,12 @@
 <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% short_latitude | html %]">
 <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% short_longitude | html %]">
 
-[% map_html %]
-
 [% IF report.used_map %]
-</div>
-<div id="side">
+    [% INCLUDE "maps/${map.type}.html" %]
+    </div>
+    <div id="side">
 [% ELSE %]
-<div id="skipped-map">
+    <div id="skipped-map">
 [% END %]
 
 <h1>[% loc('Reporting a problem') %]</h1>