[BUILD]

dist/ol-ext.js

@@ -1,7 +1,7 @@
 /**
  * ol-ext - A set of cool extensions for OpenLayers (ol) in node modules structure
  * @description ol3,openlayers,popup,menu,symbol,renderer,filter,canvas,interaction,split,statistic,charts,pie,LayerSwitcher,toolbar,animation
- * @version v3.2.8
+ * @version v3.2.9
  * @author Jean-Marc Viglino
  * @see https://github.com/Viglino/ol-ext#,
  * @license BSD-3-Clause
@@ -4596,12 +4596,13 @@ ol.control.LayerSwitcher = function(options) {
       parent: element
     });
     this.button.addEventListener('touchstart', function(e){
+      element.classList.toggle('ol-forceopen');
       element.classList.toggle('ol-collapsed');
       self.dispatchEvent({ type: 'toggle', collapsed: element.classList.contains('ol-collapsed') });
       e.preventDefault(); 
       self.overflow();
     });
-    this.button.addEventListener('click', function(){
+    this.button.addEventListener('click', function() {
       element.classList.toggle('ol-forceopen');
       element.classList.add('ol-collapsed'); 
       self.dispatchEvent({ type: 'toggle', collapsed: !element.classList.contains('ol-forceopen') });
@@ -8095,12 +8096,14 @@ ol.control.GridReference.prototype._draw = function (e) {
  * @fires collapse
  * @param {Object=} options Control options.
  *	@param {String} options.className class of the control
- *	@param {ol.source.Vector} options.source a vector source that contains the images
- *	@param {function} options.getImage a function that gets a feature and return the image url, default return the img propertie
+ *	@param {Array<ol.source.Vector>|ol.source.Vector} options.source vector sources that contains the images
+ *	@param {Array<ol.layer.Vector>} options.layers A list of layers to display images. If no source and no layers, all visible layers will be considered.
+ *	@param {function} options.getImage a function that gets a feature and return the image url or false if no image to Show, default return the img propertie
  *	@param {function} options.getTitle a function that gets a feature and return the title, default return an empty string
  *	@param {boolean} options.collapsed the line is collapse, default false
  *	@param {boolean} options.collapsible the line is collapsible, default false
  *	@param {number} options.maxFeatures the maximum image element in the line, default 100
+ *	@param {number} options.useExtent only show feature in the current extent
  *	@param {boolean} options.hover select image on hover, default false
  *	@param {string|boolean} options.linkColor link color or false if no link, default false
  */
@@ -8120,7 +8123,10 @@ ol.control.Imageline = function(options) {
     });
   }
   // Source 
-  this._source = options.source;
+  if (options.source) this._sources = options.source.forEach ? options.source : [options.source];
+  if (options.layers) {
+    this.setLayers(options.layers);
+  }
   // Initialize
   ol.control.Control.call(this, {
     element: element,
@@ -8154,15 +8160,37 @@ ol.control.Imageline.prototype.setMap = function (map) {
   }
 	this._listener = null;
 	ol.control.Control.prototype.setMap.call(this, map);
-	if (map) {	
+  if (map) {	
     this._listener = [
       map.on('postcompose', this._drawLink.bind(this)),
       map.on('moveend', function() { 
         if (this.get('useExtent')) this.refresh();
       }.bind(this))
     ]
+    this.refresh();
 	}
 };
+/** Set layers to use in the control
+ * @param {Array<ol.Layer} layers
+ */
+ol.control.Imageline.prototype.setLayers = function (layers) {
+  this._sources = this._getSources(layers);
+};
+/** Get source from a set of layers
+ * @param {Array<ol.Layer} layers
+ * @returns {Array<ol.source.Vector}
+ * @private
+ */
+ol.control.Imageline.prototype._getSources = function (layers) {
+  var sources = [];
+  layers.forEach(function(l) {
+    if (l.getVisible()) {
+      if (l.getSource() && l.getSource().getFeatures) sources.push(l.getSource());
+      else if (l.getLayers) this._getSources(l.getLayers());
+    }
+  }.bind(this));
+  return sources;
+};
 /** Set useExtent param and refresh the line
  * @param {boolean} b
  */
@@ -8220,12 +8248,20 @@ ol.control.Imageline.prototype._getTitle = function(/* f */) {
  */
 ol.control.Imageline.prototype.getFeatures = function() {
   var map = this.getMap();
-  if (!this.get('useExtent') || !map) {
-    return this._source.getFeatures();
-  } else {
-    var extent = map.getView().calculateExtent(map.getSize());
-    return this._source.getFeaturesInExtent(extent);
-  }
+  if (!map) return [];
+  var features = [];
+  var sources = this._sources || this._getSources(map.getLayers());
+  sources.forEach(function(s) {
+    if (features.length < this.get('maxFeatures')) {
+      if (!this.get('useExtent') || !map) {
+        features.push(s.getFeatures());
+      } else {
+        var extent = map.getView().calculateExtent(map.getSize());
+        features.push(s.getFeaturesInExtent(extent));
+      }
+    }
+  }.bind(this))
+  return features;
 };
 /** Set element scrolling with a acceleration effect on desktop
  * (on mobile it uses the scroll of the browser)
@@ -8247,7 +8283,7 @@ ol.control.Imageline.prototype._setScrolling = function() {
  */
 ol.control.Imageline.prototype.refresh = function() {
   this._scrolldiv.innerHTML = '';
-  var features = this.getFeatures();
+  var allFeatures = this.getFeatures();
   var current = this._select ? this._select.feature : null;
   if (this._select) this._select.elt = null;
   this._iline = [];
@@ -8314,10 +8350,12 @@ ol.control.Imageline.prototype.refresh = function() {
   }.bind(this);
   // Add images 
   var nb = this.get('maxFeatures');
-  for (var i=0, f; f=features[i]; i++) {
-    if (nb--<0) break;
-    addImage(f);
-  }
+  allFeatures.forEach(function(features) {
+    for (var i=0, f; f=features[i]; i++) {
+      if (nb-- < 0) break;
+      addImage(f);
+    }
+  }.bind(this));
   // Add the selected one
   if (this._select && this._select.feature && !this._select.elt) {
     addImage(this._select.feature);