Use the small zoom control in the small screen layout

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}));
 

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 {

app/assets/stylesheets/large.css

@@ -5,3 +5,9 @@
 #small-greeting {
   display: none;
 }
+
+/* Rules for OpenLayers maps */
+
+.leaflet-control-zoom {
+  display: none;
+}

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;