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._map = map;
   6     this._initLayout(map);
   7     return this._container;
   8   },
   9
  10   _initLayout: function () {
  11     var className = 'leaflet-control-map-ui',
  12       container = this._container = L.DomUtil.create('div', className);
  13
  14     var link = L.DomUtil.create('a', 'control-button', container);
  15     link.innerHTML = "<span class='icon layers'></span>";
  16     link.href = '#';
  17     link.title = 'Layers';
  18
  19     this._ui = $(L.DomUtil.create('div', 'layers-ui', this.options.uiPane))
  20       .html(JST["templates/map/layers"]());
  21
  22     var list = this._ui.find('.base-layers ul');
  23
  24     this.options.layers.forEach(function(layer) {
  25       var item = $('<li></li>')
  26         .appendTo(list);
  27
  28       if (this._map.hasLayer(layer)) {
  29         item.addClass('active');
  30       }
  31
  32       var div = $('<div></div>')
  33         .appendTo(item);
  34
  35       this._map.whenReady(function() {
  36         var map = L.map(div[0], {attributionControl: false, zoomControl: false})
  37           .setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
  38           .addLayer(new layer.constructor);
  39
  40         map.dragging.disable();
  41         map.touchZoom.disable();
  42         map.doubleClickZoom.disable();
  43         map.scrollWheelZoom.disable();
  44       }, this);
  45
  46       var label = $('<label></label>')
  47         .text(layer.options.name)
  48         .appendTo(item);
  49
  50       item.on('click', function() {
  51         this.options.layers.forEach(function(other) {
  52           if (other === layer) {
  53             this._map.addLayer(other);
  54           } else {
  55             this._map.removeLayer(other);
  56           }
  57         }, this);
  58       }.bind(this));
  59
  60       this._map.on('layeradd', function(e) {
  61         if (e.layer === layer) {
  62           item.addClass('active');
  63         }
  64       }).on('layerremove', function(e) {
  65         if (e.layer === layer) {
  66           item.removeClass('active');
  67         }
  68       });
  69     }, this);
  70
  71     $(link).on('click', $.proxy(this.toggleLayers, this));
  72   },
  73
  74   toggleLayers: function (e) {
  75     e.stopPropagation();
  76     e.preventDefault();
  77
  78     var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
  79
  80     if ($(this._ui).is(':visible')) {
  81       $(this.options.uiPane).hide();
  82       controlContainer.css({paddingRight: '0'});
  83     } else {
  84       $(this.options.uiPane).show();
  85       controlContainer.css({paddingRight: '230px'});
  86     }
  87   }
  88 });
  89
  90 L.OSM.layers = function(options) {
  91   return new L.OSM.Layers(options);
  92 };