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 = 


        // activate the slider with options
            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**

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?


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

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:


  • thanks man! will help me heaps, will see how i go implementing it and get back to you! – cmca May 11 '16 at 12:54
  • So tried to get it working, and i think it is close, i even tried all of the same code/data as your jsfiddle, but for some reason the slider wont show up (the mouse even changes from the hand to the pointer when i hover over the top right section where its meant to be. The only thing i can think of is that i am importing the javascript code wrong? otherwise what else could it be? maybe a setting on my computer? – cmca May 11 '16 at 13:40
  • It's hard to say without seeing your code. Are there any errors in the debug console? – nathansnider May 11 '16 at 20:09
  • No worries, I'll try troubleshoot my code for errors and get back to you 👍 – cmca May 11 '16 at 23:53
  • Using firebug on firefox my code popped up with this exception ' TypeError: L.control.sliderControl is not a function var sliderControl = L.control.sliderControl({ ' Does that mean that my jquery script is not passing into my code correctly? – cmca May 12 '16 at 1:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.