diff options
| -rw-r--r-- | .cypress/cypress/integration/around_filters.js | 4 | ||||
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Map/Google.pm | 1 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Map/OSM.pm | 1 | ||||
| -rw-r--r-- | templates/web/base/maps/google.html | 2 | ||||
| -rw-r--r-- | templates/web/base/maps/openlayers.html | 2 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 67 |
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, { |