Basic framework for map UI

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 9f0c8649340e63678c8288f60b0e0fa88c7ff093..7fad2ed239cc2317526cd334bbbf18aa8bc76fa6 100644 (file)
--- 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/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();
 
 $(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);
 
 
   L.control.scale().addTo(map);
 

diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 228a5a411ba8f38e62acbcddbae405dcbcf069fd..8681d8f56658bba1bc91b930621fb8621711ca4a 100644 (file)
--- 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') {
   });
 
   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) {
   }
 
   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 (file)
index 0000000..0f13adc
--- /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 6a7c50373d8173207c0e7439d45d55a15c3d64e4..e540826ecb77de37b24151fa91ba17de71d8915c 100644 (file)
--- 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') {
   });
 
   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);
 
     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 (file)
index 0000000..c94a777
--- /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 a32e24dd1488950540cd1762fec973e650514298..dd84f6cff46dac7ec22e5e0cec1d0e0de96f5acd 100644 (file)
--- 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 leaflet
  *= require leaflet.locationfilter

+ *= require map-ui

  */
 
 /* Override to serve images through the asset pipeline. */
  */
 
 /* 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 (file)
index 0000000..f1b81ac
--- /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;
+}