Work on layers UI

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 4041191343dc4b183427bc5f6027f1d225a10273..40fe1176100400412e1c441c04e6ce041f394b98 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -61,19 +61,25 @@ $(document).ready(function () {
   L.control.customZoom({position: 'topright'})
     .addTo(map);
 
   L.control.customZoom({position: 'topright'})
     .addTo(map);
 

-  L.OSM.layers({position: 'topright', layers: layers})
-    .addTo(map);
+  var uiPane = $('#map-ui')[0];
+
+  L.OSM.layers({
+    position: 'topright',
+    layers: layers,
+    uiPane: uiPane
+  }).addTo(map);

 
   L.control.share({
 
   L.control.share({

-      getUrl: getShortUrl
+    getUrl: getShortUrl,
+    uiPane: uiPane

   }).addTo(map);
 
   L.control.note({
   }).addTo(map);
 
   L.control.note({

-      position: 'topright'
+    position: 'topright'

   }).addTo(map);
 
   L.control.locate({
   }).addTo(map);
 
   L.control.locate({

-      position: 'topright'
+    position: 'topright'

   }).addTo(map);
 
   L.control.scale().addTo(map);
   }).addTo(map);
 
   L.control.scale().addTo(map);

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 6c83f0c2fb5b38e871011d12fbd494da615d42dc..ce0fcd9f329efc1dc220b81565945cc2e26497cc 100644 (file)
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -2,6 +2,7 @@
 
 L.OSM.Layers = L.Control.extend({
   onAdd: function (map) {
 
 L.OSM.Layers = L.Control.extend({
   onAdd: function (map) {

+    this._map = map;

     this._initLayout(map);
     return this._container;
   },
     this._initLayout(map);
     return this._container;
   },


@@ -14,12 +15,7 @@ L.OSM.Layers = L.Control.extend({
     link.href = '#';
     link.title = 'Layers';
 
     link.href = '#';
     link.title = 'Layers';
 

-    this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
-
-    L.DomEvent
-      .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
-      .on(this._uiPane, 'click', L.DomEvent.preventDefault)
-      .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
+    this._uiPane = this.options.uiPane;

 
     $(link).on('click', $.proxy(this.toggleLayers, this));
   },
 
     $(link).on('click', $.proxy(this.toggleLayers, this));
   },


@@ -36,7 +32,32 @@ L.OSM.Layers = L.Control.extend({
     } else {
       $(this._uiPane)
         .show()
     } 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'});
     }
   }
       controlContainer.css({paddingRight: '200px'});
     }
   }

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7449fb6d786f9e9178a9ddc100644d2e5a3b8d1e..f085bc0e69ab9e0feefdaf0409e9295d6e995bdd 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -16,12 +16,7 @@ L.Control.Share = L.Control.extend({
         link.href = '#';
         link.title = this.options.title;
 
         link.href = '#';
         link.title = this.options.title;
 

-        this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
-
-        L.DomEvent
-            .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
-            .on(this._uiPane, 'click', L.DomEvent.preventDefault)
-            .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
+        this._uiPane = this.options.uiPane;

 
         var h2 = L.DomUtil.create('h2', '', this._uiPane);
         h2.innerHTML = I18n.t('javascripts.share.title');
 
         var h2 = L.DomUtil.create('h2', '', this._uiPane);
         h2.innerHTML = I18n.t('javascripts.share.title');

diff --git a/app/assets/javascripts/templates/map/layers.jst.ejs b/app/assets/javascripts/templates/map/layers.jst.ejs
index 66fa1f7ed9ce47c7677bea1d33d84c42c658f505..cbda1d6967144ee0e33602befb5ff4341902d62c 100644 (file)
--- a/app/assets/javascripts/templates/map/layers.jst.ejs
+++ b/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>
 <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>
     </ul>
 </div>

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index ba25591d304da575d0de4f3fefcc66547d5a0388..dd29b813dfbec0b0a31a6c155d306909ee5d4b33 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -562,20 +562,18 @@ a.donate {
   margin: 10px;
 }
 
   margin: 10px;
 }
 

-.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;
-  width: 36px;
-  height: 36px;
-}
+#map-ui {
+  position: absolute;
+  display: none;
+  right: 0;
+  width: 200px;
+  height: 100%;
+  background: white;

 
 

-.leaflet-control-layers-separator {
-  margin: 5px -10px !important;
+  .leaflet-container {
+    width: 100%;
+    height: 50px;
+  }

 }
 
 .leaflet-control-attribution {
 }
 
 .leaflet-control-attribution {

diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss
index 95f89bd2b496f87d86bf249f3b42f2f3f383a453..1f84b575439b0aa37e22ee1fa33fb876806a9d5c 100644 (file)
--- a/app/assets/stylesheets/leaflet-all.css.scss
+++ b/app/assets/stylesheets/leaflet-all.css.scss
@@ -1,7 +1,6 @@
 /*
  *= 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
deleted file mode 100644 (file)
index e69de29..0000000

diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index 9f3ff7d85a56eacc29dbb6a68b232135a4b0ce5b..478669529f802a1a28e5b46bdabff7f82e22b9c7 100644 (file)
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -20,6 +20,9 @@
 <div id="map">
 </div>
 
 <div id="map">
 </div>
 

+<div id="map-ui">
+</div>
+

 <iframe id="linkloader" style="display: none">
 </iframe>
 
 <iframe id="linkloader" style="display: none">
 </iframe>