X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/d0ed118ee24401a7e6117efa74522e67a9babba6..ef73cc1f574124b10cda75188aa542d9f4d802bb:/app/assets/javascripts/leaflet.layers.js

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index ce0fcd9f3..15f114a5c 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -7,58 +7,82 @@ L.OSM.Layers = L.Control.extend({
     return this._container;
   },
 
-  _initLayout: function (map) {
+  _initLayout: function () {
     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);
+    var link = L.DomUtil.create('a', 'control-button', container);
+    link.innerHTML = "<span class='icon layers'></span>";
     link.href = '#';
     link.title = 'Layers';
 
-    this._uiPane = this.options.uiPane;
+    this._ui = $(L.DomUtil.create('div', 'layers-ui', this.options.uiPane))
+      .html(JST["templates/map/layers"]());
 
-    $(link).on('click', $.proxy(this.toggleLayers, this));
-  },
-
-  toggleLayers: function (e) {
-    e.stopPropagation();
-    e.preventDefault();
+    var list = this._ui.find('.base-layers ul');
 
-    var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
-
-    if ($(this._uiPane).is(':visible')) {
-      $(this._uiPane).hide();
-      controlContainer.css({paddingRight: '0'});
-    } else {
-      $(this._uiPane)
-        .show()
-        .html(JST["templates/map/layers"]());
-
-      var list = $(this._uiPane).find('.base-layers ul');
+    this.options.layers.forEach(function(layer) {
+      var item = $('<li></li>')
+        .appendTo(list);
 
-      var layers = this.options.layers;
-      for (var i = 0; i < layers.length; i++) {
-        var item = $('<li></li>')
-          .appendTo(list);
+      if (this._map.hasLayer(layer)) {
+        item.addClass('active');
+      }
 
-        var div = $('<div></div>')
-            .appendTo(item);
+      var div = $('<div></div>')
+        .appendTo(item);
 
+      this._map.whenReady(function() {
         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);
+          .addLayer(new layer.constructor);
 
         map.dragging.disable();
         map.touchZoom.disable();
         map.doubleClickZoom.disable();
         map.scrollWheelZoom.disable();
+      }, this);
+
+      var label = $('<label></label>')
+        .text(layer.options.name)
+        .appendTo(item);
+
+      item.on('click', function() {
+        this.options.layers.forEach(function(other) {
+          if (other === layer) {
+            this._map.addLayer(other);
+          } else {
+            this._map.removeLayer(other);
+          }
+        }, this);
+      }.bind(this));
+
+      this._map.on('layeradd', function(e) {
+        if (e.layer === layer) {
+          item.addClass('active');
+        }
+      }).on('layerremove', function(e) {
+        if (e.layer === layer) {
+          item.removeClass('active');
+        }
+      });
+    }, this);
 
-        var label = $('<label></label>')
-          .text(layers[i].name)
-          .appendTo(item);
-      }
+    $(link).on('click', $.proxy(this.toggleLayers, this));
+  },
 
-      controlContainer.css({paddingRight: '200px'});
+  toggleLayers: function (e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
+
+    if ($(this._ui).is(':visible')) {
+      $(this.options.uiPane).hide();
+      controlContainer.css({paddingRight: '0'});
+    } else {
+      $(this.options.uiPane).show();
+      controlContainer.css({paddingRight: '230px'});
     }
   }
 });