cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layers work

Browse source
This commit is contained in:
John Firebaugh 2013-06-11 13:48:12 -07:00
parent d0ed118ee2
commit ef73cc1f57
6 changed files with 138 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

92
app/assets/javascripts/leaflet.layers.js
View file

@ -7,15 +7,66 @@ L.OSM.Layers = L.Control.extend({
return this._container;
},
_initLayout: function (map) {
_initLayout: function () {
var className = 'leaflet-control-map-ui',
container = this._container = L.DomUtil.create('div', className);
var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container);
var link = L.DomUtil.create('a', 'control-button', container);
link.innerHTML = "<span class='icon layers'></span>";
link.href = '#';
link.title = 'Layers';
this._uiPane = this.options.uiPane;
this._ui = $(L.DomUtil.create('div', 'layers-ui', this.options.uiPane))
.html(JST["templates/map/layers"]());
var list = this._ui.find('.base-layers ul');
this.options.layers.forEach(function(layer) {
var item = $('<li></li>')
.appendTo(list);
if (this._map.hasLayer(layer)) {
item.addClass('active');
}
var div = $('<div></div>')
.appendTo(item);
this._map.whenReady(function() {
var map = L.map(div[0], {attributionControl: false, zoomControl: false})
.setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
.addLayer(new layer.constructor);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
}, this);
var label = $('<label></label>')
.text(layer.options.name)
.appendTo(item);
item.on('click', function() {
this.options.layers.forEach(function(other) {
if (other === layer) {
this._map.addLayer(other);
} else {
this._map.removeLayer(other);
}
}, this);
}.bind(this));
this._map.on('layeradd', function(e) {
if (e.layer === layer) {
item.addClass('active');
}
}).on('layerremove', function(e) {
if (e.layer === layer) {
item.removeClass('active');
}
});
}, this);
$(link).on('click', $.proxy(this.toggleLayers, this));
},
@ -26,39 +77,12 @@ L.OSM.Layers = L.Control.extend({
var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
if ($(this._uiPane).is(':visible')) {
$(this._uiPane).hide();
if ($(this._ui).is(':visible')) {
$(this.options.uiPane).hide();
controlContainer.css({paddingRight: '0'});
} else {
$(this._uiPane)
.show()
.html(JST["templates/map/layers"]());
var list = $(this._uiPane).find('.base-layers ul');
var layers = this.options.layers;
for (var i = 0; i < layers.length; i++) {
var item = $('<li></li>')
.appendTo(list);
var div = $('<div></div>')
.appendTo(item);
var map = L.map(div[0], {attributionControl: false, zoomControl: false})
.setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0))
.addLayer(new layers[i].layer.constructor);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
var label = $('<label></label>')
.text(layers[i].name)
.appendTo(item);
}
controlContainer.css({paddingRight: '200px'});
$(this.options.uiPane).show();
controlContainer.css({paddingRight: '230px'});
}
}
});