Search code examples
javascriptleafletleaflet.markercluster

Hide markers on Leaflet -or- help filtering results from json url


I am using Leaflet to display upcoming open houses on a map from data I receive by fetching JSON from an URL.

The only value I have to work with is: "ACTRIS_OpenHousePublicUpcoming":"Public: Sun Sep 5, 3:00PM-5:00PM"

I am able to convert this date to Sep 05 2021 using the following:

ophouse = ACTRIS_OpenHousePublicUpcoming;    
const [weekday,month,day,h1,h2] = ophouse.substr(8).split(/[\s,-]+/);
var d = new Date();
var n = d.getFullYear();
var openhousedate = [month,day, n].join(" ");
var formatted = openhousedate;
const javaScriptRelease = new Date(formatted);
const javaScriptRelease2 = new Date("2021/09/21");

From here I have tried to hide any marker that is in the past by hiding the .leaflet-marker-icon class. I added the console log to make sure it was working and every result does come back with the correct log (ie. in the past or upcoming).

 if (javaScriptRelease2 < javaScriptRelease) {
    console.log('open house in the future');
} else {
    console.log('open house in the past');
    $(".leaflet-marker-icon").css("dislpay", "none");
    $(".leaflet-shadow-pane").css("dislpay", "none");   
}

For some reason this is not working. A lot of markers have been hidden if I use

$(".leaflet-marker-icon").css("opacity", "0");

but there are still expired open houses appearing in the results. Also when I zoom all results appear and none are hidden.

Is there a better way to achieve hiding these markers?

Here is a JsFiddle of my complete code... it is non-working because I have to hide the api token. https://jsfiddle.net/planbjz/2aL0vbju/2/


Solution

  • Simply do not create a Leaflet Marker at all when you have an expired data point:

    if (javaScriptRelease2 < javaScriptRelease) {
        console.log('open house in the future');
        // Create a corresponding Marker
        var marker = L.marker([element.Latitude, element.Longitude]).bindPopup('my content');
        markers.addLayer(marker);
    } else {
        console.log('open house in the past');
        // Do nothing   
    }