Work on layers UI

app/assets/javascripts/index.js

@@ -61,11 +61,17 @@ $(document).ready(function () {
   L.control.customZoom({position: 'topright'})
     .addTo(map);
 
-  L.OSM.layers({position: 'topright', layers: layers})
+  var uiPane = $('#map-ui')[0];
-    .addTo(map);
+
+  L.OSM.layers({
+    position: 'topright',
+    layers: layers,
+    uiPane: uiPane
+  }).addTo(map);
 
   L.control.share({
-      getUrl: getShortUrl
+    getUrl: getShortUrl,
+    uiPane: uiPane
   }).addTo(map);
 
   L.control.note({

app/assets/javascripts/leaflet.layers.js

@@ -2,6 +2,7 @@
 
 L.OSM.Layers = L.Control.extend({
   onAdd: function (map) {
+    this._map = map;
     this._initLayout(map);
     return this._container;
   },
@@ -14,12 +15,7 @@ L.OSM.Layers = L.Control.extend({
     link.href = '#';
     link.title = 'Layers';
 
-    this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
+    this._uiPane = this.options.uiPane;
-
-    L.DomEvent
-      .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
-      .on(this._uiPane, 'click', L.DomEvent.preventDefault)
-      .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
 
     $(link).on('click', $.proxy(this.toggleLayers, this));
   },
@@ -36,7 +32,32 @@ L.OSM.Layers = L.Control.extend({
     } else {
       $(this._uiPane)
         .show()
-        .html(JST["templates/map/layers"]({layers: this.options.layers}));
+        .html(JST["templates/map/layers"]());
+
+      var list = $(this._uiPane).find('.base-layers ul');
+
+      var layers = this.options.layers;
+      for (var i = 0; i < layers.length; i++) {
+        var item = $('<li></li>')
+          .appendTo(list);
+
+        var div = $('<div></div>')
+            .appendTo(item);
+
+        var map = L.map(div[0], {attributionControl: false, zoomControl: false})
+          .setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
+          .addLayer(new layers[i].layer.constructor);
+
+        map.dragging.disable();
+        map.touchZoom.disable();
+        map.doubleClickZoom.disable();
+        map.scrollWheelZoom.disable();
+
+        var label = $('<label></label>')
+          .text(layers[i].name)
+          .appendTo(item);
+      }
+
       controlContainer.css({paddingRight: '200px'});
     }
   }

app/assets/javascripts/leaflet.share.js

@@ -16,12 +16,7 @@ L.Control.Share = L.Control.extend({
         link.href = '#';
         link.title = this.options.title;
 
-        this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
+        this._uiPane = this.options.uiPane;
-
-        L.DomEvent
-            .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
-            .on(this._uiPane, 'click', L.DomEvent.preventDefault)
-            .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
 
         var h2 = L.DomUtil.create('h2', '', this._uiPane);
         h2.innerHTML = I18n.t('javascripts.share.title');

app/assets/javascripts/templates/map/layers.jst.ejs

@@ -7,8 +7,5 @@
 <div class='base-layers'>
     <p><%= I18n.t('javascripts.map.layers.base') %></p>
     <ul>
-        <% for (var i = 0; i < layers.length; i++) { %>
-        <label><input type='radio'><%= layers[i].name %></label>
-        <% } %>
     </ul>
 </div>

app/assets/stylesheets/common.css.scss

@@ -562,20 +562,18 @@ a.donate {
   margin: 10px;
 }
 
-.leaflet-map-ui-layers {
+#map-ui {
-  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
+  position: absolute;
-  background: #f8f8f9;
+  display: none;
-  -webkit-border-radius: 8px;
+  right: 0;
-  border-radius: 8px;
+  width: 200px;
-  background-position: 50% 50%;
+  height: 100%;
-  background-repeat: no-repeat;
+  background: white;
-  display: block;
-  width: 36px;
-  height: 36px;
-}
 
-.leaflet-control-layers-separator {
+  .leaflet-container {
-  margin: 5px -10px !important;
+    width: 100%;
+    height: 50px;
+  }
 }
 
 .leaflet-control-attribution {

app/assets/stylesheets/leaflet-all.css.scss

@@ -1,7 +1,6 @@
 /*
  *= require leaflet
  *= require leaflet.locationfilter
- *= require map-ui
  */
 
 /* Override to serve images through the asset pipeline. */

app/views/site/index.html.erb

@@ -20,6 +20,9 @@
 <div id="map">
 </div>
 
+<div id="map-ui">
+</div>
+
 <iframe id="linkloader" style="display: none">
 </iframe>