Enrich Popups
Route Map
To achieve this, we pass the name of a JavaScript function to the Shortcode like this:
Waymark map_id="1647" loaded_callback="enrichPopups"The callback function, in this case enrichPopups accepts a single argument, which is the Waymark Map instance. It will be called once the Map has loaded.
Once defined on your page (accessible in the global scope), we can use the instance object to perform additional actions. In this case, we are adding a button with a click event listener:
const enrichPopups = (waymark) => {
if (typeof Waymark !== "object" || typeof jQuery !== "function") {
console.error("Waymark or jQuery not loaded");
}
waymark.map_data.eachLayer((layer) => {
if (typeof layer.toGeoJSON === "function") {
if (!layer._popup) {
return;
}
const popup = layer._popup;
const popupContent = popup._content;
const $popupContent = jQuery(popupContent);
const button = document.createElement("button");
button.textContent = "View Properties!";
button.addEventListener("click", () => {
alert(JSON.stringify(layer.feature.properties));
waymark.map.closePopup();
});
$popupContent.children("ul").append(button);
}
});
};