VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-16 16:45:22 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Add a 'sortLayers' option to L.Control.Layers (#4711)

Browse Source 
* Add a 'sortLayers' option to L.Control.Layers

* Add a sortFunction option to L.Control.Layers

* Fix default sort function; modify test
This commit is contained in:
Iván Sánchez Ortega
2016-11-17 12:52:29 +01:00
committed by Per Liedman
parent 0be6ee89da
commit 4e979514c3
2 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,4 +140,87 @@ describe("Control.Layers", function () {
});
});
describe("sortLayers", function () {
beforeEach(function () {
map.setView([0, 0], 14);
});
it("keeps original order by default", function () {
var baseLayerOne = L.tileLayer('').addTo(map);
var baseLayerTwo = L.tileLayer('').addTo(map);
var markerC = L.marker([0, 2]).addTo(map);
var markerB = L.marker([0, 1]).addTo(map);
var markerA = L.marker([0, 0]).addTo(map);
var layersCtrl = L.control.layers({
'Base One': baseLayerOne,
'Base Two': baseLayerTwo
}, {
'Marker C': markerC,
'Marker B': markerB,
'Marker A': markerA
}).addTo(map);
var elems = map.getContainer().querySelectorAll('div.leaflet-control-layers label span');
expect(elems[0].innerHTML.trim()).to.be.equal('Base One');
expect(elems[1].innerHTML.trim()).to.be.equal('Base Two');
expect(elems[2].innerHTML.trim()).to.be.equal('Marker C');
expect(elems[3].innerHTML.trim()).to.be.equal('Marker B');
expect(elems[4].innerHTML.trim()).to.be.equal('Marker A');
});
it("sorts alphabetically if no function is specified", function () {
var baseLayerOne = L.tileLayer('').addTo(map);
var baseLayerTwo = L.tileLayer('').addTo(map);
var markerA = L.marker([0, 0]).addTo(map);
var markerB = L.marker([0, 1]).addTo(map);
var markerC = L.marker([0, 2]).addTo(map);
var layersCtrl = L.control.layers({
'Base Two': baseLayerTwo,
'Base One': baseLayerOne
}, {
'Marker A': markerA,
'Marker C': markerC,
'Marker B': markerB
}, {
sortLayers: true
}).addTo(map);
var elems = map.getContainer().querySelectorAll('div.leaflet-control-layers label span');
expect(elems[0].innerHTML.trim()).to.be.equal('Base One');
expect(elems[1].innerHTML.trim()).to.be.equal('Base Two');
expect(elems[2].innerHTML.trim()).to.be.equal('Marker A');
expect(elems[3].innerHTML.trim()).to.be.equal('Marker B');
expect(elems[4].innerHTML.trim()).to.be.equal('Marker C');
});
it("uses the compare function to sort layers", function () {
var baseLayerOne = L.tileLayer('', {customOption: 999}).addTo(map);
var baseLayerTwo = L.tileLayer('', {customOption: 998}).addTo(map);
var markerA = L.marker([0, 0], {customOption: 102}).addTo(map);
var markerB = L.marker([0, 1], {customOption: 100}).addTo(map);
var markerC = L.marker([0, 2], {customOption: 101}).addTo(map);
var layersCtrl = L.control.layers({
'Base One': baseLayerOne,
'Base Two': baseLayerTwo
}, {
'Marker A': markerA,
'Marker B': markerB,
'Marker C': markerC
}, {
sortLayers: true,
sortFunction: function (a, b) { return a.options.customOption - b.options.customOption; }
}).addTo(map);
var elems = map.getContainer().querySelectorAll('div.leaflet-control-layers label span');
expect(elems[0].innerHTML.trim()).to.be.equal('Base Two');
expect(elems[1].innerHTML.trim()).to.be.equal('Base One');
expect(elems[2].innerHTML.trim()).to.be.equal('Marker B');
expect(elems[3].innerHTML.trim()).to.be.equal('Marker C');
expect(elems[4].innerHTML.trim()).to.be.equal('Marker A');
});
});
});

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

@ -53,7 +53,22 @@ L.Control.Layers = L.Control.extend({
// @option hideSingleBase: Boolean = false
// If `true`, the base layers in the control will be hidden when there is only one.
hideSingleBase: false
hideSingleBase: false,
// @option sortLayers: Boolean = false
// Whether to sort the layers. When `false`, layers will keep the order
// in which they were added to the control.
sortLayers: false,
// @option sortFunction: Function = *
// A [compare function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
// that will be used for sorting the layers, when `sortLayers` is `true`.
// The function receives both the `L.Layer` instances and their names, as in
// `sortFunction(layerA, layerB, nameA, nameB)`.
// By default, it sorts layers alphabetically by their name.
sortFunction: function (layerA, layerB, nameA, nameB) {
return nameA < nameB ? -1 : (nameB < nameA ? 1 : 0);
}
},
initialize: function (baseLayers, overlays, options) {
@ -209,6 +224,12 @@ L.Control.Layers = L.Control.extend({
overlay: overlay
});
if (this.options.sortLayers) {
this._layers.sort(L.bind(function (a, b) {
return this.options.sortFunction(a.layer, b.layer, a.name, b.name);
}, this));
}
if (this.options.autoZIndex && layer.setZIndex) {
this._lastZIndex++;
layer.setZIndex(this._lastZIndex);