Using JQueryUI Slider to change Layer Display (Leaflet)?

Question

Can't seem to figure out how to use JQueryUI Slider to change the layer display on my leaflet map. Scenario is basically, When user slides bar across a dfferent layer shows up on the map (in years) Below is the slider script

<script type="text/javascript">
    // set up an array to hold the years
    var years = [1111, 1112];

    var activeYear = 

    $(".slider")

        // activate the slider with options
        .slider({ 
            max: years.length-1, 
            value: activeYear 
        })       
        // add pips with the labels set to "years"
        .slider("pips", {
            rest: "label",
            labels: years
        })
        // and whenever the slider changes, change map display layer
        .on("slidechange", function(e,ui) {
             **UNSURE OF CODE HERE**
        });
</script>

My layers are listed earlier in the map script in a different div, a sample one is

var basemaps = {
oneoneoneone: L.tileLayer.wms("http://localhost:8080/geoserver/wms", {
    layers: 'map:1111',
    transparent: true,
    version: '1.1.0',
    format: 'image/png'

}),

Am i able to relate the oneoneoneone layer to the slider array value 1111 and then when slider is set on that section it will display the layer on the map?

Answer 1

As ghybs suggests in the comment above, you may find the LeafletSlider plugin useful. It has some idiosyncrasies that make it unsuitable for some uses, but if all you need to do is step through consecutive years, it should suit your purposes fine. If you pass it a L.layerGroup object with the layers you want to use, it will place a JQueryUI slider control on the map, which you can use to step through your layers. You can also add a time property (either as text or as a numeric value in seconds) to each layer, and the plugin will use this to label the slider as it is moved:

var oneoneoneone = L.tileLayer.wms("http://localhost:8080/geoserver/wms", {
  layers: 'map:1111',
  transparent: true,
  version: '1.1.0',
  format: 'image/png',
  time: '1111'
});

var oneoneonetwo = L.tileLayer.wms("http://localhost:8080/geoserver/wms", {
  layers: 'map:1112',
  transparent: true,
  version: '1.1.0',
  format: 'image/png',
  time: '1112'
});

var years = [oneoneoneone, oneoneonetwo];
layerGroup = L.layerGroup(years);
var sliderControl = L.control.sliderControl({
  layer: layerGroup,
  follow: true
});
map.addControl(sliderControl);
sliderControl.startSlider();

By default, it shows all layers up to the current slider position, but if you specify follow: true in the slider options, it will only show one layer at a time.

Here is an example using LeafletSlider with some radar data from a WMS:

http://fiddle.jshell.net/nathansnider/260hffor/