https://www.saint-martin-de-londres.fr/openinfoliveRessources/java…/SelectLayersControl/src/SelectLayers.js

1/**
2 * Created: vogdb Date: 4/30/13 Time: 6:07 PM
3 */
4
5L.Control.SelectLayers = L.Control.ActiveLayers.extend({
6
7  _initLayout: function () {
8    var className = 'leaflet-control-layers'
9    var container = this._container = L.DomUtil.create('div', className)
10
11    L.DomEvent.disableClickPropagation(container)
12    if (!L.Browser.touch) {
13      L.DomEvent.on(container, 'mousewheel', L.DomEvent.stopPropagation)
14    } else {
15      L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation)
16    }
17
18    var form = this._form = L.DomUtil.create('form', className + '-list')
19
20    if (this.options.collapsed) {
21      var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container)
22      link.href = '#'
23      link.title = 'Layers'
24
25      if (L.Browser.touch) {
26        L.DomEvent
27          .on(link, 'click', L.DomEvent.stopPropagation)
28          .on(link, 'click', L.DomEvent.preventDefault)
29          .on(link, 'click', this._expand, this)
30      } else {
31        L.DomEvent
32          .on(container, 'mouseover', this._expand, this)
33          .on(container, 'mouseout', this._collapse, this)
34        L.DomEvent.on(link, 'focus', this._expand, this)
35      }
36
37      this._map.on('movestart', this._collapse, this)
38    } else {
39      this._expand()
40    }
41
42    this._baseLayersList = L.DomUtil.create('select', className + '-base', form)
43    L.DomEvent.on(this._baseLayersList, 'change', this._onBaseLayerOptionChange, this)
44
45    this._separator = L.DomUtil.create('div', className + '-separator', form)
46
47    this._overlaysList = L.DomUtil.create('select', className + '-overlays', form)
48    this._overlaysList.setAttribute('multiple', true)
49    //extend across the width of the container
50    this._overlaysList.style.width = '100%'
51    L.DomEvent.on(this._overlaysList, 'change', this._onOverlayLayerOptionChange, this)
52
53    container.appendChild(form)
54  }
55
56  ,_onBaseLayerOptionChange: function () {
57    var selectedLayerIndex = this._baseLayersList.selectedIndex
58    var selectedLayerOption = this._baseLayersList.options[selectedLayerIndex]
59    var selectedLayer = this._layers[selectedLayerOption.layerId]
60
61    this._changeBaseLayer(selectedLayer)
62  }
63
64  ,_changeBaseLayer: function (layerObj) {
65    this._handlingClick = true
66
67    this._map.addLayer(layerObj.layer)
68    this._map.removeLayer(this._activeBaseLayer.layer)
69    this._map.setZoom(this._map.getZoom())
70    this._map.fire('baselayerchange', {layer: layerObj.layer})
71    this._activeBaseLayer = layerObj
72
73    this._handlingClick = false
74  }
75
76  ,_onOverlayLayerOptionChange: function (e) {
77    //Note. Don't try to implement this function through .selectedIndex
78    //or delegation of click event. These methods have bunch of issues on Android devices.
79    this._handlingClick = true
80
81    var options = this._overlaysList.options
82    for (var i = 0; i < options.length; i++) {
83      var option = options[i]
84      var layer = this._layers[option.layerId].layer
85      if (option.selected) {
86        if (!this._map.hasLayer(layer)) {
87          this._map.addLayer(layer)
88        }
89      } else {
90        if (this._map.hasLayer(layer)) {
91          this._map.removeLayer(layer)
92        }
93      }
94    }
95
96    this._handlingClick = false
97  }
98
99  ,_addItem: function (obj) {
100    var option = this._createOptionElement(obj)
101    if (obj.overlay) {
102      this._overlaysList.appendChild(option)
103    } else {
104      this._baseLayersList.appendChild(option)
105    }
106  }
107
108  ,_createOptionElement: function (obj) {
109    var option = document.createElement('option')
110    option.layerId = L.stamp(obj.layer)
111    option.innerHTML = obj.name
112    if (this._map.hasLayer(obj.layer)) {
113      option.setAttribute('selected', true)
114    }
115    return option
116  }
117
118  ,_collapse: function (e) {
119    if (e.target === this._container) {
120      L.Control.Layers.prototype._collapse.apply(this, arguments)
121    }
122  }
123
124})
125
126L.control.selectLayers = function (baseLayers, overlays, options) {
127  return new L.Control.SelectLayers(baseLayers, overlays, options)
128}