Merge pull request #3704 from AntonKhorev/leaflet-control-groups

Group map controls explicitly

app/assets/javascripts/index.js

@@ -2,6 +2,7 @@
 //= require leaflet.sidebar
 //= require leaflet.sidebar-pane
 //= require leaflet.locatecontrol/src/L.Control.Locate
+//= require leaflet.locate
 //= require leaflet.layers
 //= require leaflet.key
 //= require leaflet.note
@@ -98,62 +99,60 @@ $(document).ready(function () {
     }
   });
 
-  var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
-
-  L.OSM.zoom({ position: position })
-    .addTo(map);
-
-  var locate = L.control.locate({
-    position: position,
-    icon: "icon geolocate",
-    iconLoading: "icon geolocate",
-    strings: {
-      title: I18n.t("javascripts.map.locate.title"),
-      popup: function (options) {
-        return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance });
-      }
-    }
-  }).addTo(map);
-
-  var locateContainer = locate.getContainer();
-
-  $(locateContainer)
-    .removeClass("leaflet-control-locate leaflet-bar")
-    .addClass("control-locate")
-    .children("a")
-    .attr("href", "#")
-    .removeClass("leaflet-bar-part leaflet-bar-part-single")
-    .addClass("control-button");
-
   var sidebar = L.OSM.sidebar("#map-ui")
     .addTo(map);
 
+  var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
+
+  function addControlGroup(controls) {
+    controls.forEach(function (control) {
+      control.addTo(map);
+    });
+
+    var firstContainer = controls[0].getContainer();
+    $(firstContainer).find(".control-button").first()
+      .addClass("control-button-first");
+
+    var lastContainer = controls[controls.length - 1].getContainer();
+    $(lastContainer).find(".control-button").last()
+      .addClass("control-button-last");
+  }
+
+  addControlGroup([
+    L.OSM.zoom({ position: position }),
+    L.OSM.locate({ position: position })
+  ]);
+
+  addControlGroup([
     L.OSM.layers({
       position: position,
       layers: map.baseLayers,
       sidebar: sidebar
-  }).addTo(map);
-
+    }),
     L.OSM.key({
       position: position,
       sidebar: sidebar
-  }).addTo(map);
-
+    }),
     L.OSM.share({
       "position": position,
       "sidebar": sidebar,
       "short": true
-  }).addTo(map);
+    })
+  ]);
 
+  addControlGroup([
     L.OSM.note({
       position: position,
       sidebar: sidebar
-  }).addTo(map);
+    })
+  ]);
 
+  addControlGroup([
     L.OSM.query({
       position: position,
       sidebar: sidebar
-  }).addTo(map);
+    })
+  ]);
 
   L.control.scale()
     .addTo(map);

app/assets/javascripts/leaflet.locate.js

@@ -0,0 +1,26 @@
+L.OSM.locate = function (options) {
+  var control = L.control.locate(Object.assign({
+    icon: "icon geolocate",
+    iconLoading: "icon geolocate",
+    strings: {
+      title: I18n.t("javascripts.map.locate.title"),
+      popup: function (options) {
+        return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance });
+      }
+    }
+  }, options));
+
+  control.onAdd = function (map) {
+    var container = Object.getPrototypeOf(this).onAdd.apply(this, [map]);
+    $(container)
+      .removeClass("leaflet-control-locate leaflet-bar")
+      .addClass("control-locate")
+      .children("a")
+      .attr("href", "#")
+      .removeClass("leaflet-bar-part leaflet-bar-part-single")
+      .addClass("control-button");
+    return container;
+  };
+
+  return control;
+};

app/assets/stylesheets/common.scss

@@ -358,8 +358,6 @@ body.small-nav {
   width: 40px;
   background-color: #333;
   background-color: rgba(0,0,0,.6);
-  border-radius: 4px 0 0 4px;
-  margin-bottom: 10px;
   outline: none;
 
   &:hover,
@@ -378,28 +376,20 @@ body.small-nav {
     background-color: $vibrant-green;
   }
 
+  &-first {
+    border-start-start-radius: 4px;
+  }
+
+  &-last {
+    border-end-start-radius: 4px;
+    margin-bottom: 10px;
+  }
+
   .icon {
     margin: 10px;
   }
 }
 
-.leaflet-control .zoomin,
-.control-layers .control-button {
-  margin-bottom: 0px;
-  border-radius: 4px 0 0 0;
-}
-
-.leaflet-control .zoomout,
-.control-key .control-button {
-  margin-bottom: 0;
-  border-radius: 0;
-}
-
-.control-locate .control-button,
-.control-share .control-button {
-  border-radius: 0 0 0 4px;
-}
-
 /* Rules for the sidebar and main map area */
 
 .map-layout {