Rename to L.OSM.Layers and continue implementation

app/assets/javascripts/application.js

@@ -6,8 +6,6 @@
 //= require leaflet
 //= require leaflet.osm
 //= require leaflet.locationfilter
-//= require leaflet.locate
-//= require leaflet.note
 //= require i18n/translations
 //= require oauth
 //= require osm
@@ -15,7 +13,6 @@
 //= require map
 //= require menu
 //= require sidebar
-//= require leaflet.share
 //= require richtext
 //= require resize
 //= require geocoder

app/assets/javascripts/index.js

@@ -1,9 +1,12 @@
 //= require_self
+//= require leaflet.layers
+//= require leaflet.share
+//= require leaflet.note
+//= require leaflet.locate
 //= require index/browse
 //= require index/export
 //= require index/key
 //= require index/notes
-//= require index/map_ui
 
 var map, layers; // TODO: remove globals
 
@@ -18,7 +21,36 @@ $(document).ready(function () {
 
   map.attributionControl.setPrefix('');
 
-  layers = mapLayers();
+  layers = [{
+    layer: new L.OSM.Mapnik({
+      attribution: ''
+    }),
+    keyid: "mapnik",
+    layerCode: "M",
+    name: I18n.t("javascripts.map.base.standard")
+  }, {
+    layer: new L.OSM.CycleMap( {
+      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+    }),
+    keyid: "cyclemap",
+    layerCode: "C",
+    name: I18n.t("javascripts.map.base.cycle_map")
+  }, {
+    layer: new L.OSM.TransportMap({
+      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
+    }),
+    keyid: "transportmap",
+    layerCode: "T",
+    name: I18n.t("javascripts.map.base.transport_map")
+  }, {
+    layer: new L.OSM.MapQuestOpen({
+      attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
+    }),
+    keyid: "mapquest",
+    layerCode: "Q",
+    name: I18n.t("javascripts.map.base.mapquest")
+  }];
+
   layers[0].layer.addTo(map);
 
   $("#map").on("resized", function () {
@@ -28,7 +60,8 @@ $(document).ready(function () {
   L.control.zoom({position: 'topright'})
     .addTo(map);
 
-  OSM.mapUI().addTo(map);
+  L.OSM.layers({position: 'topright', layers: layers})
+    .addTo(map);
 
   L.control.share({
       getUrl: function(map) {

app/assets/javascripts/index/map_ui.js

@@ -1,47 +0,0 @@
-//= require templates/map/layers
-
-OSM.MapUI = L.Control.extend({
-    onAdd: function(map) {
-        this._initLayout(map);
-        return this._container;
-    },
-
-    _initLayout: function(map) {
-        var className = 'control-layers',
-            container = this._container = L.DomUtil.create('div', className);
-
-        var link = this._layersLink = L.DomUtil.create('a', 'control-button', container);
-        link.innerHTML = "<span class='icon layers'></span>";
-        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);
-
-        $(link).on('click', $.proxy(this.toggleLayers, this));
-    },
-
-    toggleLayers: function(e) {
-        e.stopPropagation();
-        e.preventDefault();
-
-        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"]());
-            controlContainer.css({paddingRight: '200px'});
-        }
-    }
-});
-
-OSM.mapUI = function() {
-    return new OSM.MapUI();
-};

app/assets/javascripts/leaflet.layers.js

@@ -0,0 +1,47 @@
+//= require templates/map/layers
+
+L.OSM.Layers = 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);
+
+    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));
+  },
+
+  toggleLayers: function (e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    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"]({layers: this.options.layers}));
+      controlContainer.css({paddingRight: '200px'});
+    }
+  }
+});
+
+L.OSM.layers = function(options) {
+  return new L.OSM.Layers(options);
+};

app/assets/javascripts/map.js.erb

@@ -15,38 +15,6 @@ L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
 var objectLayer;
 var objectLoader;
 
-function mapLayers() {
-  return [{
-    layer: new L.OSM.Mapnik({
-      attribution: ''
-    }),
-    keyid: "mapnik",
-    layerCode: "M",
-    name: I18n.t("javascripts.map.base.standard")
-  }, {
-    layer: new L.OSM.CycleMap( {
-      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
-    }),
-    keyid: "cyclemap",
-    layerCode: "C",
-    name: I18n.t("javascripts.map.base.cycle_map")
-  }, {
-    layer: new L.OSM.TransportMap({
-      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
-    }),
-    keyid: "transportmap",
-    layerCode: "T",
-    name: I18n.t("javascripts.map.base.transport_map")
-  }, {
-    layer: new L.OSM.MapQuestOpen({
-      attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
-    }),
-    keyid: "mapquest",
-    layerCode: "Q",
-    name: I18n.t("javascripts.map.base.mapquest")
-  }]
-}
-
 function getUserIcon(url) {
   return L.icon({
     iconUrl: url || <%= asset_path('marker-red.png').to_json %>,

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

@@ -6,4 +6,9 @@
 </div>
 <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>