Add back basic zoom control

app/assets/javascripts/index.js

@@ -10,11 +10,15 @@ $(document).ready(function () {
   var marker;
   var params = OSM.mapParams();
   var map = createMap("map", {
+    zoomControl: false,
     layerControl: false
   }, {
     locateControl: true
   });
 
+  L.control.zoom({position: 'topright'})
+    .addTo(map);
+
   OSM.mapUI().addTo(map);
 
   L.control.scale().addTo(map);

app/assets/javascripts/index/map_ui.js

@@ -23,14 +23,16 @@ OSM.MapUI = L.Control.extend({
         e.stopPropagation();
         e.preventDefault();
 
+        var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
+
         if ($(this._uiPane).is(':visible')) {
             $(this._uiPane).hide();
-            $(this._container).css({paddingRight: '0'})
+            controlContainer.css({paddingRight: '0'})
         } else {
             $(this._uiPane)
                 .show()
                 .html(JST["templates/map/layers"]());
-            $(this._container).css({paddingRight: '200px'})
+            controlContainer.css({paddingRight: '200px'})
         }
     }
 });

app/assets/stylesheets/large.css

@@ -1,7 +1 @@
 /* Styles specific to large screens  */
-
-/* Rules for OpenLayers maps */
-
-.leaflet-control-zoom {
-  display: none;
-}

app/assets/stylesheets/map-ui.css.scss

@@ -1,3 +1,7 @@
+.leaflet-control-zoom {
+  margin-bottom: 10px;
+}
+
 .leaflet-map-ui-layers {
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
   background: #f8f8f9;