scofx
scofx

Reputation: 147

Leaflet: bootstrap slider dynamically on the map

I added a bootstrap slider to my map like: bootstrap-slider. adding to my code then:

var rad =0;   
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
rad = sliderValue;
});

rad it is the variable that I would like to pass to the radius of the circleMarker, therefore I would need that through the slider I can dynamically enlarge and decrease the radius of the markers on the map. in the pointToLayer function I added:

  layer: {
     pointToLayer : function(featureData, latlng){

             ................       
             ................

                 if (!result.radius){                    
                    result.radius =rad;                                                                                       
                 }
                return new L.CircleMarker(latlng, result);
           }
        },

But I can only get the radius value of the marker not dynamically! How can I proceed? Thanks!

I also tried to simplify everything with:

pointToLayer : function(featureData, latlng){


            var result = L.circleMarker(latlng, {radius: rad});
                         return result;
          },

but even here the value in rad does not pass dynamically increasing or decreasing my slider. I also tried to insert simplified conditions such as:

pointToLayer : function(featureData, latlng){


                                if (rad <= "10"){
                                var result = L.circleMarker(latlng, {radius: 10});
                                return result;
                            }
                                if (rad > "10"){
                                var result = L.circleMarker(latlng, {radius: 20});
                                return result;
                            }


              },

here too the value is accepted before adding GeoJSON files, if the markers are already present they do not change as the slider changes! I also tried with an onEachFeature: function but maybe I left something out! where is that i'm wrong?

Upvotes: 1

Views: 196

Answers (0)

Related Questions