206 lines
5.0 KiB
JavaScript
206 lines
5.0 KiB
JavaScript
|
|
L.Control.Layers = L.Control.extend({
|
|
options: {
|
|
collapsed: true,
|
|
position: 'topright',
|
|
autoZIndex: true
|
|
},
|
|
|
|
initialize: function (baseLayers, overlays, options) {
|
|
L.Util.setOptions(this, options);
|
|
|
|
this._layers = {};
|
|
this._lastZIndex = 0;
|
|
|
|
for (var i in baseLayers) {
|
|
if (baseLayers.hasOwnProperty(i)) {
|
|
this._addLayer(baseLayers[i], i);
|
|
}
|
|
}
|
|
|
|
for (i in overlays) {
|
|
if (overlays.hasOwnProperty(i)) {
|
|
this._addLayer(overlays[i], i, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
onAdd: function (map) {
|
|
this._initLayout();
|
|
this._update();
|
|
|
|
return this._container;
|
|
},
|
|
|
|
addBaseLayer: function (layer, name) {
|
|
this._addLayer(layer, name);
|
|
this._update();
|
|
return this;
|
|
},
|
|
|
|
addOverlay: function (layer, name) {
|
|
this._addLayer(layer, name, true);
|
|
this._update();
|
|
return this;
|
|
},
|
|
|
|
removeLayer: function (layer) {
|
|
var id = L.Util.stamp(layer);
|
|
delete this._layers[id];
|
|
this._update();
|
|
return this;
|
|
},
|
|
|
|
_initLayout: function () {
|
|
var className = 'leaflet-control-layers',
|
|
container = this._container = L.DomUtil.create('div', className);
|
|
|
|
if (!L.Browser.touch) {
|
|
L.DomEvent.disableClickPropagation(container);
|
|
} else {
|
|
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
|
}
|
|
|
|
var form = this._form = L.DomUtil.create('form', className + '-list');
|
|
|
|
if (this.options.collapsed) {
|
|
L.DomEvent
|
|
.on(container, 'mouseover', this._expand, this)
|
|
.on(container, 'mouseout', this._collapse, this);
|
|
|
|
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
|
|
link.href = '#';
|
|
link.title = 'Layers';
|
|
|
|
if (L.Browser.touch) {
|
|
L.DomEvent
|
|
.on(link, 'click', L.DomEvent.stopPropagation)
|
|
.on(link, 'click', L.DomEvent.preventDefault)
|
|
.on(link, 'click', this._expand, this);
|
|
}
|
|
else {
|
|
L.DomEvent.on(link, 'focus', this._expand, this);
|
|
}
|
|
|
|
this._map.on('movestart', this._collapse, this);
|
|
// TODO keyboard accessibility
|
|
} else {
|
|
this._expand();
|
|
}
|
|
|
|
this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
|
|
this._separator = L.DomUtil.create('div', className + '-separator', form);
|
|
this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
|
|
|
|
container.appendChild(form);
|
|
},
|
|
|
|
_addLayer: function (layer, name, overlay) {
|
|
var id = L.Util.stamp(layer);
|
|
|
|
this._layers[id] = {
|
|
layer: layer,
|
|
name: name,
|
|
overlay: overlay
|
|
};
|
|
|
|
if (this.options.autoZIndex && layer.setZIndex) {
|
|
this._lastZIndex++;
|
|
layer.setZIndex(this._lastZIndex);
|
|
}
|
|
},
|
|
|
|
_update: function () {
|
|
if (!this._container) {
|
|
return;
|
|
}
|
|
|
|
this._baseLayersList.innerHTML = '';
|
|
this._overlaysList.innerHTML = '';
|
|
|
|
var baseLayersPresent = false,
|
|
overlaysPresent = false;
|
|
|
|
for (var i in this._layers) {
|
|
if (this._layers.hasOwnProperty(i)) {
|
|
var obj = this._layers[i];
|
|
this._addItem(obj);
|
|
overlaysPresent = overlaysPresent || obj.overlay;
|
|
baseLayersPresent = baseLayersPresent || !obj.overlay;
|
|
}
|
|
}
|
|
|
|
this._separator.style.display = (overlaysPresent && baseLayersPresent ? '' : 'none');
|
|
},
|
|
|
|
// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
|
|
_createRadioElement: function (name, checked) {
|
|
|
|
var radioHtml = '<input type="radio" name="' + name + '"';
|
|
if (checked) {
|
|
radioHtml += ' checked="checked"';
|
|
}
|
|
radioHtml += '/>';
|
|
|
|
var radioFragment = document.createElement('div');
|
|
radioFragment.innerHTML = radioHtml;
|
|
|
|
return radioFragment.firstChild;
|
|
},
|
|
|
|
_addItem: function (obj) {
|
|
var label = document.createElement('label'),
|
|
input,
|
|
checked = this._map.hasLayer(obj.layer);
|
|
|
|
if (obj.overlay) {
|
|
input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
input.defaultChecked = checked;
|
|
} else {
|
|
input = this._createRadioElement('leaflet-base-layers', checked);
|
|
}
|
|
|
|
input.layerId = L.Util.stamp(obj.layer);
|
|
|
|
L.DomEvent.on(input, 'click', this._onInputClick, this);
|
|
|
|
var name = document.createTextNode(' ' + obj.name);
|
|
|
|
label.appendChild(input);
|
|
label.appendChild(name);
|
|
|
|
var container = obj.overlay ? this._overlaysList : this._baseLayersList;
|
|
container.appendChild(label);
|
|
},
|
|
|
|
_onInputClick: function () {
|
|
var i, input, obj,
|
|
inputs = this._form.getElementsByTagName('input'),
|
|
inputsLen = inputs.length;
|
|
|
|
for (i = 0; i < inputsLen; i++) {
|
|
input = inputs[i];
|
|
obj = this._layers[input.layerId];
|
|
|
|
if (input.checked) {
|
|
this._map.addLayer(obj.layer, !obj.overlay);
|
|
} else {
|
|
this._map.removeLayer(obj.layer);
|
|
}
|
|
}
|
|
},
|
|
|
|
_expand: function () {
|
|
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
|
},
|
|
|
|
_collapse: function () {
|
|
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
|
}
|
|
});
|
|
|
|
L.control.layers = function (baseLayers, overlays, options) {
|
|
return new L.Control.Layers(baseLayers, overlays, options);
|
|
};
|