Use the small zoom control in the small screen layout

diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb
index 00aec648413b94f7e6262d5cbcce97b7bb82e67b..393e9cae7d3e88f3b3a01b718e084fe37a8934e2 100644 (file)
--- a/app/assets/javascripts/map.js.erb
+++ b/app/assets/javascripts/map.js.erb
@@ -78,7 +78,7 @@ var layers = [
 ];
 
 function createMap(divName, options) {
-  options = $.extend({zoomControl: false, panZoomControl: true, layerControl: true}, options);
+  options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options);
 
   map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18}));
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index c0796bdad289638fcc161493ed9db05eb9afe05d..d3d644801074a568028c6bb8177405d2fb95f854 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1005,6 +1005,15 @@ p#contributorGuidance {
 
 /* Rules for the user map */
 
+.user_map .leaflet-control-pan,
+.user_map .leaflet-control-zoomslider {
+  display: none;
+}
+
+.user_map .leaflet-control-zoom {
+  display: block;
+}
+
 /* Rules for user popups on maps */
 
 .user_popup {

diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css
index a24a55813df8384d28728a5813016ff3f484e95c..5ffaee985561db98a56138059649c8922dfaedd0 100644 (file)
--- a/app/assets/stylesheets/large.css
+++ b/app/assets/stylesheets/large.css
@@ -5,3 +5,9 @@
 #small-greeting {
   display: none;
 }
+
+/* Rules for OpenLayers maps */
+
+.leaflet-control-zoom {
+  display: none;
+}

diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index 19b4e6b89110b66a16f545574d1eeaa9bf3a5cd8..d7600a0d6c24d88b940f170b65768a473b1952f7 100644 (file)
--- a/app/assets/stylesheets/small.css.scss
+++ b/app/assets/stylesheets/small.css.scss
@@ -92,6 +92,10 @@ h1 {
   border: 0;
 }
 
+.leaflet-control-pan, .leaflet-control-zoomslider {
+  display: none;
+}
+
 .site-index .leaflet-top .leaflet-control,
 .site-export .leaflet-top .leaflet-control {
   margin-top: 10px !important;