app/assets/javascripts/leaflet.layers.js

   1 //= require templates/map/layers
   2
   3 L.OSM.Layers = L.Control.extend({
   4   onAdd: function (map) {
   5     this._initLayout(map);
   6     return this._container;
   7   },
   8
   9   _initLayout: function (map) {
  10     var className = 'leaflet-control-map-ui',
  11       container = this._container = L.DomUtil.create('div', className);
  12
  13     var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container);
  14     link.href = '#';
  15     link.title = 'Layers';
  16
  17     this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container);
  18
  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"]({layers: this.options.layers}));
  40       controlContainer.css({paddingRight: '200px'});
  41     }
  42   }
  43 });
  44
  45 L.OSM.layers = function(options) {
  46   return new L.OSM.Layers(options);
  47 };