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 (map) {
  11     var className = 'leaflet-control-map-ui',
  12       container = this._container = L.DomUtil.create('div', className);
  13
  14     var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container);
  15     link.href = '#';
  16     link.title = 'Layers';
  17
  18     this._uiPane = this.options.uiPane;
  19
  20     $(link).on('click', $.proxy(this.toggleLayers, this));
  21   },
  22
  23   toggleLayers: function (e) {
  24     e.stopPropagation();
  25     e.preventDefault();
  26
  27     var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
  28
  29     if ($(this._uiPane).is(':visible')) {
  30       $(this._uiPane).hide();
  31       controlContainer.css({paddingRight: '0'});
  32     } else {
  33       $(this._uiPane)
  34         .show()
  35         .html(JST["templates/map/layers"]());
  36
  37       var list = $(this._uiPane).find('.base-layers ul');
  38
  39       var layers = this.options.layers;
  40       for (var i = 0; i < layers.length; i++) {
  41         var item = $('<li></li>')
  42           .appendTo(list);
  43
  44         var div = $('<div></div>')
  45             .appendTo(item);
  46
  47         var map = L.map(div[0], {attributionControl: false, zoomControl: false})
  48           .setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
  49           .addLayer(new layers[i].layer.constructor);
  50
  51         map.dragging.disable();
  52         map.touchZoom.disable();
  53         map.doubleClickZoom.disable();
  54         map.scrollWheelZoom.disable();
  55
  56         var label = $('<label></label>')
  57           .text(layers[i].name)
  58           .appendTo(item);
  59       }
  60
  61       controlContainer.css({paddingRight: '200px'});
  62     }
  63   }
  64 });
  65
  66 L.OSM.layers = function(options) {
  67   return new L.OSM.Layers(options);
  68 };