Skip to content Skip to main navigation Skip to footer

Enrich Popups

Details
Route Map
Collection
?
Export
About [+]
Journal Entry

This is a journal entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Details [+]
More Details

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);		}	});};