Chronological ordering problem

[geyerbri]

Hello (again!)

I'm having an issue with getting markers to order chronologically, when there is a mix between times set by geoJSON feature and time set by marker options. You once helped me before with getting the ordering to work on markers loaded via geoJSON, with the time attribute set via features/properties:

dwilhelm89/issues/63

You can see in my example code here (see live version at link below), some markers are added via geoJSON, and then an additional marker is added to the geoJSON set, on its own:

var dataset1 = [
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.8, 40.7]
            },
            properties: {
                title: 'Popup 1',
                description: 'Hello World!',
                time: '1992/01'
            }
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.9, 40.6]
            },
            properties: {
                title: 'Popup 2',
                description: 'Hello again, World!',
                time: '1992/06'
            }
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.95, 40.6]
            },
            properties: {
                title: 'Popup 3',
                description: 'Hello once again, World!',
                time: '1992/07'
            }
        }
    ];

    var map1 = L.map('myMap').setView([40.7,-73.9], 11);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map1);

    var optionsObject1 = {
        onEachFeature: onEachFeature
    };
    function onEachFeature (feature, layer) {
        var content = "<div style='clear: both'></div><div><h4>" + feature.properties.title + "</h4><p>" + feature.properties.time + "</p><p>" + feature.properties.description + "</p></div>";
        layer.bindPopup(content, {closeButton: true});
    }

    var group1 = L.geoJSON(dataset1, optionsObject1);
    var marker1 = L.marker([40.75,-73.85], {time: '1992/02'});
    marker1.addTo(group1);

    var sliderControl1 = L.control.sliderControl( {
        layer: group1,
        alwaysShowDate: true,
        popupContent: 'Hello World',
        popupOptions: {closeOnClick: false},
        showAllPopups: false,
        showPopups: true
    });

    map1.addControl(sliderControl1);

    sliderControl1.startSlider();

The geoJSON markers have their time set via the features list, but the individually-added marker has it set as an option. The page loads all four markers , but it puts that final individually-added marker at the end, no matter what its time attribute is.

(live at https://geyerbri.github.io/LeafletSlider/examples/popup.html. Note the date of the final marker, with a popup that only says "Hello World")

Is there any way to get markers from these mixed methods of being combined, to order themselves chronologically?

EDIT: this may be some other kind of issue, as I have tried removing the individual marker and changed the geoJSON data to not be in chronological order, but the slider isn't reordering them chronologically.

[vdewit]

Hi,

I still had a problem with the chronological order:
On the slider values were: 2020-12-16 2021-01-10 2021-01-08 2020-12-25

Therefore I had to change the code:

if(options.orderMarkers){
templayers = templayers.sort((a, b) => new Date(a.feature.properties[options.timeAttribute]).getTime() - new Date(b.feature.properties[options.timeAttribute]).getTime());

            if(options.orderDesc){
                templayers = templayers.reverse();
            }
        }

Now: 2020-12-16 2020-12-25 2021-01-08 2021-01-10

Comment: patch compare(a,b) didn't work

[vdewit]

Thanks, but that didn't work. I had to add ".getTime()"

…

On 25 January 2021 at 16:10:37 +01:00, Brian Geyer ***@***.***> wrote: @vdewit <https://github.com/vdewit> You might consider trying the fork I created, which has my fix implemented (the fix for this repo is still waiting to be considered/merged <#7>). My fork is <https://github.com/geyerbri/LeafletSlider> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AECIDGW432PJ2QVEYVVMWRLS3WCW3ANCNFSM4R2XBLBQ>.

[geyerbri]

My apologies @vdewit. I didn't follow your comment closely enough before I responded, and realized I was definitely wrong to point you to my repo (which is why I deleted my previous comment).

Yours is a separate issue that definitely needs addressing. You might consider opening it as an issue on its own.