7 files changed, 75 insertions, 0 deletions
diff --git a/.cypress/cypress/integration/simple_spec.js b/.cypress/cypress/integration/simple_spec.js
index a1adbd06f..30f2a0218 100644
--- a/.cypress/cypress/integration/simple_spec.js
+++ b/.cypress/cypress/integration/simple_spec.js
@@ -19,3 +19,17 @@ describe('Clicking the map', function() {
         cy.get('body').should('contain', 'Thank you for reporting this issue');
     });
 });
+
+describe('Clicking the "big green banner" on a map page', function() {
+    before(function() {
+        cy.visit('/');
+        cy.get('[name=pc]').type('BS10 5EE');
+        cy.get('[name=pc]').parents('form').submit();
+        cy.get('.big-green-banner').click();
+    });
+
+    it('begins a new report', function() {
+        cy.url().should('include', '/report/new');
+        cy.get('#form_title').should('be.visible');
+    });
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef127d3b5..613883ff3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
         - Increase size of "sub map links" (hide pins, permalink, etc) #2003
         - Edge-to-edge email layout on narrow screens #2010
         - Add default placeholder to report extra fields. #2027
+        - Clicking the "Click map" instruction banner now begins a new report #2033
     - Bugfixes:
         - Stop asset layers obscuring marker layer. #1999
         - Don't delete hidden field values when inspecting reports. #1999
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
index 029435cf2..c97612beb 100755
--- a/templates/web/base/around/display_location.html
+++ b/templates/web/base/around/display_location.html
@@ -73,6 +73,12 @@
             <a href="/">[% loc('Home') %]</a>
             <span>[% loc('Place pin on map') %]</span>
         </div>
+
+      [% IF c.config.BASE_URL == "https://www.fixmystreet.com" %]
+        <h1 class="big-green-banner banner-position-variant-1">
+            [% loc( 'Click map to report a problem' ) %]
+        </h1>
+      [% END %]
     </div>
 
 
diff --git a/templates/web/fixmystreet.com/around/_report_banner.html b/templates/web/fixmystreet.com/around/_report_banner.html
new file mode 100644
index 000000000..08cd7ed05
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/_report_banner.html
@@ -0,0 +1,6 @@
+<h1 class="big-green-banner banner-position-variant-0">
+    [% loc( 'Click map to report a problem' ) %]
+</h1>
+<a id="skip-this-step" href="[% url_skip %]" rel="nofollow">
+    [% loc("Can't see the map? <em>Skip this step</em>") %]
+</a>
diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html
index 5292d4804..146c3f79e 100644
--- a/templates/web/fixmystreet.com/header_extra.html
+++ b/templates/web/fixmystreet.com/header_extra.html
@@ -2,6 +2,22 @@
 <link rel="prefetch" href="[% version('/vendor/OpenLayers.Projection.OrdnanceSurvey.js') %]">
 [% END %]
 
+[% IF bodyclass.match('mappage') AND c.config.BASE_URL == "https://www.fixmystreet.com" %]
+<script src="//www.google-analytics.com/cx/api.js?experiment=jydOGgMrQRaWedSNoiW-SQ"></script>
+<script nonce="[% csp_nonce %]">
+    var variation = typeof cxApi !== "undefined" ? cxApi.chooseVariation() : 0,
+        docElement = document.documentElement,
+        className = docElement.className;
+    docElement.className = className + ' banner-position-variant-' + variation;
+</script>
+<style>
+    html .banner-position-variant-1 { display: none !important; }
+    html.banner-position-variant-1 .banner-position-variant-0 { display: none !important; }
+    html.banner-position-variant-1 .banner-position-variant-1 { display: block !important; }
+    html.banner-position-variant-1 #side .big-green-banner ~ section.full-width { margin-top: -1em; }
+</style>
+[% END %]
+
 [% IF bodyclass.match('frontpage') %]
 <link rel="prefetch" href="[% version('/cobrands/fixmystreet.com/js.js') %]">
 [% END %]
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 6088f842c..b78d5ce5b 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -49,6 +49,30 @@ svg|g.site-logo__svg {
     @include svg-background-image("/cobrands/fixmystreet/images/site-logo");
 }
 
+// Big green banner A/B test.
+#map_box .big-green-banner {
+    position: absolute;
+    left: 50%;
+    bottom: 80px; // above #sub_map_links
+    transform: translateX(-50%);
+    margin: 0;
+    font-size: 1.2em;
+    line-height: 1.3em;
+    padding: 0.6em 1em 0.5em;
+    border-radius: 5px; // match .big-hide-pins-link
+    background-image: none; // remove "arrow" image
+
+    @media (min-width: 64em) {
+        bottom: 32px; // match #sub_map_links
+        left: calc( ( 100% - 220px ) / 2 );
+        max-width: calc( 100% - 300px );
+    }
+
+    @media (min-width: 82em) {
+        left: 50%;
+    }
+}
+
 .next-steps {
   margin: 0 -1em; // counteract padding on parent
   background-color: #faf7e2;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index c187c218c..443d7d986 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -669,6 +669,14 @@ $.extend(fixmystreet.set_up, {
     });
   },
 
+  clicking_banner_begins_report: function() {
+    $('.big-green-banner').on('click', function(){
+      if (fixmystreet.map.getCenter) {
+        fixmystreet.display.begin_report( fixmystreet.map.getCenter() );
+      }
+    });
+  },
+
   map_controls: function() {
     //add permalink on desktop, force hide on mobile
     //add links container (if its not there)