1

I have a Leaflet point layer that uses icons. I have a different folder for individual time steps, and I would like to use a jquery ui slider to change between them. Changing the slider should change the path used to define the markers on the layer.

This is my attempt thus far:

var map = L.map('map', {
    crs: crs
});

$( "#slider-bar" ).slider({
    value: 1999,
    min: 1999,
    max: 2014,
    step: 1,
    change: function(event, ui) {
        //console.log(ui);
    }
});

var markerPointLayer = L.geoJSON(britishColumbiaPoints, {

    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'svg/1999/' + feature.properties.name + '.svg'
            })
        })
    },

    onEachFeature: function (feature, layer) {
        $( "#slider-bar" ).on("change", function(feature) {
            layer.setIcon(L.icon({
                iconUrl: 'svg/' + $( "#slider-bar" ).slider("option", "value") + '/' + feature.properties.name + '.svg'
            }))
        })
    }

}).addTo(map);

But it seems that the onEachFeature function is not detecting that the slider bar has changed.

I've also tried doing this on the slider itself:

$( "#slider-bar" ).slider({
        value: 1999,
        min: 1999,
        max: 2014,
        step: 1,
        change: function(event, ui) {
            markerPointLayer.setIcon(
                L.icon({
                    iconUrl: 'svg/' + ui.value + '/' + markerPointLayer.feature.properties.name + '.svg'
                })
            )
        }
    });

But it doesn't recognize the layer object it seems.

1

I ended up solving it myself.

First, the event for the jquery ui slider is not change, but rather slidechange. Second, I needed to define an event listener on the jquery ui slider inside the onEachFeature function like so:

var markerPointLayer = L.geoJSON(britishColumbiaPoints, {

    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'svg/1999/' + feature.properties.name + '.svg'
            })
        })
    },

    onEachFeature: function (feature, layer) {

        $( "#slider-bar" ).on("slidechange", function(e) {
            layer.setIcon(L.icon({
                iconUrl: 'svg/' + $( "#slider-bar" ).slider("option", "value") + '/' + feature.properties.name + '.svg'
            }))

        })
    }

}).addTo(map);

Now, the layer is constantly listening to the jquery ui slider and will change each feature's icon accordingly whenever it changes.

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.