Reputation: 147
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