Using a jquery slider to display leaflet circle markers?

[EDIT] I've modified this question to reflect the current status of my problem.

I'm working on visualizing some spatial data that varies over time. I'm using Leaflet and I have the data in a GeoJSON. I'd like to have my map include a slider that enables the user to dynamically display markers based on time.

[EDIT] I've tried to work with this implementation. However, this only displays standard Leaflet markers and I need to be able to display circle markers that can be dynamically styled based on properties specified within the geojson.

Styling the geojson and converting to leaflet circle markers works as expected using the following code:

var geojson = L.geoJson(data, {
style: myStyle,
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng)
}   
})

With myStyle and onEachFeature handling the conversion to L.circleMarker and generating tooltips.

However, the issue I'm now dealing with is that the resulting slider adds each feature one at a time rather than as a group. Currently I have a geojson with approx. 600 features and 4 distinct time points (e.g. subgroups of 150 features that each have the same time stamp). What I want is for each group of 150 to be added simultaneously. Currently the slider iterates over each feature in the geojson and adds them one at a time.

Here is the code for the slider from Dennis Wilhelm's LeafletSlider that I am using:

startSlider: function () {
        options = this.options;
        $("#leaflet-slider").slider({
            value: options.minValue + 1,
            min: options.minValue,
            max: options.maxValue +1,
            step: 1,
            slide: function (e, ui) {
                if(!!options.markers[ui.value]) {
                if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 16));

                for (var i = options.minValue; i < ui.value ; i++) {
                    if(options.markers[i]) map.addLayer(options.markers[i]);
                }
                for (var i = ui.value; i <= options.maxValue; i++) {
                    if(options.markers[i]) map.removeLayer(options.markers[i]);
                }
            }
        }
    });
    map.addLayer(options.markers[options.minValue]);
}

What is unclear to me is if I need to modify this slider function to place these features in a feature group and if so, how to do so. I'm relatively new to javascript, so if someone can point me to some useful starting points, I would be most appreciative.

Answers


It's nice to see that someone is actually using my Slider. Sadly, I only found out about this question now. However, if this question is still unsolved, maybe this can help:

It is possible to define a number of steps which will be performed at once. So if you know the number of features you want to show when dragging the slider one step further, you can simplydefine this number within the slider properties.

E.g.

startSlider: function () {
    options = this.options;
    $("#leaflet-slider").slider({
        value: options.minValue + 1,
        min: options.minValue,
        max: options.maxValue +1,
        step: 500,
        slide: function (e, ui) {
            if(!!options.markers[ui.value]) {
            if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 16));

            for (var i = options.minValue; i < ui.value ; i++) {
                if(options.markers[i]) map.addLayer(options.markers[i]);
            }
            for (var i = ui.value; i <= options.maxValue; i++) {
                if(options.markers[i]) map.removeLayer(options.markers[i]);
            }
        }
    }
});
map.addLayer(options.markers[options.minValue]);
}

Add this to your html file:

<script type="text/javascript">  
$(document).ready( function () {
var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);
});
</script>

And change to coordinates with your GeoJSON data.


Need Your Help

Why doesn't tomcat see certain folders?

java tomcat servlets web browser

In my tomcat webapps directory I have various projects with servlets in them ..

How to get number of pixels equals to a radius of Geozone circle according to zoom level? OR Radius of zone circle to screen pixels?

android google-maps google-maps-api-3 geometry android-geofence

I am creating Geozones on google map. Default Circle that map API provides is laggy when scroll the map. So, I wanted to create my own circle (overlay on map). I created circle with radius of 300 m...