WMS layer with slider control.

[viglino]

WMS layer with slider control.

[Viglino]

Hi,
This example shows how to use a range input to display layers one by one: https://codepen.io/viglino/pen/Rxwoae
You just have to match the range with time values.
@+

[Viglino]

Hi,
Here is a working example: https://codepen.io/viglino/pen/zpqVEr
The layers are stored in the display array by range. Layers are displayed depending on the range chosen on the input range.
@+

[growe19]

I would also be interested in knowing how to achieve this. I have three layers with different dates that they were captured by drone and would be great on a timeline slider.

[sharseema]

Thanks a lot Viglino.

[sharseema]

Hi ,
I tried the opacity slider example for three layers,its working awesome,but i have 3-4 arrays and inside of each array 3-4 layers are there and also base layers.I am trying to add new array and create new opacity slider for that array and also trying to add base map but nothing is working,only one array is working.

$(".info input").on('input change', function(){
  
  var len=layers.length;
  for (var i=0; i<len; i++){ 
     if(i<=4)
     {
      var opacity, n = $(this).val();
    opacity = (i==n ? 1 : 0);
    if (layers[i].getOpacity() != opacity) {
      layers[i].setOpacity(opacity);
      if (opacity==1) {
        $(".info span").text(layers[i].get('name'));
      }
    }
  }else 
  {
    var opacity1, n1 = $(this).val();
     opacity1 = (i==n1 ? 1 : 0);
    if (layers[i].getOpacity() != opacity1) {
      layers[i].setOpacity(opacity1);
      if (opacity1==1) {
        $(".info1 span").text(layers[i].get('name'));
      }
    }
  }
  }
}).change();

I did little bit modification in your code only.

[Viglino]

The example only show how to connect a slider with a list of layers (1 is layer 1, 2 is layer 2, etc.)
If you want an other behaviour you have to create rules to check which layer have to be displayed (or not).

// Create a display list object
var displayList = [
  { display: [layer1, layer2], hidden:[layer3, layer4] },
  { display:[layer2], hidden:[layer1, layer3, layer4] },
  { display:[layer3], hidden:[layer1, layer2, layer4] },
  { display:[layer3, layer4], hidden:[layer1, layer2 },
  etc.
];
// On input change set the visibility of the layers
$(".info input").on('input change', function(){
  var t = displayList[$(this).val()];
  var len=t.length;
  // Show layers
  for (var i=0; i<t.display.length; i++) t.display[i].setVisible(true);
  // Hide layers
  for (var i=0; i<t.hidden.length; i++) t.hidden[i].setVisible(false);
}).change();

[sharseema]

Hi,
I tried given code, array also working, but when it going to var map then gives error.

var  water= new ol.layer.Tile({ name:'watercolor', opacity:0, source: new ol.source.Stamen({ layer: 'watercolor' }) });

var toner=new ol.layer.Tile({ name:'toner', opacity:0, source: new ol.source.Stamen({ layer: 'toner' }) });

  var terran=new ol.layer.Tile({ name:'terrain', opacity:0, source: new ol.source.Stamen({ layer: 'terrain' }) });
  
  var osm=new ol.layer.Tile({name:'OSM',opacity:0,source:new ol.source.OSM()});

  var display=[];
  var hidden=[];
var layers=[{
	display:[water,toner],hidden:[terran,osm]
		}];
var map = new ol.Map({
	layers:[layers],
	target: 'map',
	view: new ol.View({
center: ol.proj.transform([73.30000, 18.99910], 'EPSG:3857', 'EPSG:4326'),
zoom:9.6,

	})

Error:
Uncaught TypeError: a.addEventListener is not a function
at B (ol.js:16)
at yh.k.Wk (ol.js:144)
at yh.b (ol.js:15)
at yh.Na.b (ol.js:18)
at Va (ol.js:20)
at yh.k.set (ol.js:20)
at yh.k.yh (ol.js:145)
at new yh (ol.js:143)
at Km (ol.js:396)
at new I (ol.js:378)
(anonymous) @ slider1.html:82

Is there,i did any mistake in code.
Thanks.

[sharseema]

Hi,
Thanks a lot Viglino , your code is working like charm . Now i have only one problem is that base layer is not getting.I tried to add Open-layers 3-Switcher plugin , map.addLayer(layer name) , also added base layer in array itself. After adding base layer to array , Base map overlap on the overlay layers.Other things are working properly. please check below code:

var layers=[osm,n_92,n_2000,n_13,r_96,r_2000,r_10];
     var display=[  [n_92] , [n_2000] ,  [n_13]   ];
    var hidden=[  [r_96] , [r_2000] ,   [r_10]  ];
var map = new ol.Map({
        target: 'map',
	view: new ol.View({
        center: ol.proj.transform([85.5639,22.6726], 'EPSG:4326', 'EPSG:3857'),
	 zoom:5,
	minZoom:3,
	maxZoom: 70
        }),
			 layers:osm,layers,
    });
map.addControl(scaleLineControl);
//map.addLayer(osm);
$(".info input").on('input change', function(){
var t = display[$("#dmsp").val()];
   var h = hidden[$("#rad").val()];
var c1=$('#ck');
var c2=$('#ck1');
  for (var i=0; i<layers.length; i++) { 
    layers[i].setVisible(false);
  }  
var names = "";
  // Show layers
  for (var i=0; i<t.length; i++) {
   if(c1.is(':checked'))
{
    names += (names?"+":"")+t[i].get('name')
    t[i].setVisible(true);
  }
  else
  {
          t[i].setVisible(false);
  }
}
  $(".info span").text(names);
var hnames="";
    for (var i=0; i<h.length; i++) {
      if(c2.is(':checked'))
{
     hnames += (hnames?"+":"")+h[i].get('name')
    h[i].setVisible(true);
  }
  else
  {
     h[i].setVisible(false);
  }
} $(".info h5").text(hnames);
  }).change();

where i add base layer,Thanks.

[sharseema]

Hi Viglino,
I added base layer to 0th index and started i th value from 1:

var layers=[osm,n_92,n_2000,n_13,r_96,r_2000,r_10];
for (var i=1; i<layers.length; i++) { 
}

So above code is working.
All the problems are resolved,your code working nice .Thanks a lot.