From f1a4669c957d29c012466768581c4a801e5029be Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 12 Jun 2013 10:59:25 -0700
Subject: [PATCH 1/1] Arrange and group map buttons

---
 app/assets/javascripts/index.js        | 25 +++++++++++++++++++------
 app/assets/javascripts/leaflet.key.js  | 25 +++++++++++++++++++++++++
 app/assets/stylesheets/common.css.scss | 11 ++++++++++-
 3 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/leaflet.key.js

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index fed4c1d8a..39d416ba9 100644
--- 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
index 000000000..4cab964c9
--- /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 97db74b8c..f9a6c8b9e 100644
--- 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;
 }
 
-- 
2.43.2