falke-design / leafletslider Goto Github PK

Hello, I am using your plugin. I ran my application with the JSON file installation codes that you gave in the questions I asked before.
While Slider is giving the date range, I cannot show the date of the back bar as a range. How can I solve this?

    //var data = JSON.parse(YOUR_JSON); //When your json is a String and not a Object
    var fg = L.featureGroup();
    data.forEach((g)=>{
        var group = L.featureGroup();
        var time = null;
        g.forEach((obj)=>{
            L.circleMarker([obj.lat, obj.lng],{radius: obj.radius, time: ""+obj.time}).addTo(group);
            time = ""+obj.time;
        });
        group.options.time = time;
        group.addTo(fg);
    });

    var sliderControl = L.control.sliderControl({layer: fg, timeStrLength: 10, rezoom: 6});
    mymap.addControl(sliderControl);
    sliderControl.startSlider();

This worked well for me for generating two sliders on one map - is it possible to make two different sliders for two different maps on the same page (or one slider controlling two different maps)? I couldn't get it to work for me. Both maps load with a slider, but one seems to be disabled ("Cannot read property 'parentNode' of null") after sliding the other.

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.

ello! Is there a way to display more data (markers) that share the same datetime?

It looks like it creates a "step slider" for each marker in the layerGroup. So ... to solve this, I did the following:

if (date.includes(layer.options.time)) {
            options.markers[index_temp] = layer;
        }
        else {
            options.markers[index_temp] = layer;
            date.push(layer.options.time)
            ++index_temp;
        }

I am manipulating the size of the slider if there are equal times. If the datetime exists it doesn't increase the size and if it doesn't exist it increases. And it worked!!
But now ... data that shares the same datetime is not displayed, just one marker instead of two (for example)! How can I make this work?

PS:
I have 2 layers (polygon and custom marker) with the same datetime : 04/07/2020 13:00:00, but only the polygon is displayed, I just want to displayed both at the same time.

I managed it to work with some changes to the code:

}else if(_options.sameDate){
    
    //it is actually the date that I want to isolate and compare
    var currentDate;
    if (_options.markers[ui.value].feature !== undefined) {
        
        //we have to use the user defined timeAttribute 
        currentDate = _options.markers[ui.value].feature.properties[_options.timeAttribute].substring(0,10);
        console.log('feature date : ' + currentDate);
    } else {
        
        //I don't know this case, but it should also be considered in the if statement below
        currentDate = _options.markers[ui.value].options.time.substring(0,10);
        console.log('options date : ' + currentDate);
    }
    for (i = _options.minValue; i <= _options.maxValue; i++) {
        if(_options.markers[i].feature.properties[_options.timeAttribute].substring(0,10) == currentDate){
            markers.push(_options.markers[i]);
            map.addLayer(_options.markers[i]);
        }
    }
}else{

but still we have to consider the markers on the slider to be reduced to only distinct dates.

I don't know yet if I'm going to fix this by myself later on.