3 files changed, 72 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 7d7a51d4a..63f4c16b4 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -671,6 +671,27 @@ $.extend(fixmystreet.set_up, {
     });
   },
 
+  report_a_problem_btn: function() {
+    $(fixmystreet).on('maps:update_view', fixmystreet.update_report_a_problem_btn);
+
+    // Hide button on new report page.
+    if ( fixmystreet.page === 'new' ) {
+      $('.report-a-problem-btn').hide();
+    }
+
+    $('.report-a-problem-btn').on('click', function(e){
+      var url = this.href;
+      if ( url.indexOf('report/new') > -1 ) {
+        try {
+          e.preventDefault();
+          fixmystreet.display.begin_report( fixmystreet.map.getCenter() );
+        } catch (error) {
+          window.location = url;
+        }
+      }
+    });
+  },
+
   map_controls: function() {
     //add permalink on desktop, force hide on mobile
     //add links container (if its not there)
@@ -891,6 +912,34 @@ $.extend(fixmystreet.set_up, {
 
 });
 
+fixmystreet.update_report_a_problem_btn = function() {
+    var zoom = fixmystreet.map.getZoom();
+    var center = fixmystreet.map.getCenterWGS84();
+    var new_report_url = '/report/new?longitude=' + center.lon.toFixed(6) + '&latitude=' + center.lat.toFixed(6);
+
+    var href = '/';
+    var visible = true;
+    var text = translation_strings.report_a_problem_btn.default;
+
+    if (fixmystreet.page === 'new') {
+        visible = false;
+
+    } else if (fixmystreet.page === 'report') {
+        text = translation_strings.report_a_problem_btn.another;
+        href = new_report_url;
+
+    } else if (fixmystreet.page === 'around' && zoom > 1) {
+        text = translation_strings.report_a_problem_btn.here;
+        href = new_report_url;
+
+    } else if (fixmystreet.page === 'reports' && zoom > 12) {
+        text = translation_strings.report_a_problem_btn.here;
+        href = new_report_url;
+    }
+
+    $('.report-a-problem-btn').attr('href', href).text(text).toggle(visible);
+};
+
 fixmystreet.update_councils_text = function(data) {
     $('#js-councils_text').html(data.councils_text);
     $('#js-councils_text_private').html(data.councils_text_private);
@@ -1084,6 +1133,8 @@ fixmystreet.display = {
     }
 
     fixmystreet.page = 'new';
+
+    fixmystreet.update_report_a_problem_btn();
   },
 
   report: function(reportPageUrl, reportId, callback) {
@@ -1152,6 +1203,8 @@ fixmystreet.display = {
             fixmystreet.run(fixmystreet.set_up.moderation);
             fixmystreet.run(fixmystreet.set_up.response_templates);
 
+            fixmystreet.update_report_a_problem_btn();
+
             window.selected_problem_id = reportId;
             var marker = fixmystreet.maps.get_marker_by_id(reportId);
             if (fixmystreet.map.panTo && ($('html').hasClass('mobile') || !marker.onScreen())) {
@@ -1218,6 +1271,8 @@ fixmystreet.display = {
         $('.big-hide-pins-link').show();
         fixmystreet.set_up.map_controls();
 
+        fixmystreet.update_report_a_problem_btn();
+
         window.selected_problem_id = undefined;
 
         // Perform vendor-specific map setup steps,
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 222c18768..f46ee97ea 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -117,7 +117,7 @@ h1 {
   a.report-a-problem-btn {
     color: $primary_text;
     background-color: $primary;
-    padding:0.25em;
+    padding:0.25em 0.5em;
     margin:0.5em;
     @include border-radius(0.25em);
     &:hover {
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index d95103f82..7253d46c8 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -795,6 +795,16 @@ $.extend(fixmystreet.utils, {
             fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
         }
 
+        // map.getCenter() returns a position in "map units", but sometimes you
+        // want the center in GPS-style latitude/longitude coordinates (WGS84)
+        // for example, to pass as GET params to fixmystreet.com/report/new.
+        fixmystreet.map.getCenterWGS84 = function() {
+            return fixmystreet.map.getCenter().transform(
+                fixmystreet.map.getProjectionObject(),
+                new OpenLayers.Projection("EPSG:4326")
+            );
+        };
+
         if (document.getElementById('mapForm')) {
             var click = fixmystreet.maps.click_control = new OpenLayers.Control.Click();
             fixmystreet.map.addControl(click);
@@ -808,6 +818,12 @@ $.extend(fixmystreet.utils, {
             onload();
         }
 
+        // Allow external scripts to react to pans/zooms on the map,
+        // by subscribing to $(fixmystreet).on('maps:update_view')
+        fixmystreet.map.events.register('moveend', null, function(){
+            $(fixmystreet).trigger('maps:update_view');
+        });
+
         (function() {
             var timeout;
             $('#js-reports-list').on('mouseenter', '.item-list--reports__item', function(){