Arrange and group map buttons

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index fed4c1d8a36ba507dd7e2c9745c0810ddfb18931..39d416ba9019999d770b08e021d825d3c90ccd7f 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -1,9 +1,10 @@
 //= require_self
+//= require leaflet.customzoom
+//= require leaflet.locate
 //= require leaflet.layers
-//= require leaflet.share
+//= require leaflet.key
 //= require leaflet.note
-//= require leaflet.locate
-//= require leaflet.customzoom
+//= require leaflet.share
 //= require index/browse
 //= require index/export
 //= require index/key
@@ -58,6 +59,9 @@ $(document).ready(function () {
   L.control.customZoom({position: 'topright'})
     .addTo(map);
 
+  L.control.locate({position: 'topright'})
+    .addTo(map);
+
   var uiPane = $('#map-ui')[0];
 
   L.OSM.layers({
@@ -66,14 +70,23 @@ $(document).ready(function () {
     uiPane: uiPane
   }).addTo(map);
 
+  L.OSM.key({
+    position: 'topright',
+    uiPane: uiPane
+  }).addTo(map);
+
+  L.control.note({
+    position: 'topright',
+    uiPane: uiPane
+  }).addTo(map);
+
   L.control.share({
     getUrl: getShortUrl,
     uiPane: uiPane
   }).addTo(map);
 
-  L.control.note({ position: 'topright' }).addTo(map);
-  L.control.locate({ position: 'topright' }).addTo(map);
-  L.control.scale().addTo(map);
+  L.control.scale()
+    .addTo(map);
 
   map.on('moveend layeradd layerremove', updateLocation);
 

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
new file mode 100644 (file)
index 0000000..4cab964
--- /dev/null
+++ b/app/assets/javascripts/leaflet.key.js
@@ -0,0 +1,25 @@
+L.OSM.Key = L.Control.extend({
+  onAdd: function (map) {
+    this._map = map;
+    this._initLayout();
+    return this.$container[0];
+  },
+
+  _initLayout: function () {
+    var map = this._map;
+
+    this.$container = $('<div>')
+      .attr('class', 'control-key');
+
+    var link = $('<a>')
+      .attr('class', 'control-button')
+      .attr('href', '#')
+      .attr('title', 'Map Key')
+      .html('<span class="icon key"></span>')
+      .appendTo(this.$container);
+  }
+});
+
+L.OSM.key = function(options) {
+  return new L.OSM.Key(options);
+};

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 97db74b8ce7e31c2befef96f012ac4520bd76ea6..f9a6c8b9e15d2dd1cec38e635e5c0c167d0bb05c 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -554,12 +554,21 @@ a.donate {
   margin-bottom: 10px;
 }
 
-.leaflet-control a.zoomin {
+.leaflet-control a.zoomin,
+.control-layers a,
+.control-note a {
   margin-bottom: 0px;
   border-radius: 4px 4px 0px 0px;
 }
 
 .leaflet-control a.zoomout {
+  margin-bottom: 0px;
+  border-radius: 0px;
+}
+
+.control-locate a,
+.control-key a,
+.control-share a {
   border-radius: 0px 0px 4px 4px;
 }