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/
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
}