Leaflet timeline plugin issue

Question

First of all, it should be understood that I am a complete novice to javascript and interactive maps.

I'm working on building a web map that will show a time lapse of all of the worlds nuclear detonations from the years 1945 to 1998. Simply put, there is a map and a play button with a slider next to it. When you hit play, markers will begin to be added to the map as the timeline progresses (it takes about a minute in total for the timeline to go from 1945 to 1998). Setting the timeline slider to a specific date will have the map display a marker for every nuclear detonation that had happened up to that date.

At the moment, the markers are being added to the map properly after hitting play, but my problem comes when I drag the timeline slider backwards. The map will always keep the markers of the previously set date up on the map. Clicking the play button again will continue the timeline and make duplicates of the previously added markers.

I am thinking that I might have to do some sort of if-then statement that says something like if the date = x, remove all markers past date x. Any pointers?

I'm using quite a few plugins / js-libraries. Here are the ones that show up in my script:

Leaflet - for mapping

Leaflet.timeline - timeline plugin (https://github.com/skeate/Leaflet.timeline)

Leaflet.markercluster - for clustering together blobs of markers

Moment - for formatting dates found in my dataset to be used in the timeline

jquery - for jquery stuff

And here's the actual timeline portion of my script:

function sipriReportTimeline(data){
var getInterval = function(feature) {
    return {
        start: feature.properties.date_long_moment,
        end: moment("1998-05-30"),
    };
};
var timelineControl = L.timelineSliderControl({
    formatOutput: function(date){
        return new Date(date).toLocaleDateString();
    },
    duration: 100000,
});
var timeline = L.timeline(data, {
    getInterval: getInterval,
    pointToLayer: sipriReportPointToLayer,
});
timelineControl.addTo(myMap);
timelineControl.addTimelines(timeline);
timeline.addTo(myMap);
};

Answer 1

My first guess is that something may be wrong with your dates or date formats.

You can try to format your date with:

moment(date).format("YYYY-MM-DD");

I would also make sure that your start variable feature.properties.date_long_moment returns the same format as the end variable.

Maybe you can try format them both with something like something like this:

start: feature.properties.date_long_moment.format("YYYY-MM-DD"),
end: moment("1998-05-30").format("YYYY-MM-DD")

Or another thing worth to consider is that this timeline plugin may not be able to process data with dash - chars correctly. It may be worth to trying change date format to number only, i.e.:

start: feature.properties.date_long_moment.format("YYYYMMDD"),
end: moment("1998-05-30").format("YYYYMMDD")