Merge branch 'around-and-about-pagination'

27 files changed, 218 insertions, 212 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64d3af0b0..c3d229bd6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@
         - Always show pagination figures even if only one page. #1787
         - Report pages list more updates to a report. #1806
         - Clearer wording and more prominent email input on alert page. #1829
+        - Paginate reports on `/around`. #1805 #1577 #525
         - Cobrands can implement `hide_areas_on_reports` to hide outline on map.
         - Templates to allow extra messages through problem confirmation. #1837
         - Optimised sprite file down from 97 KB to 36 KB. #1852
diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm
index 6af780c35..d1bf2d950 100644
--- a/perllib/FixMyStreet/App/Controller/Around.pm
+++ b/perllib/FixMyStreet/App/Controller/Around.pm
@@ -33,19 +33,24 @@ If no search redirect back to the homepage.
 sub index : Path : Args(0) {
     my ( $self, $c ) = @_;
 
-    # handle old coord systems
-    $c->forward('redirect_en_or_xy_to_latlon');
-
-    # Check if we have a partial report
-    my $partial_report = $c->forward('load_partial');
+    if ($c->get_param('ajax')) {
+        $c->detach('ajax');
+    }
 
     # Check if the user is searching for a report by ID
     if ( $c->get_param('pc') && $c->get_param('pc') =~ $c->cobrand->lookup_by_ref_regex ) {
         $c->go('lookup_by_ref', [ $1 ]);
     }
 
+    # handle old coord systems
+    $c->forward('redirect_en_or_xy_to_latlon');
+
+    # Check if we have a partial report
+    my $partial_report = $c->forward('load_partial');
+
     # Try to create a location for whatever we have
-    my $ret = $c->forward('/location/determine_location_from_coords')
+    my $ret = $c->forward('/location/determine_location_from_bbox')
+        || $c->forward('/location/determine_location_from_coords')
         || $c->forward('/location/determine_location_from_pc');
     unless ($ret) {
         return $c->res->redirect('/') unless $c->get_param('pc') || $partial_report;
@@ -170,7 +175,11 @@ sub display_location : Private {
     my $latitude  = $c->stash->{latitude};
     my $longitude = $c->stash->{longitude};
 
-    $c->forward('map_features', [ { latitude => $latitude, longitude => $longitude } ] );
+    if (my $bbox = $c->stash->{bbox}) {
+        $c->forward('map_features', [ { bbox => $bbox } ]);
+    } else {
+        $c->forward('map_features', [ { latitude => $latitude, longitude => $longitude } ]);
+    }
 
     FixMyStreet::Map::display_map(
         $c,
@@ -245,16 +254,11 @@ sub map_features : Private {
     $c->forward( '/reports/stash_report_filter_status' );
     $c->forward( '/reports/stash_report_sort', [ 'created-desc' ]);
 
-    # Deal with pin hiding/age
-    my $all_pins = $c->get_param('all_pins') ? 1 : undef;
-    $c->stash->{all_pins} = $all_pins;
-    my $interval = $all_pins ? undef : $c->cobrand->on_map_default_max_pin_age;
-
     return if $c->get_param('js'); # JS will request the same (or more) data client side
 
-    my ( $on_map_all, $on_map_list, $nearby, $distance ) =
+    my ( $on_map, $nearby, $distance ) =
       FixMyStreet::Map::map_features(
-        $c, interval => $interval, %$extra,
+        $c, %$extra,
         categories => [ keys %{$c->stash->{filter_category}} ],
         states => $c->stash->{filter_problem_states},
         order => $c->stash->{sort_order},
@@ -266,16 +270,16 @@ sub map_features : Private {
             # Here we might have a DB::Problem or a DB::Result::Nearby, we always want the problem.
             my $p = (ref $_ eq 'FixMyStreet::DB::Result::Nearby') ? $_->problem : $_;
             $p->pin_data($c, 'around');
-        } @$on_map_all, @$nearby;
+        } @$on_map, @$nearby;
     }
 
     $c->stash->{pins} = \@pins;
-    $c->stash->{on_map} = $on_map_list;
+    $c->stash->{on_map} = $on_map;
     $c->stash->{around_map} = $nearby;
     $c->stash->{distance} = $distance;
 }
 
-=head2 /ajax
+=head2 ajax
 
 Handle the ajax calls that the map makes when it is dragged. The info returned
 is used to update the pins on the map and the text descriptions on the side of
@@ -283,11 +287,11 @@ the map.
 
 =cut
 
-sub ajax : Path('/ajax') {
+sub ajax : Private {
     my ( $self, $c ) = @_;
 
-    my $bbox = $c->get_param('bbox');
-    unless ($bbox) {
+    my $ret = $c->forward('/location/determine_location_from_bbox');
+    unless ($ret) {
         $c->res->status(404);
         $c->res->body('');
         return;
@@ -296,7 +300,7 @@ sub ajax : Path('/ajax') {
     my %valid_categories = map { $_ => 1 } $c->get_param_list('filter_category', 1);
     $c->stash->{filter_category} = \%valid_categories;
 
-    $c->forward('map_features', [ { bbox => $bbox } ]);
+    $c->forward('map_features', [ { bbox => $c->stash->{bbox} } ]);
     $c->forward('/reports/ajax', [ 'around/on_map_list_items.html' ]);
 }
 
diff --git a/perllib/FixMyStreet/App/Controller/Location.pm b/perllib/FixMyStreet/App/Controller/Location.pm
index cb2077ede..8d5b0b147 100644
--- a/perllib/FixMyStreet/App/Controller/Location.pm
+++ b/perllib/FixMyStreet/App/Controller/Location.pm
@@ -110,6 +110,21 @@ sub determine_location_from_pc : Private {
     return;
 }
 
+sub determine_location_from_bbox : Private {
+    my ( $self, $c ) = @_;
+
+    my $bbox = $c->get_param('bbox');
+    return unless $bbox;
+
+    my ($min_lon, $min_lat, $max_lon, $max_lat) = split /,/, $bbox;
+    my $longitude = ($max_lon + $min_lon ) / 2;
+    my $latitude = ($max_lat + $min_lat ) / 2;
+    $c->stash->{bbox} = $bbox;
+    $c->stash->{latitude} = $latitude;
+    $c->stash->{longitude} = $longitude;
+    return $c->forward('check_location');
+}
+
 =head2 check_location
 
 Just make sure that for UK installs, our co-ordinates are indeed in the UK.
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 4c7931420..ac52b217c 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -524,24 +524,23 @@ sub nearby_json : Private {
     $c->stash->{page} = 'report';
 
     my $nearby = $c->model('DB::Nearby')->nearby(
-        $c, $dist, [ $p->id ], 5, $p->latitude, $p->longitude, undef, [ $p->category ], undef
+        $c, $dist, [ $p->id ], 5, $p->latitude, $p->longitude, [ $p->category ], undef
     );
     my @pins = map {
         my $p = $_->problem;
-        my $colour = $c->cobrand->pin_colour( $p, 'around' );
-        [ $p->latitude, $p->longitude,
-          $colour,
-          $p->id, $p->title_safe, 'small', JSON->false
+        $p = $p->pin_data($c, 'around');
+        [ $p->{latitude}, $p->{longitude}, $p->{colour},
+          $p->{id}, $p->{title}, 'small', JSON->false
         ]
     } @$nearby;
 
-    my $on_map_list_html = $c->render_fragment(
+    my $list_html = $c->render_fragment(
         'around/on_map_list_items.html',
-        { on_map => [], around_map => $nearby }
+        { around_map => [], on_map => $nearby }
     );
 
     my $json = { pins => \@pins };
-    $json->{reports_list} = $on_map_list_html if $on_map_list_html;
+    $json->{reports_list} = $list_html if $list_html;
     my $body = encode_json($json);
     $c->res->content_type('application/json; charset=utf-8');
     $c->res->body($body);
diff --git a/perllib/FixMyStreet/Cobrand/Bromley.pm b/perllib/FixMyStreet/Cobrand/Bromley.pm
index e7d5e186a..2f47225a7 100644
--- a/perllib/FixMyStreet/Cobrand/Bromley.pm
+++ b/perllib/FixMyStreet/Cobrand/Bromley.pm
@@ -59,10 +59,6 @@ sub map_type {
     'Bromley';
 }
 
-sub on_map_default_max_pin_age {
-    return '1 month';
-}
-
 # Bromley pins always yellow
 sub pin_colour {
     my ( $self, $p, $context ) = @_;
diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm
index 9e49099aa..ada1058f5 100644
--- a/perllib/FixMyStreet/Cobrand/Default.pm
+++ b/perllib/FixMyStreet/Cobrand/Default.pm
@@ -437,22 +437,6 @@ sub reports_ordering {
     return 'updated-desc';
 }
 
-=head2 on_map_list_limit
-
-Return the maximum number of items to be given in the list of reports on the map
-
-=cut
-
-sub on_map_list_limit { return undef; }
-
-=head2 on_map_default_max_pin_age
-
-Return the default maximum age for pins.
-
-=cut
-
-sub on_map_default_max_pin_age { return '6 months'; }
-
 =head2 on_map_default_status
 
 Return the default ?status= query parameter to use for filter on map page.
diff --git a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
index a50a22ff9..ed9e5bdea 100644
--- a/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
+++ b/perllib/FixMyStreet/Cobrand/FixMyStreet.pm
@@ -55,10 +55,9 @@ sub extra_contact_validation {
 
     $c->stash->{dest} = $c->get_param('dest');
 
-    $errors{dest} = "Please enter who your message is for"
-        unless $c->get_param('dest');
-
-    if ( $c->get_param('dest') eq 'council' || $c->get_param('dest') eq 'update' ) {
+    if (!$c->get_param('dest')) {
+        $errors{dest} = "Please enter who your message is for";
+    } elsif ( $c->get_param('dest') eq 'council' || $c->get_param('dest') eq 'update' ) {
         $errors{not_for_us} = 1;
     }
 
diff --git a/perllib/FixMyStreet/Cobrand/Greenwich.pm b/perllib/FixMyStreet/Cobrand/Greenwich.pm
index ce4fae381..6ff30e83d 100644
--- a/perllib/FixMyStreet/Cobrand/Greenwich.pm
+++ b/perllib/FixMyStreet/Cobrand/Greenwich.pm
@@ -57,10 +57,6 @@ sub contact_email {
 
 sub reports_per_page { return 20; }
 
-sub on_map_default_max_pin_age {
-    return '21 days';
-}
-
 sub open311_config {
     my ($self, $row, $h, $params) = @_;
 
diff --git a/perllib/FixMyStreet/DB/ResultSet/Nearby.pm b/perllib/FixMyStreet/DB/ResultSet/Nearby.pm
index 8b8951007..6e5e0220f 100644
--- a/perllib/FixMyStreet/DB/ResultSet/Nearby.pm
+++ b/perllib/FixMyStreet/DB/ResultSet/Nearby.pm
@@ -10,7 +10,7 @@ sub to_body {
 }
 
 sub nearby {
-    my ( $rs, $c, $dist, $ids, $limit, $mid_lat, $mid_lon, $interval, $categories, $states ) = @_;
+    my ( $rs, $c, $dist, $ids, $limit, $mid_lat, $mid_lon, $categories, $states ) = @_;
 
     unless ( $states ) {
         $states = FixMyStreet::DB::Result::Problem->visible_states();
@@ -20,8 +20,6 @@ sub nearby {
         non_public => 0,
         state => [ keys %$states ],
     };
-    $params->{'current_timestamp-lastupdate'} = { '<', \"'$interval'::interval" }
-        if $interval;
     $params->{id} = { -not_in => $ids }
         if $ids;
     $params->{category} = $categories if $categories && @$categories;
diff --git a/perllib/FixMyStreet/DB/ResultSet/Problem.pm b/perllib/FixMyStreet/DB/ResultSet/Problem.pm
index f1ed50721..ae45351c4 100644
--- a/perllib/FixMyStreet/DB/ResultSet/Problem.pm
+++ b/perllib/FixMyStreet/DB/ResultSet/Problem.pm
@@ -140,11 +140,11 @@ sub _recent {
 # Problems around a location
 
 sub around_map {
-    my ( $rs, $limit, %p) = @_;
+    my ( $rs, $c, %p) = @_;
     my $attr = {
         order_by => $p{order},
     };
-    $attr->{rows} = $limit if $limit;
+    $attr->{rows} = $c->cobrand->reports_per_page;
 
     unless ( $p{states} ) {
         $p{states} = FixMyStreet::DB::Result::Problem->visible_states();
@@ -156,12 +156,12 @@ sub around_map {
             latitude => { '>=', $p{min_lat}, '<', $p{max_lat} },
             longitude => { '>=', $p{min_lon}, '<', $p{max_lon} },
     };
-    $q->{'current_timestamp - lastupdate'} = { '<', \"'$p{interval}'::interval" }
-        if $p{interval};
     $q->{category} = $p{categories} if $p{categories} && @{$p{categories}};
 
-    my @problems = mySociety::Locale::in_gb_locale { $rs->search( $q, $attr )->include_comment_counts->all };
-    return \@problems;
+    my $problems = mySociety::Locale::in_gb_locale {
+        $rs->search( $q, $attr )->include_comment_counts->page($p{page});
+    };
+    return $problems;
 }
 
 # Admin functions
diff --git a/perllib/FixMyStreet/Map.pm b/perllib/FixMyStreet/Map.pm
index b6b618efb..e0e3c3128 100644
--- a/perllib/FixMyStreet/Map.pm
+++ b/perllib/FixMyStreet/Map.pm
@@ -88,23 +88,23 @@ sub map_features {
         $p{latitude} = ($p{max_lat} + $p{min_lat} ) / 2;
     }
 
-    # list of problems around map can be limited, but should show all pins
-    my $around_limit = $c->cobrand->on_map_list_limit || undef;
-
-    my $on_map_all = $c->cobrand->problems_on_map->around_map( undef, %p );
-    my $on_map_list = $around_limit
-        ? $c->cobrand->problems_on_map->around_map( $around_limit, %p )
-        : $on_map_all;
+    $p{page} = $c->get_param('p') || 1;
+    my $on_map = $c->cobrand->problems_on_map->around_map( $c, %p );
+    my $pager = $c->stash->{pager} = $on_map->pager;
+    $on_map = [ $on_map->all ];
 
     my $dist = FixMyStreet::Gaze::get_radius_containing_population( $p{latitude}, $p{longitude} );
 
-    my $limit  = 20;
-    my @ids    = map { $_->id } @$on_map_list;
-    my $nearby = $c->model('DB::Nearby')->nearby(
-        $c, $dist, \@ids, $limit, @p{"latitude", "longitude", "interval", "categories", "states"}
-    );
+    my $nearby;
+    if (@$on_map < $pager->entries_per_page && $pager->current_page == 1) {
+        my $limit = 20;
+        my @ids = map { $_->id } @$on_map;
+        $nearby = $c->model('DB::Nearby')->nearby(
+            $c, $dist, \@ids, $limit, @p{"latitude", "longitude", "categories", "states"}
+        );
+    }
 
-    return ( $on_map_all, $on_map_list, $nearby, $dist );
+    return ( $on_map, $nearby, $dist );
 }
 
 sub click_to_wgs84 {
diff --git a/t/app/controller/around.t b/t/app/controller/around.t
index cdaeaf363..8b4fc7825 100644
--- a/t/app/controller/around.t
+++ b/t/app/controller/around.t
@@ -135,7 +135,7 @@ subtest 'check non public reports are not displayed on around page' => sub {
 };
 
 
-subtest 'check category and status filtering works on /ajax' => sub {
+subtest 'check category and status filtering works on /around?ajax' => sub {
     my $categories = [ 'Pothole', 'Vegetation', 'Flytipping' ];
     my $params = {
         postcode  => 'OX1 1ND',
@@ -157,19 +157,19 @@ subtest 'check category and status filtering works on /ajax' => sub {
         }
     }
 
-    my $json = $mech->get_ok_json( '/ajax?bbox=' . $bbox );
+    my $json = $mech->get_ok_json( '/around?ajax=1&bbox=' . $bbox );
     my $pins = $json->{pins};
     is scalar @$pins, 6, 'correct number of reports when no filters';
 
-    $json = $mech->get_ok_json( '/ajax?filter_category=Pothole&bbox=' . $bbox );
+    $json = $mech->get_ok_json( '/around?ajax=1&filter_category=Pothole&bbox=' . $bbox );
     $pins = $json->{pins};
     is scalar @$pins, 2, 'correct number of Pothole reports';
 
-    $json = $mech->get_ok_json( '/ajax?status=open&bbox=' . $bbox );
+    $json = $mech->get_ok_json( '/around?ajax=1&status=open&bbox=' . $bbox );
     $pins = $json->{pins};
     is scalar @$pins, 3, 'correct number of open reports';
 
-    $json = $mech->get_ok_json( '/ajax?status=fixed&filter_category=Vegetation&bbox=' . $bbox );
+    $json = $mech->get_ok_json( '/around?ajax=1&status=fixed&filter_category=Vegetation&bbox=' . $bbox );
     $pins = $json->{pins};
     is scalar @$pins, 1, 'correct number of fixed Vegetation reports';
 };
diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t
index efe392eab..f741ec796 100644
--- a/t/app/controller/report_new.t
+++ b/t/app/controller/report_new.t
@@ -893,7 +893,7 @@ foreach my $test (
 
         # Test that AJAX pages return the right data
         $mech->get_ok(
-            '/ajax?bbox=' . ($report->longitude - 0.01) . ',' .  ($report->latitude - 0.01)
+            '/around?ajax=1&bbox=' . ($report->longitude - 0.01) . ',' .  ($report->latitude - 0.01)
             . ',' . ($report->longitude + 0.01) . ',' .  ($report->latitude + 0.01)
         );
         $mech->content_contains( "Test Report at caf\xc3\xa9" );
diff --git a/t/app/controller/report_new_text.t b/t/app/controller/report_new_text.t
index 94f350eba..734b9dbb4 100644
--- a/t/app/controller/report_new_text.t
+++ b/t/app/controller/report_new_text.t
@@ -362,7 +362,7 @@ subtest "test report creation for a user who is logged in" => sub {
     $mech->logged_in_ok;
 
     $mech->get_ok(
-        '/ajax?bbox=' . ($report->longitude - 0.01) . ',' .  ($report->latitude - 0.01)
+        '/around?ajax=1&bbox=' . ($report->longitude - 0.01) . ',' .  ($report->latitude - 0.01)
         . ',' . ($report->longitude + 0.01) . ',' .  ($report->latitude + 0.01)
     );
     $mech->content_contains( "Test Report at caf\xc3\xa9" );
diff --git a/t/cobrand/oxfordshire.t b/t/cobrand/oxfordshire.t
index dcf8b25c9..ee30e7e0b 100644
--- a/t/cobrand/oxfordshire.t
+++ b/t/cobrand/oxfordshire.t
@@ -7,7 +7,7 @@ my $mech = FixMyStreet::TestMech->new;
 
 my $oxon = $mech->create_body_ok(2237, 'Oxfordshire County Council');
 
-subtest 'check /ajax defaults to open reports only' => sub {
+subtest 'check /around?ajax defaults to open reports only' => sub {
     my $categories = [ 'Bridges', 'Fences', 'Manhole' ];
     my $params = {
         postcode  => 'OX28 4DS',
@@ -33,15 +33,15 @@ subtest 'check /ajax defaults to open reports only' => sub {
     FixMyStreet::override_config {
         ALLOWED_COBRANDS => [ { 'oxfordshire' => '.' } ],
     }, sub {
-        my $json = $mech->get_ok_json( '/ajax?status=all&bbox=' . $bbox );
+        my $json = $mech->get_ok_json( '/around?ajax=1&status=all&bbox=' . $bbox );
         my $pins = $json->{pins};
         is scalar @$pins, 6, 'correct number of reports created';
 
-        $json = $mech->get_ok_json( '/ajax?bbox=' . $bbox );
+        $json = $mech->get_ok_json( '/around?ajax=1&bbox=' . $bbox );
         $pins = $json->{pins};
         is scalar @$pins, 3, 'correct number of reports returned with no filters';
 
-        $json = $mech->get_ok_json( '/ajax?filter_category=Fences&bbox=' . $bbox );
+        $json = $mech->get_ok_json( '/around?ajax=1&filter_category=Fences&bbox=' . $bbox );
         $pins = $json->{pins};
         is scalar @$pins, 1, 'only one Fences report by default';
     }
diff --git a/t/map/tilma/original.t b/t/map/tilma/original.t
index b29155bee..e89251285 100644
--- a/t/map/tilma/original.t
+++ b/t/map/tilma/original.t
@@ -92,17 +92,17 @@ for my $test (
         $report->state($test->{state});
         $report->update;
 
-        my ( $on_map_all, $on_map_list, $nearby, $dist ) =
+        my ( $on_map, $nearby, $dist ) =
             FixMyStreet::Map::map_features($c, bbox => "0,0,0,0");
 
-        ok $on_map_list;
+        ok $on_map;
         ok $nearby;
         ok $dist;
 
         my $id = $report->id;
         my $colour = $test->{colour};
 
-        my $pin_colour = $c->cobrand->pin_colour($on_map_all->[0], 'around');
+        my $pin_colour = $c->cobrand->pin_colour($on_map->[0], 'around');
         is $pin_colour, $colour, 'pin colour';
     };
 }
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 3ed16d3d3..5d83235b1 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -61,14 +61,6 @@
             [% ELSE %]
                 <a id='hide_pins_link' rel='nofollow' href="[% c.uri_with( { no_pins => 1 } ) %]">[% loc('Hide pins') %]</a>
             [% END %]
-            [% IF c.cobrand.country == 'GB' || c.cobrand.country == 'NO' %]
-                <span class="hidden">|</span>
-                [% IF c.req.params.all_pins %]
-                    <a id='all_pins_link' rel='nofollow' href="[% c.uri_with( { no_pins => undef, all_pins => undef } ) %]">[% loc('Hide old') %]</a>
-                [% ELSE %]
-                    <a id='all_pins_link' rel='nofollow' href="[% c.uri_with( { no_pins => undef, all_pins => 1 } ) %]">[% loc('Show old') %]</a>
-                [% END %]
-            [% END %]
         </p>
 
         <div class="mobile-map-banner">
diff --git a/templates/web/base/around/on_map_list_items.html b/templates/web/base/around/on_map_list_items.html
index b7257030d..fafe7f433 100644
--- a/templates/web/base/around/on_map_list_items.html
+++ b/templates/web/base/around/on_map_list_items.html
@@ -1,14 +1,31 @@
-[% all_reports = on_map.merge(around_map) %]
-[% IF all_reports.size %]
-    [% FOREACH problem IN all_reports %]
-        [% UNLESS problem.title;
-            dist = tprintf("%.1f", (problem.distance || 0) );
-            problem = problem.problem;
-        END %]
+<ul class="item-list item-list--reports">
+[% IF on_map.size %]
+    [% FOREACH problem IN on_map %]
         [% INCLUDE 'reports/_list-entry.html' %]
     [% END %]
+    [% IF around_map.size %]
+    <li class="item-list__item item-list__item--empty">
+        <p>[% loc('Here are some other nearby reports:') %]</p>
+    </li>
+    [% END %]
+[% ELSIF around_map.size %]
+    <li class="item-list__item item-list__item--empty">
+        <p>[% loc('No reports to show on map, here are some nearby:') %]</p>
+    </li>
 [% ELSE %]
     <li class="item-list__item item-list__item--empty">
         <p>[% loc('There are no reports to show.') %]</p>
     </li>
 [% END %]
+</ul>
+
+[% IF around_map.size %]
+<ul class="item-list item-list--reports">
+    [% FOREACH problem IN around_map %]
+        [% dist = tprintf("%.1f", (problem.distance || 0) );
+           problem = problem.problem;
+        %]
+        [% INCLUDE 'reports/_list-entry.html' %]
+    [% END %]
+</ul>
+[% END %]
diff --git a/templates/web/base/around/tabbed_lists.html b/templates/web/base/around/tabbed_lists.html
index 5418ef914..f135684b9 100755
--- a/templates/web/base/around/tabbed_lists.html
+++ b/templates/web/base/around/tabbed_lists.html
@@ -1,5 +1,13 @@
 [% INCLUDE "reports/_list-filters.html" %]
 
-<ul id="js-reports-list" class="item-list item-list--reports">
+<div class="js-pagination">
+[% INCLUDE 'pagination.html' param = 'p' %]
+</div>
+
+<div id="js-reports-list">
     [% INCLUDE "around/on_map_list_items.html" %]
-</ul>
+</div>
+
+<div class="js-pagination">
+[% INCLUDE 'pagination.html' param = 'p' %]
+</div>
diff --git a/templates/web/base/maps/google.html b/templates/web/base/maps/google.html
index c86c757fb..ec9885a04 100644
--- a/templates/web/base/maps/google.html
+++ b/templates/web/base/maps/google.html
@@ -18,7 +18,6 @@ map_js = [
 var fixmystreet = fixmystreet || {};
 $.extend(fixmystreet, {
     'area': [ [% map.area.join(',') %] ],
-    'all_pins': '[% all_pins %]',
     'latitude': [% map.latitude %],
     'longitude': [% map.longitude %],
 [% IF map.any_zoom -%]
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 568a87e7c..12ae88c05 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -9,7 +9,6 @@
 [%- UNLESS c.cobrand.call_hook('hide_areas_on_reports') %]
     data-area="[% map.area.join(',') %]"
 [%- END %]
-    data-all_pins='[% all_pins %]'
     data-latitude=[% map.latitude %]
     data-longitude=[% map.longitude %]
 [% IF map.any_zoom -%]
diff --git a/templates/web/base/pagination.html b/templates/web/base/pagination.html
index a677b9d58..7c13ec9cb 100644
--- a/templates/web/base/pagination.html
+++ b/templates/web/base/pagination.html
@@ -1,5 +1,5 @@
 [% IF pager.total_entries > 1 %]
-    <p class="pagination">
+    <p class="pagination" data-page="[% pager.current_page %]">
         [% IF pager.previous_page %]
             <a class="prev" href="[% c.uri_with({ $param => pager.previous_page, ajax => undefined }) %][% '#' _ hash IF hash %]">[% loc('Previous') %]</a>
         [% END %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 6825ecbce..e5066b143 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1238,11 +1238,20 @@ $(function() {
                     $('#filter_categories').add('#statuses').add('#sort').find('option')
                         .prop('selected', function() { return this.defaultSelected; })
                         .trigger('change.multiselect');
+                    if (fixmystreet.utils && fixmystreet.utils.parse_query_string) {
+                        var qs = fixmystreet.utils.parse_query_string();
+                        var page = qs.p || 1;
+                        $('.pagination').data('page', page)
+                            .trigger('change.filters');
+                    }
                     fixmystreet.display.reports_list(location.href);
                 } else if ('reportId' in e.state) {
                     fixmystreet.display.report(e.state.reportPageUrl, e.state.reportId);
                 } else if ('newReportAtLonlat' in e.state) {
                     fixmystreet.display.begin_report(e.state.newReportAtLonlat, false);
+                } else if ('page_change' in e.state) {
+                    $('.pagination').data('page', e.state.page_change.page)
+                        .trigger('change.filters');
                 } else if ('filter_change' in e.state) {
                     $('#filter_categories').val(e.state.filter_change.filter_categories);
                     $('#statuses').val(e.state.filter_change.statuses);
diff --git a/web/cobrands/fixmystreet/map.js b/web/cobrands/fixmystreet/map.js
index f3bf1a19f..9303c22b7 100644
--- a/web/cobrands/fixmystreet/map.js
+++ b/web/cobrands/fixmystreet/map.js
@@ -3,7 +3,7 @@ var fixmystreet = fixmystreet || {};
 (function(){
 
     var map_data = document.getElementById('js-map-data'),
-        map_keys = [ 'area', 'all_pins', 'latitude', 'longitude', 'zoomToBounds', 'zoom', 'pin_prefix', 'pin_new_report_colour', 'numZoomLevels', 'zoomOffset', 'map_type', 'key' ],
+        map_keys = [ 'area', 'latitude', 'longitude', 'zoomToBounds', 'zoom', 'pin_prefix', 'pin_new_report_colour', 'numZoomLevels', 'zoomOffset', 'map_type', 'key' ],
         numeric = { zoom: 1, numZoomLevels: 1, zoomOffset: 1, id: 1 },
         pin_keys = [ 'lat', 'lon', 'colour', 'id', 'title', 'type' ];
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b13dc636a..384566516 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1505,10 +1505,6 @@ html.js #map .noscript {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -3976px;
     }
-    &#all_pins_link {
-      background-image:url($image-sprite);
-      background-position: flip(right, -337px) -4022px;
-    }
     &#map_permalink {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -4070px;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 8cc2e8e2c..d7e692a13 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -1,5 +1,23 @@
 var fixmystreet = fixmystreet || {};
 
+fixmystreet.utils = fixmystreet.utils || {};
+
+$.extend(fixmystreet.utils, {
+    parse_query_string: function() {
+        var qs = {};
+        if (!location.search) {
+            return qs;
+        }
+        location.search.substring(1).split(/[;&]/).forEach(function(i) {
+            var s = i.split('='),
+                k = s[0],
+                v = s[1] && decodeURIComponent(s[1].replace(/\+/g, ' '));
+            qs[k] = v;
+        });
+        return qs;
+    }
+});
+
 (function() {
 
     fixmystreet.maps = fixmystreet.maps || {};
@@ -282,7 +300,7 @@ var fixmystreet = fixmystreet || {};
         if (!location.search) {
             return qs;
         }
-        location.search.substring(1).split('&').forEach(function(i) {
+        location.search.substring(1).split(/[&;]/).forEach(function(i) {
             var s = i.split('='),
                 k = s[0],
                 v = s[1] && decodeURIComponent(s[1].replace(/\+/g, ' '));
@@ -301,15 +319,7 @@ var fixmystreet = fixmystreet || {};
         return value;
     }
 
-    function categories_or_status_changed_history() {
-        if (!('pushState' in history)) {
-            return;
-        }
-        var qs = parse_query_string();
-        var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
-        var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
-        var sort_key = replace_query_parameter(qs, 'sort', 'sort');
-        delete qs.p;
+    function update_url(qs) {
         var new_url;
         if ($.isEmptyObject(qs)) {
             new_url = location.href.replace(location.search, "");
@@ -318,6 +328,37 @@ var fixmystreet = fixmystreet || {};
         } else {
             new_url = location.href + '?' + $.param(qs);
         }
+        return new_url;
+    }
+
+    function page_changed_history() {
+        if (!('pushState' in history)) {
+            return;
+        }
+        var qs = fixmystreet.utils.parse_query_string();
+
+        var page = $('.pagination').data('page');
+        if (page > 1) {
+            qs.p = page;
+        } else {
+            delete qs.p;
+        }
+        var new_url = update_url(qs);
+        history.pushState({
+            page_change: { 'page': page }
+        }, null, new_url);
+    }
+
+    function categories_or_status_changed_history() {
+        if (!('pushState' in history)) {
+            return;
+        }
+        var qs = fixmystreet.utils.parse_query_string();
+        var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
+        var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
+        var sort_key = replace_query_parameter(qs, 'sort', 'sort');
+        delete qs.p;
+        var new_url = update_url(qs);
         history.pushState({
             filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key }
         }, null, new_url);
@@ -387,7 +428,7 @@ var fixmystreet = fixmystreet || {};
                     f.geometry = new_geometry;
                     this.removeAllFeatures();
                     this.addFeatures([f]);
-                    var qs = parse_query_string();
+                    var qs = fixmystreet.utils.parse_query_string();
                     if (!qs.bbox) {
                         zoomToBounds(extent);
                     }
@@ -482,19 +523,14 @@ var fixmystreet = fixmystreet || {};
         if (fixmystreet.page == 'around') {
             fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet();
             pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
-            pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({
-                url: '/ajax',
-                params: fixmystreet.all_pins ? { all_pins: 1 } : { },
-                format: new OpenLayers.Format.FixMyStreet()
-            });
         }
         if (fixmystreet.page == 'reports') {
-            pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetRefreshOnZoom() ];
+            pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetNoLoad() ];
         }
         if (fixmystreet.page == 'my') {
             pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetFixed() ];
         }
-        if (fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
+        if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
             pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({
                 url: fixmystreet.original.href.split('?')[0] + '?ajax=1',
                 format: new OpenLayers.Format.FixMyStreet()
@@ -549,9 +585,22 @@ var fixmystreet = fixmystreet || {};
             $("#filter_categories").on("change.filters", categories_or_status_changed);
             $("#statuses").on("change.filters", categories_or_status_changed);
             $("#sort").on("change.filters", categories_or_status_changed);
+            $('.js-pagination').on('change.filters', categories_or_status_changed);
+            $('.js-pagination').on('click', 'a', function(e) {
+                e.preventDefault();
+                var page = $('.pagination').data('page');
+                if ($(this).hasClass('next')) {
+                    $('.pagination').data('page', page + 1);
+                } else {
+                    $('.pagination').data('page', page - 1);
+                }
+                fixmystreet.markers.protocol.use_page = true;
+                $(this).trigger('change');
+            });
             $("#filter_categories").on("change.user", categories_or_status_changed_history);
             $("#statuses").on("change.user", categories_or_status_changed_history);
             $("#sort").on("change.user", categories_or_status_changed_history);
+            $('.js-pagination').on('click', 'a', page_changed_history);
         } else if (fixmystreet.page == 'new') {
             drag.activate();
         }
@@ -577,37 +626,6 @@ var fixmystreet = fixmystreet || {};
                 this.innerHTML = translation_strings.show_pins;
             }
         });
-
-        $('#all_pins_link').click(function(e) {
-            e.preventDefault();
-            fixmystreet.markers.setVisibility(true);
-            var texts = [
-                'en', 'Show old', 'Hide old',
-                'nb', 'Vis gamle', 'Skjul gamle',
-                'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
-            ];
-            for (var i=0; i<texts.length; i+=3) {
-                if (this.innerHTML == texts[i+1]) {
-                    this.innerHTML = texts[i+2];
-                    fixmystreet.markers.protocol.options.params = { all_pins: 1 };
-                    fixmystreet.markers.refresh( { force: true } );
-                    lang = texts[i];
-                } else if (this.innerHTML == texts[i+2]) {
-                    this.innerHTML = texts[i+1];
-                    fixmystreet.markers.protocol.options.params = { };
-                    fixmystreet.markers.refresh( { force: true } );
-                    lang = texts[i];
-                }
-            }
-            if (lang == 'cy') {
-                document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
-            } else if (lang == 'nb') {
-                document.getElementById('hide_pins_link').innerHTML = 'Skjul nåler';
-            } else {
-                document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
-            }
-        });
-
     }
 
     $(function(){
@@ -761,6 +779,8 @@ OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.Permalink
 });
 
 OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, {
+    // Update when the zoom changes, pagination means there might be new things
+    resFactor: 1.5,
     ratio: 1,
     // The transform in Strategy.BBOX's getMapBounds could mean you end up with
     // co-ordinates too precise, which could then cause the Strategy to think
@@ -787,11 +807,8 @@ OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, {
     }
 });
 
-/* This strategy will call for updates whenever the zoom changes,
- * unlike the parent which only will if new area is included. It
- * also does not update on load, as we already have the data. */
-OpenLayers.Strategy.FixMyStreetRefreshOnZoom = OpenLayers.Class(OpenLayers.Strategy.FixMyStreet, {
-    resFactor: 1.5,
+/* This strategy additionally does not update on load, as we already have the data. */
+OpenLayers.Strategy.FixMyStreetNoLoad = OpenLayers.Class(OpenLayers.Strategy.FixMyStreet, {
     activate: function() {
         var activated = OpenLayers.Strategy.prototype.activate.call(this);
         if (activated) {
@@ -821,12 +838,15 @@ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixe
 });
 
 /* Pan data request handler */
-// This class is used to get a JSON object from /ajax that contains
+// This class is used to get a JSON object from /around?ajax that contains
 // pins for the map and HTML for the sidebar. It does a fetch whenever the map
 // is dragged (modulo a buffer extending outside the viewport).
 // This subclass is required so we can pass the 'filter_category' and 'status' query
-// params to /ajax if the user has filtered the map.
+// params to /around?ajax if the user has filtered the map.
 OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
+    initial_page: null,
+    use_page: false,
+
     read: function(options) {
         // Show the loading indicator over the map
         $('#loading-indicator').removeClass('hidden');
@@ -839,6 +859,16 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
                 options.params[key] = val;
             }
         });
+        if (this.use_page) {
+            var page = $('.pagination').data('page');
+            this.use_page = false;
+        } else if (this.initial_page) {
+            page = 1;
+        } else {
+            var qs = fixmystreet.utils.parse_query_string();
+            this.initial_page = page = qs.p || 1;
+        }
+        options.params.p = page;
         return OpenLayers.Protocol.HTTP.prototype.read.apply(this, [options]);
     },
     CLASS_NAME: "OpenLayers.Protocol.FixMyStreet"
diff --git a/web/js/map-google.js b/web/js/map-google.js
index 596e4f8ee..803ac4f3e 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -127,12 +127,10 @@ fixmystreet.maps = {};
             b_ne = b.getNorthEast(),
             bbox = b_sw.lng() + ',' + b_sw.lat() + ',' + b_ne.lng() + ',' + b_ne.lat(),
             params = {
+                ajax: 1,
                 bbox: bbox
             };
-        if (fixmystreet.all_pins) {
-            params.all_pins = 1;
-        }
-        $.getJSON('/ajax', params, read_pin_json);
+        $.getJSON('/around', params, read_pin_json);
     }
 
     function map_initialize() {
@@ -223,40 +221,6 @@ fixmystreet.maps = {};
                 this.innerHTML = translation_strings.show_pins;
             }
         });
-
-        $('#all_pins_link').click(function(e) {
-            var i;
-            e.preventDefault();
-            for (i=0; i<fixmystreet.markers.length; i++) {
-                fixmystreet.markers[i].setMap(fixmystreet.map);
-            }
-            var texts = [
-                'en', 'Show old', 'Hide old',
-                'nb', 'Inkluder utdaterte problemer', 'Skjul utdaterte rapporter',
-                'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
-            ];
-            for (i=0; i<texts.length; i+=3) {
-                if (this.innerHTML == texts[i+1]) {
-                    this.innerHTML = texts[i+2];
-                    fixmystreet.markers.protocol.options.params = { all_pins: 1 };
-                    fixmystreet.markers.refresh( { force: true } );
-                    lang = texts[i];
-                } else if (this.innerHTML == texts[i+2]) {
-                    this.innerHTML = texts[i+1];
-                    fixmystreet.markers.protocol.options.params = { };
-                    fixmystreet.markers.refresh( { force: true } );
-                    lang = texts[i];
-                }
-            }
-            if (lang == 'cy') {
-                document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
-            } else if (lang == 'nb') {
-                document.getElementById('hide_pins_link').innerHTML = 'Gjem nåler';
-            } else {
-                document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
-            }
-        });
-
     }
 
     google.maps.visualRefresh = true;