Cambiar la ruta de la carpeta que almacena los iconos para la capa de Leaflet

Question

Tengo una capa de puntos de Leaflet que utiliza iconos. Tengo una carpeta diferente para los pasos de tiempo individuales, y me gustaría utilizar un deslizador jquery ui para cambiar entre ellos. Cambiar el deslizador debe cambiar la ruta utilizada para definir los marcadores en la capa.

Este es mi intento hasta ahora:

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);

Pero parece que la función onEachFeature no detecta que la barra deslizante ha cambiado.

También he probado a hacerlo en el propio deslizador:

$( "#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'
                })
            )
        }
    });

Pero parece que no reconoce el objeto de capa.

Answer 1

Acabé resolviéndolo yo mismo.

En primer lugar, el evento para el jquery ui slider no es change sino que slidechange . En segundo lugar, necesitaba definir un oyente de eventos en el jquery ui slider dentro de la función onEachFeature así:

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);

Ahora, la capa está constantemente escuchando al jquery ui slider y cambiará el icono de cada característica en consecuencia cada vez que cambie.