cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use array in L.Control.Layers to preserve layer order fixes #2086

Browse Source
This commit is contained in:
Jan Pieter Waagmeester 2016-04-02 20:48:31 +02:00 committed by Per Liedman
parent e083d41ff7
commit 0bed05d537
3 changed files with 99 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
debug/map/control-layers.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var geojson = {
"type": "Polygon",
"coordinates": [[
[5.4931640625, 51.781435604431195],
[0.9008789062499999, 53.35710874569601],
[-2.30712890625, 51.795027225829145],
[2.8125, 49.109837790524416],
[5.4931640625, 51.781435604431195]
]]
};
var map = L.map('map').setView([50.5, 0], 5);
var OSM_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var OSM_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
L.control.layers({
'OSM': OSM_Mapnik,
'OSM BW': OSM_BlackAndWhite
}, {
'Circle': L.circle([53, 4], 111111).addTo(map),
'Polygon': L.polygon([[48, -3], [50, -4], [52, 4]]),
'GeoJSON': L.geoJson(geojson),
}, {
collapsed: false
}).addTo(map);
</script>
</body>
</html>

34
spec/suites/control/Control.LayersSpec.js
View File

@ -4,6 +4,9 @@ describe("Control.Layers", function () {
beforeEach(function () { beforeEach(function () {
map = L.map(document.createElement('div')); map = L.map(document.createElement('div'));
}); });
afterEach(function () {
map.remove();
});
describe("baselayerchange event", function () { describe("baselayerchange event", function () {
beforeEach(function () { beforeEach(function () {
@ -43,7 +46,7 @@ describe("Control.Layers", function () {
map.setView([0, 0], 14); map.setView([0, 0], 14);
}); });
it("when an included layer is addded or removed", function () { it("when an included layer is added or removed from the map", function () {
var baseLayer = L.tileLayer(), var baseLayer = L.tileLayer(),
overlay = L.marker([0, 0]), overlay = L.marker([0, 0]),
layers = L.control.layers({"Base": baseLayer}, {"Overlay": overlay}).addTo(map); layers = L.control.layers({"Base": baseLayer}, {"Overlay": overlay}).addTo(map);
@ -57,6 +60,23 @@ describe("Control.Layers", function () {
expect(spy.callCount).to.eql(2); expect(spy.callCount).to.eql(2);
}); });
it("when an included layer is added or removed from the map, it's (un)checked", function () {
document.body.appendChild(map._container);
var baseLayer = L.tileLayer(),
overlay = L.marker([0, 0]),
layers = L.control.layers({"Baselayer": baseLayer}, {"Overlay": overlay}).addTo(map);
function isChecked() {
return !!(map._container.querySelector('.leaflet-control-layers-overlays input').checked);
}
expect(isChecked()).to.not.be.ok();
map.addLayer(overlay);
expect(isChecked()).to.be.ok();
map.removeLayer(overlay);
expect(isChecked()).to.not.be.ok();
});
it("not when a non-included layer is added or removed", function () { it("not when a non-included layer is added or removed", function () {
var baseLayer = L.tileLayer(), var baseLayer = L.tileLayer(),
overlay = L.marker([0, 0]), overlay = L.marker([0, 0]),
@ -69,6 +89,17 @@ describe("Control.Layers", function () {
expect(spy.called).to.not.be.ok(); expect(spy.called).to.not.be.ok();
}); });
it("updates when an included layer is removed from the control", function () {
document.body.appendChild(map._container);
var baseLayer = L.tileLayer(),
overlay = L.marker([0, 0]),
layers = L.control.layers({"Base": baseLayer}, {"Overlay": overlay}).addTo(map);
layers.removeLayer(overlay);
expect(map._container.querySelector('.leaflet-control-layers-overlays').children.length)
.to.be.equal(0);
});
}); });
describe("is removed cleanly", function () { describe("is removed cleanly", function () {
@ -84,7 +115,6 @@ describe("Control.Layers", function () {
expect(function () { expect(function () {
map.removeLayer(baseLayer); map.removeLayer(baseLayer);
}).to.not.throwException(); }).to.not.throwException();
}); });
}); });

25
src/control/Control.Layers.js
View File

@ -59,7 +59,7 @@ L.Control.Layers = L.Control.extend({
initialize: function (baseLayers, overlays, options) { initialize: function (baseLayers, overlays, options) {
L.setOptions(this, options); L.setOptions(this, options);
this._layers = {}; this._layers = [];
this._lastZIndex = 0; this._lastZIndex = 0;
this._handlingClick = false; this._handlingClick = false;
@ -109,7 +109,8 @@ L.Control.Layers = L.Control.extend({
removeLayer: function (layer) { removeLayer: function (layer) {
layer.off('add remove', this._onLayerChange, this); layer.off('add remove', this._onLayerChange, this);
delete this._layers[L.stamp(layer)]; var obj = this._getLayer(L.stamp(layer));
this._layers.splice(this._layers.indexOf(obj), 1);
return (this._map) ? this._update() : this; return (this._map) ? this._update() : this;
}, },
@ -188,16 +189,22 @@ L.Control.Layers = L.Control.extend({
container.appendChild(form); container.appendChild(form);
}, },
_getLayer: function (id) {
for (var i = 0; i <= this._layers.length; i++) {
if (L.stamp(this._layers[i].layer) === id) {
return this._layers[i];
}
}
},
_addLayer: function (layer, name, overlay) { _addLayer: function (layer, name, overlay) {
layer.on('add remove', this._onLayerChange, this); layer.on('add remove', this._onLayerChange, this);
var id = L.stamp(layer); this._layers.push({
this._layers[id] = {
layer: layer, layer: layer,
name: name, name: name,
overlay: overlay overlay: overlay
}; });
if (this.options.autoZIndex && layer.setZIndex) { if (this.options.autoZIndex && layer.setZIndex) {
this._lastZIndex++; this._lastZIndex++;
@ -237,7 +244,7 @@ L.Control.Layers = L.Control.extend({
this._update(); this._update();
} }
var obj = this._layers[L.stamp(e.target)]; var obj = this._getLayer(L.stamp(e.target));
// @namespace Map // @namespace Map
// @section Layer events // @section Layer events
@ -315,7 +322,7 @@ L.Control.Layers = L.Control.extend({
for (var i = inputs.length - 1; i >= 0; i--) { for (var i = inputs.length - 1; i >= 0; i--) {
input = inputs[i]; input = inputs[i];
layer = this._layers[input.layerId].layer; layer = this._getLayer(input.layerId).layer;
hasLayer = this._map.hasLayer(layer); hasLayer = this._map.hasLayer(layer);
if (input.checked && !hasLayer) { if (input.checked && !hasLayer) {
@ -347,7 +354,7 @@ L.Control.Layers = L.Control.extend({
for (var i = inputs.length - 1; i >= 0; i--) { for (var i = inputs.length - 1; i >= 0; i--) {
input = inputs[i]; input = inputs[i];
layer = this._layers[input.layerId].layer; layer = this._getLayer(input.layerId).layer;
input.disabled = (layer.options.minZoom !== undefined && zoom < layer.options.minZoom) || input.disabled = (layer.options.minZoom !== undefined && zoom < layer.options.minZoom) ||
(layer.options.maxZoom !== undefined && zoom > layer.options.maxZoom); (layer.options.maxZoom !== undefined && zoom > layer.options.maxZoom);