From ef37ad8aaac510d34ccf7f14589c2584fc2b63ac Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 10 Jun 2013 10:24:02 -0700
Subject: [PATCH] Basic framework for map UI

---
 app/assets/javascripts/index.js               |  5 ++-
 app/assets/javascripts/index/browse.js        |  2 +-
 app/assets/javascripts/index/map_ui.js        | 40 +++++++++++++++++++
 app/assets/javascripts/index/notes.js.erb     |  2 +-
 .../javascripts/templates/map/layers.jst.ejs  |  1 +
 app/assets/stylesheets/leaflet-all.css.scss   |  1 +
 app/assets/stylesheets/map-ui.css.scss        | 21 ++++++++++
 7 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/index/map_ui.js
 create mode 100644 app/assets/javascripts/templates/map/layers.jst.ejs
 create mode 100644 app/assets/stylesheets/map-ui.css.scss

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 9f0c86493..7fad2ed23 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -3,12 +3,15 @@
 //= require index/export
 //= require index/key
 //= require index/notes
+//= require index/map_ui
 
 $(document).ready(function () {
   var permalinks = $("#permalink").detach().html();
   var marker;
   var params = OSM.mapParams();
-  var map = createMap("map");
+  var map = createMap("map", {layerControl: false});
+
+  OSM.mapUI().addTo(map);
 
   L.control.scale().addTo(map);
 
diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 228a5a411..8681d8f56 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -36,7 +36,7 @@ $(document).ready(function () {
   });
 
   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
-    map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name"));
+//    map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name"));
   }
 
   map.on('layeradd', function (e) {
diff --git a/app/assets/javascripts/index/map_ui.js b/app/assets/javascripts/index/map_ui.js
new file mode 100644
index 000000000..0f13adcff
--- /dev/null
+++ b/app/assets/javascripts/index/map_ui.js
@@ -0,0 +1,40 @@
+//= require templates/map/layers
+
+OSM.MapUI = L.Control.extend({
+    onAdd: function(map) {
+        this._initLayout(map);
+        return this._container;
+    },
+
+    _initLayout: function(map) {
+        var className = 'leaflet-control-map-ui',
+            container = this._container = L.DomUtil.create('div', className);
+
+        var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container);
+        link.href = '#';
+        link.title = 'Layers';
+
+        this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
+
+        $(link).on('click', $.proxy(this.toggleLayers, this));
+    },
+
+    toggleLayers: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if ($(this._uiPane).is(':visible')) {
+            $(this._uiPane).hide();
+            $(this._container).css({paddingRight: '0'})
+        } else {
+            $(this._uiPane)
+                .show()
+                .html(JST["templates/map/layers"]());
+            $(this._container).css({paddingRight: '200px'})
+        }
+    }
+});
+
+OSM.mapUI = function() {
+    return new OSM.MapUI();
+};
diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 6a7c50373..e540826ec 100644
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -63,7 +63,7 @@ $(document).ready(function () {
   });
 
   if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
-    map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));
+//    map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));
 
     if (params.layers) setMapLayers(params.layers);
     if (params.notes) map.addLayer(noteLayer);
diff --git a/app/assets/javascripts/templates/map/layers.jst.ejs b/app/assets/javascripts/templates/map/layers.jst.ejs
new file mode 100644
index 000000000..c94a7779d
--- /dev/null
+++ b/app/assets/javascripts/templates/map/layers.jst.ejs
@@ -0,0 +1 @@
+<h2>Layers</h2>
diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index a32e24dd1..dd84f6cff 100644
--- a/app/assets/stylesheets/leaflet-all.css.scss
+++ b/app/assets/stylesheets/leaflet-all.css.scss
@@ -1,6 +1,7 @@
 /*
  *= require leaflet
  *= require leaflet.locationfilter
+ *= require map-ui
  */
 
 /* Override to serve images through the asset pipeline. */
diff --git a/app/assets/stylesheets/map-ui.css.scss b/app/assets/stylesheets/map-ui.css.scss
new file mode 100644
index 000000000..f1b81ac38
--- /dev/null
+++ b/app/assets/stylesheets/map-ui.css.scss
@@ -0,0 +1,21 @@
+.leaflet-map-ui-layers {
+  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
+  background: #f8f8f9;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+  background-image: image-url("images/layers.png");
+  width: 36px;
+  height: 36px;
+}
+
+.leaflet-map-ui {
+  position: absolute;
+  display: none;
+  right: 0;
+  width: 200px;
+  height: 100%;
+  background: white;
+}
-- 
2.39.5