CODEWITHSUNDEEP
jquerymapsleaflet
scuerda
scuerda

Reputation: 525

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.

Upvotes: 1

Views: 1849

Answers (2)

dnns
dnns

Reputation: 180

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

Upvotes: 1

CIRCLE
CIRCLE

Reputation: 4869

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.

Upvotes: 0

Related Questions