Update URL whenever map moves, using replaceState.

Fixes #2242.

Co-authored-by: Matthew Somerville <matthew@mysociety.org>

7 files changed, 59 insertions, 20 deletions

diff --git a/.cypress/cypress/integration/around_filters.js b/.cypress/cypress/integration/around_filters.js
index d14fe34dd..7bd029856 100644
--- a/.cypress/cypress/integration/around_filters.js
+++ b/.cypress/cypress/integration/around_filters.js
@@ -19,7 +19,7 @@ describe('Around page filtering and push state', function() {
         cy.wait('@update-results');
         cy.contains('1 to 6 of 6');
         cy.contains('Street light not working');
-        cy.url().should('include', 'status=closed%2Cfixed');
+        cy.url().should('include', 'status=closed,fixed');
         cy.get('#status_2').should('be.checked');
         cy.go('back');
         cy.wait('@update-results');
@@ -31,7 +31,7 @@ describe('Around page filtering and push state', function() {
         cy.wait('@update-results');
         cy.contains('1 to 6 of 6');
         cy.contains('Street light not working');
-        cy.url().should('include', 'status=closed%2Cfixed');
+        cy.url().should('include', 'status=closed,fixed');
         cy.get('#status_2').should('be.checked');
     });
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 631dc3097..d2933340d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## Releases
 
 * Unreleased
+    - Front end improvements:
+        - Track map state in URL to make sharing links easier. #2242
     - Admin improvements:
         - Include moderation history in report updates. #2379
         - Allow moderation to potentially change state. #2381
diff --git a/perllib/FixMyStreet/Map/Google.pm b/perllib/FixMyStreet/Map/Google.pm
index f40eff167..c1fb05e43 100644
--- a/perllib/FixMyStreet/Map/Google.pm
+++ b/perllib/FixMyStreet/Map/Google.pm
@@ -44,6 +44,7 @@ sub display_map {
         if defined $c->get_param('lat');
     $params{longitude} = Utils::truncate_coordinate($c->get_param('lon') + 0)
         if defined $c->get_param('lon');
+    $params{zoomToBounds} = $params{any_zoom} && !defined $c->get_param('zoom');
 
     my $zoom = defined $c->get_param('zoom') ? $c->get_param('zoom') + 0 : $default_zoom;
     $zoom = $numZoomLevels - 1 if $zoom >= $numZoomLevels;
diff --git a/perllib/FixMyStreet/Map/OSM.pm b/perllib/FixMyStreet/Map/OSM.pm
index a6a95b48b..a6cb6acea 100644
--- a/perllib/FixMyStreet/Map/OSM.pm
+++ b/perllib/FixMyStreet/Map/OSM.pm
@@ -57,6 +57,7 @@ sub display_map {
         if defined $c->get_param('lat');
     $params{longitude} = Utils::truncate_coordinate($c->get_param('lon') + 0)
         if defined $c->get_param('lon');
+    $params{zoomToBounds} = $params{any_zoom} && !defined $c->get_param('zoom');
 
     my %data;
     $data{cobrand} = $c->cobrand;
diff --git a/templates/web/base/maps/google.html b/templates/web/base/maps/google.html
index e8c07b113..eaa462c6c 100644
--- a/templates/web/base/maps/google.html
+++ b/templates/web/base/maps/google.html
@@ -14,7 +14,7 @@ $.extend(fixmystreet, {
     'area': [ [% map.area.join(',') %] ],
     'latitude': [% map.latitude %],
     'longitude': [% map.longitude %],
-[% IF map.any_zoom -%]
+[% IF map.zoomToBounds -%]
     'zoomToBounds': 1,
 [%- END %]
 [% IF map.zoom -%]
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 524075371..2f748cb19 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -11,7 +11,7 @@
 [%- END %]
     data-latitude=[% map.latitude %]
     data-longitude=[% map.longitude %]
-[% IF map.any_zoom -%]
+[% IF map.zoomToBounds -%]
     data-zoomToBounds=1
 [%- END %]
 [% IF map.zoom -%]
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 27e89df1d..e76ac439e 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -365,7 +365,7 @@ $.extend(fixmystreet.utils, {
     /* Make sure pins aren't going to reload just because we're zooming out,
      * we already have the pins when the page loaded */
     function zoomToBounds(bounds) {
-        if (!bounds) { return; }
+        if (!bounds || !fixmystreet.markers.strategies) { return; }
         var strategy = fixmystreet.markers.strategies[0];
         strategy.deactivate();
         var center = bounds.getCenterLonLat();
@@ -466,6 +466,17 @@ $.extend(fixmystreet.utils, {
         return new_url;
     }
 
+    function update_history(qs, data) {
+        var new_url = update_url(qs);
+        history.pushState(data, null, new_url);
+
+        // Ensure the permalink control is updated when the filters change
+        var permalink_controls = fixmystreet.map.getControlsByClass(/Permalink/);
+        if (permalink_controls.length) {
+            permalink_controls[0].updateLink();
+        }
+    }
+
     function page_changed_history() {
         if (!('pushState' in history)) {
             return;
@@ -480,10 +491,9 @@ $.extend(fixmystreet.utils, {
         } else {
             delete qs.p;
         }
-        var new_url = update_url(qs);
-        history.pushState({
+        update_history(new_url, {
             page_change: { 'page': page, 'show_old_reports': show_old_reports }
-        }, null, new_url);
+        });
     }
 
     function categories_or_status_changed_history() {
@@ -496,10 +506,9 @@ $.extend(fixmystreet.utils, {
         var sort_key = replace_query_parameter(qs, 'sort', 'sort');
         var show_old_reports = replace_query_parameter(qs, 'show_old_reports', 'show_old_reports');
         delete qs.p;
-        var new_url = update_url(qs);
-        history.pushState({
+        update_history(qs, {
             filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key, 'show_old_reports': show_old_reports }
-        }, null, new_url);
+        });
     }
 
     function setup_inspector_marker_drag() {
@@ -567,8 +576,10 @@ $.extend(fixmystreet.utils, {
                     f.geometry = new_geometry;
                     this.removeAllFeatures();
                     this.addFeatures([f]);
-                    var qs = fixmystreet.utils.parse_query_string();
-                    if (!qs.bbox) {
+                    // Look at original href here to know if location was present at load.
+                    // If it was, we don't want to zoom out to the bounds of the area.
+                    var qs = OpenLayers.Util.getParameters(fixmystreet.original.href);
+                    if (!qs.bbox && !qs.lat && !qs.lon) {
                         zoomToBounds(extent);
                     }
                 } else {
@@ -913,6 +924,14 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
 /* Overriding Permalink so that it can pass the correct zoom to OSM */
 OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, {
     _updateLink: function(alter_zoom) {
+        // this.base was originally set in initialize(), but the window's href
+        // may have changed since then if e.g. the map filters have been updated.
+        // NB this won't change the base of the 'problems nearby' permalink on
+        // /report, as this would result in it pointing at the wrong page.
+        if (this.base !== '/around' && fixmystreet.page !== 'report') {
+            this.base = window.location.href;
+        }
+
         var separator = this.anchor ? '#' : '?';
         var href = this.base;
         if (href.indexOf(separator) != -1) {
@@ -925,7 +944,17 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink,
         if ( alter_zoom ) {
             zoom += fixmystreet.zoomOffset;
         }
-        href += separator + OpenLayers.Util.getParameterString(this.createParams(center, zoom));
+
+        var params = this.createParams(center, zoom);
+
+        // Strip out the ugly OpenLayers layers state string
+        delete params.layers;
+        if (params.lat && params.lon) {
+            // No need for the postcode string either, if we have a latlon
+            delete params.pc;
+        }
+
+        href += separator + OpenLayers.Util.getParameterString(params);
         // Could use mlat/mlon here as well if we are on a page with a marker
         if (this.base == '/around') {
             href += '&js=1';
@@ -937,15 +966,21 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink,
         else {
             this.element.href = href;
         }
+
+        if ('replaceState' in history) {
+            if (fixmystreet.page.match(/around|reports/)) {
+                history.replaceState(
+                    history.state,
+                    null,
+                    href
+                );
+            }
+        }
     },
     updateLink: function() {
         this._updateLink(0);
-    }
-});
-OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.PermalinkFMS, {
-    updateLink: function() {
-        this._updateLink(1);
-    }
+    },
+    CLASS_NAME: "OpenLayers.Control.PermalinkFMS"
 });
 
 OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, {