app/assets/javascripts/index/map_ui.js

   1 //= require templates/map/layers
   2
   3 OSM.MapUI = L.Control.extend({
   4     onAdd: function(map) {
   5         this._initLayout(map);
   6         return this._container;
   7     },
   8
   9     _initLayout: function(map) {
  10         var className = 'control-layers',
  11             container = this._container = L.DomUtil.create('div', className);
  12
  13         var link = this._layersLink = L.DomUtil.create('a', 'control-button', container);
  14         link.innerHTML = "<span class='icon layers'></span>";
  15         link.href = '#';
  16         link.title = 'Layers';
  17
  18         this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
  19         L.DomEvent
  20             .on(this._uiPane, 'click', L.DomEvent.stopPropagation)
  21             .on(this._uiPane, 'click', L.DomEvent.preventDefault)
  22             .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault);
  23
  24         $(link).on('click', $.proxy(this.toggleLayers, this));
  25     },
  26
  27     toggleLayers: function(e) {
  28         e.stopPropagation();
  29         e.preventDefault();
  30
  31         var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
  32
  33         if ($(this._uiPane).is(':visible')) {
  34             $(this._uiPane).hide();
  35             controlContainer.css({paddingRight: '0'});
  36         } else {
  37             $(this._uiPane)
  38                 .show()
  39                 .html(JST["templates/map/layers"]());
  40             controlContainer.css({paddingRight: '200px'});
  41         }
  42     }
  43 });
  44
  45 OSM.mapUI = function() {
  46     return new OSM.MapUI();
  47 };