Web Application for display raster data on basis of time slider

Question

It May act as a duplicate question to many, but i have tried refering too all the questions related to my questions, but i am still confiused.

Below in attached my code. which i use for Web Mapping

 <div id="map">
 </div>
 <div id="nav">hello</div>
 <script type="text/javascript">
 var wmslayers = L.layerGroup();
 var latit = <?php echo $latitude ?>; // Get latitude from php variable to js variable
 var langt = <?php echo $longitude ?>; // Get longitude from php variable to js variable
 var zom = <?php echo $zooms ?>; // get zoom value from php variable to js variable
 var wmsl = <?php echo $wmslay ?>; //way to get wmy layer from php variable
 //Leaflet provider plugin to access different layers.
 var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
 thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>',
 esrilink = '<a href="http://esri.com/">ESRI MAPS</a>';
 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 osmAttrib = '&copy; ' + osmLink + ' Contributors',
 landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
 thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink,
 esriurl= 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
 esriAttrib= '&copy;'+esrilink+'Contributors';
 var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
 landMap = L.tileLayer(landUrl, {attribution: thunAttrib}),
 esriMap = L.tileLayer(esriurl, {attribution: esriAttrib});
 var map = L.map('map', {layers: [esriMap] // only add one!
 })
 .setView([latit, langt], zom);
 var baseLayers = {
 "OSM Mapnik": osmMap,
 "Landscape": landMap,
 "Street":esriMap
 };
 map.on('click', function(e) {
 alert(e.latlng);
 });
 L.control.layers(baseLayers).addTo(map);
 //ways to add wms service from geoserver to leaflet map
 wmslayers.addTo(map); 
 var wms_service = L.tileLayer.wms("http://localhost:8080/geoserver/raster/wms", 
 {
 layers: wmsl,
 format: 'image/png',
 transparent: true,
 version: '1.1.1',
 attribution: "",
 tiled:true
 });
 wmslayers.addLayer(wms_service);
 wms_service.bringToFront(); 
 // script to load geojson or kml file and also custoom icon has been assigned.
 var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, 
 clickable: false};
 L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';
 L.Control.fileLayerLoad({
 fitBounds: true,
 layerOptions: {style: style,
 pointToLayer: function (data, latlng) {
 var myIcon = L.icon({iconSize: [15, 15], iconUrl: 'img/Map-Marker-Bubble-Azure-icon.png'});
 return L.marker(latlng, {icon: myIcon });
 }},
 }).addTo(map);
 /// this adds the reverse geolocation attribute
 var osmGeocoder = new L.Control.OSMGeocoder();
 map.addControl(osmGeocoder);
 //Create the opacity controls -- 
 var higherOpacity = new L.Control.higherOpacity();
 map.addControl(higherOpacity);
 var lowerOpacity = new L.Control.lowerOpacity();
 map.addControl(lowerOpacity);
 var opacitySlider = new L.Control.opacitySlider();
 map.addControl(opacitySlider);
//Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
//You only need to call it once. 
 opacitySlider.setOpacityLayer(wms_service);
//Set initial opacity to 0.5 (Optional)
 wms_service.setOpacity(0.5);
 </script>
 </body>

With this code i am able to display data onto leaflet map with a click of a button and also able to control the opacity of that. Now I want to display different raster images coming from geoserver according to time slider, basically trying to depict Urbanization growth in city.

Any leads on how should i go about it, will be helpful

Answer 1

It seemed to me you need some kind of layer switcher. You want to switch between layers using a controller. You can implement function below on your code. Then you need to call this function everytime time slider changes.

 function switchLayer() {
 var layers = [];
 //Push all active layers to an array
 map.eachLayer(function (layer) {
 if (layer instanceof L.TileLayer)
 layers.push(layer);
 });
 layers.forEach(element => {
 if (element._url == layer1._url) {
 map.removeLayer(layer1);
 map.addLayer(layer2);
 } else if (element._url == layer2._url) {
 map.removeLayer(layer2);
 map.addLayer(layer1);
 }
 });
 }