Add ‘hide pins’ button to map

Fixes #175.

7 files changed, 33 insertions, 13 deletions

diff --git a/www/css/fms.css b/www/css/fms.css
index b187743..d800619 100644
--- a/www/css/fms.css
+++ b/www/css/fms.css
@@ -598,19 +598,31 @@
 
     }
 
-    #relocate {
-        display: block;
+    #relocate, #hidepins {
+        display: inline-block;
         height: 30px;
         width: 30px;
         padding: 5px;
         margin: 0px;
         background-color: rgba(248,248,248,0.9);
+    }
+
+    #relocate {
         background-image: url(../images/location@x2.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 50%;
     }
 
+    #hidepins {
+        background-image: url(../images/hide-pins-link.png);
+        background-image: url(../images/hide-pins-link.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 80%;
+        margin-left: .3em;
+    }
+
     #pc {
         padding-left: 0.2em;
         border-left: 1px solid #F6BE41;
diff --git a/www/images/hide-pins-link.png b/www/images/hide-pins-link.png
new file mode 100644
index 0000000..d2b48ac
--- /dev/null
+++ b/www/images/hide-pins-link.png
diff --git a/www/images/hide-pins-link.svg b/www/images/hide-pins-link.svg
new file mode 100644
index 0000000..1c8ed76
--- /dev/null
+++ b/www/images/hide-pins-link.svg
@@ -0,0 +1 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><path d="M25.4 21.1l-3.7-3.6A4 4 0 0 0 18 12a4 4 0 0 0-1.5.3L13 8.6a9 9 0 0 1 12.5 12.5zm-4.5 4l-3 6-3.4-6.8a9 9 0 0 1-5.2-10.7L21 25.2zM7.4 6L30 28.6 28.6 30 6 7.4z"/></g></svg>
\ No newline at end of file
diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js
index f94f3ce..1de220d 100644
--- a/www/js/map-OpenLayers.js
+++ b/www/js/map-OpenLayers.js
@@ -404,7 +404,7 @@ OpenLayers.Control.ActionAfterDrag = OpenLayers.Class(OpenLayers.Control, {
         if ( $('#confirm-map').css('display') == 'block' ) {
             $('#reposition').show();
         } else {
-            $('#relocate').show();
+            $('#relocate, #hidepins').removeClass('nodisplay');
             $('#front-howto').hide();
         }
     }
diff --git a/www/js/views/around.js b/www/js/views/around.js
index 8ebe8f8..965f4eb 100644
--- a/www/js/views/around.js
+++ b/www/js/views/around.js
@@ -15,6 +15,7 @@
                 'vclick .ui-input-clear': 'clearSearchErrors',
                 'blur #pc': 'clearSearchErrors',
                 'vclick #relocate': 'centerMapOnPosition',
+                'vclick #hidepins': 'toggleMarkersVisibility',
                 'vclick #cancel': 'onClickCancel',
                 'vclick #confirm-map': 'onClickReport',
                 'vclick #mark-here': 'onClickMark',
@@ -45,7 +46,7 @@
                 $('#view-my-reports').hide();
                 $('#login-options').hide();
                 $('#postcodeForm').hide();
-                $('#relocate').hide();
+                $('#relocate, #hidepins').addClass("nodisplay");
                 $('#cancel').hide();
                 $('#map_box').removeClass('background-map');
                 this.fixPageHeight();
@@ -101,7 +102,7 @@
             },
 
             gotLocation: function( info ) {
-                $('#relocate').show();
+                $('#relocate, #hidepins').removeClass("nodisplay");
                 this.finishedLocating();
 
                 this.listenTo(FMS.locator, 'gps_current_position', this.positionUpdate);
@@ -121,7 +122,7 @@
 
             positionUpdate: function( info ) {
                 if ( $('#front-howto').is(':hidden') ) {
-                    $('#relocate').show();
+                    $('#relocate, #hidepins').removeClass("nodisplay");
                 }
                 FMS.currentPosition = info.coordinates;
                 var centre = this.projectCoords( info.coordinates );
@@ -182,7 +183,7 @@
                     msg = FMS.strings.location_problem;
                 }
                 if ( !fixmystreet.map ) {
-                    $('#relocate').hide();
+                    $('#relocate, #hidepins').addClass("nodisplay");
                     $('#mark-here').hide();
                     // if we are going to display the help then we don't want to focus on
                     // the search box as it will show through the help
@@ -267,7 +268,6 @@
 
             onClickCancel: function(e) {
                 e.preventDefault();
-                fixmystreet.markers.removeAllFeatures();
                 fixmystreet_activate_drag();
                 // force pins to be refetched and displayed
                 fixmystreet.bbox_strategy.update({force: true});
@@ -352,7 +352,7 @@
             },
 
             goAddress: function(e) {
-                $('#relocate').show();
+                $('#relocate, #hidepins').removeClass("nodisplay");
                 $('#front-howto').html('').hide();
                 var t = $(e.target);
                 var lat = t.attr('data-lat');
@@ -371,7 +371,7 @@
                     $('#pc').attr('placeholder', msg).addClass('error');;
                 } else {
                     $('#front-howto').html(msg);
-                    $('#relocate').hide();
+                    $('#relocate, #hidepins').addClass("nodisplay");
                     $('#front-howto').show();
                 }
             },
@@ -380,7 +380,7 @@
                 $('#pc').attr('placeholder', this.origPcPlaceholder).removeClass('error');;
                 if ( fixmystreet.map ) {
                     $('#front-howto').hide();
-                    $('#relocate').show();
+                    $('#relocate, #hidepins').removeClass("nodisplay");
                 }
             },
 
@@ -400,7 +400,7 @@
                     }
                     $('#front-howto').html('<p>Multiple matches found</p><ul data-role="listview" data-inset="true">' + multiple + '</ul>');
                     $('.ui-page').trigger('create');
-                    $('#relocate').hide();
+                    $('#relocate, #hidepins').addClass("nodisplay");
                     $('#front-howto').show();
                 } else {
                     this.searchError( FMS.strings.location_problem );
@@ -440,7 +440,7 @@
                 e.preventDefault();
                 if ( !fixmystreet.map ) {
                     this.$('#mark-here').hide();
-                    this.$('#relocate').hide();
+                    this.$('#relocate, #hidepins').addClass("nodisplay");
                     $('#front-howto').html('<p>' + FMS.strings.locate_dismissed + '</p>');
                     $('#front-howto').show();
                 }
@@ -495,6 +495,11 @@
                 );
 
                 return centre;
+            },
+
+            toggleMarkersVisibility: function(e) {
+                e.preventDefault();
+                fixmystreet.markers.setVisibility(!fixmystreet.markers.getVisibility());
             }
         })
     });
diff --git a/www/templates/en/around.html b/www/templates/en/around.html
index 7c64fe5..8328a95 100644
--- a/www/templates/en/around.html
+++ b/www/templates/en/around.html
@@ -33,6 +33,7 @@
         <% } %>
         </form>
         <a data-role="none" id="relocate" class="nodisplay"></a>
+        <a data-role="none" id="hidepins" class="nodisplay"></a>
 
         <div class="nodisplay" id="front-howto"></div>
     </div>
diff --git a/www/templates/es/around.html b/www/templates/es/around.html
index 8686933..5f47ed4 100644
--- a/www/templates/es/around.html
+++ b/www/templates/es/around.html
@@ -33,6 +33,7 @@
         <% } %>
         </form>
         <a data-role="none" id="relocate" class="nodisplay"></a>
+        <a data-role="none" id="hidepins" class="nodisplay"></a>
 
         <div class="nodisplay" id="front-howto"></div>
     </div>