From ef6ffbdbfa562dca1825a0abc06afb0e52509737 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Thu, 13 Apr 2017 16:48:57 +0100 Subject: On /reports maps, only include reports in view. Update the reports with a bounding box, similar to on around pages. This is made slightly trickier because we don't want to do anything on page load (we already have the pins), we need to reload when the zoom changes, and we don't want the strategy to get confused by its first redraw, e.g. on pin hover, We also need to turn off the zoom- to-bounds if we've got a bounding box in the URL. --- perllib/FixMyStreet/App/Controller/Reports.pm | 6 +++++ web/js/map-OpenLayers.js | 38 +++++++++++++++++++++++++-- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/perllib/FixMyStreet/App/Controller/Reports.pm b/perllib/FixMyStreet/App/Controller/Reports.pm index bb5b13b61..ed851f71f 100644 --- a/perllib/FixMyStreet/App/Controller/Reports.pm +++ b/perllib/FixMyStreet/App/Controller/Reports.pm @@ -430,6 +430,12 @@ sub load_and_group_problems : Private { $problems = $problems->to_body($c->stash->{body}); } + if (my $bbox = $c->get_param('bbox')) { + my ($min_lon, $min_lat, $max_lon, $max_lat) = split /,/, $bbox; + $where->{latitude} = { '>=', $min_lat, '<', $max_lat }; + $where->{longitude} = { '>=', $min_lon, '<', $max_lon }; + } + $problems = $problems->search( $where, $filter diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 40539f385..b53246279 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -215,14 +215,21 @@ var fixmystreet = fixmystreet || {}; } }; + /* 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; } + fixmystreet.markers.strategies[0].deactivate(); var center = bounds.getCenterLonLat(); var z = fixmystreet.map.getZoomForExtent(bounds); if ( z < 13 && $('html').hasClass('mobile') ) { z = 13; } fixmystreet.map.setCenter(center, z); + // Reactivate the strategy and make it think it's done an update + fixmystreet.markers.strategies[0].activate(); + fixmystreet.markers.strategies[0].calculateBounds(); + fixmystreet.markers.strategies[0].resolution = fixmystreet.map.getResolution(); } function sidebar_highlight(problem_id) { @@ -391,7 +398,10 @@ var fixmystreet = fixmystreet || {}; f.geometry = new_geometry; this.removeAllFeatures(); this.addFeatures([f]); - zoomToBounds(extent); + var qs = parse_query_string(); + if (!qs.bbox) { + zoomToBounds(extent); + } } else { fixmystreet.map.removeLayer(this); } @@ -478,8 +488,13 @@ var fixmystreet = fixmystreet || {}; format: new OpenLayers.Format.FixMyStreet() }); } - if (fixmystreet.page == 'reports' || fixmystreet.page == 'my') { + if (fixmystreet.page == 'reports') { + pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetRefreshOnZoom() ]; + } + if (fixmystreet.page == 'my') { pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetFixed() ]; + } + if (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() @@ -781,6 +796,25 @@ 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, + activate: function() { + var activated = OpenLayers.Strategy.prototype.activate.call(this); + if (activated) { + this.layer.events.on({ + "moveend": this.update, + "refresh": this.update, + "visibilitychanged": this.update, + scope: this + }); + } + return activated; + } +}); + /* Copy of Strategy.Fixed, but with no initial load */ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixed, { activate: function() { -- cgit v1.2.3