]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.layers.js
15f114a5caa8d6711da4f37f58cd8406b3e4a380
[rails.git] / 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 };