Creating an Interactive Overlay List
Adding custom functionality using the Callback Function.
This example adds a list of Overlays below the Map. Once clicked, the Map will navigate to that Overlay and open the Info popup.
Route Map
To achieve this, we pass the name of a JavaScript function to the Shortcode like this:
Waymark map_id="1647" loaded_callback="waymark_overlays"The callback function, in this case waymark_overlays 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:
//Our Callback Function
const waymark_overlays = (Waymark) => {
if (typeof Waymark !== "object" || typeof jQuery !== "function") {
console.error("Waymark or jQuery not loaded");
}
let overlays_content = jQuery(`<div />`).addClass("waymark-overlays");
["marker", "line", "shape"].forEach((type) => {
if (typeof Waymark[type + "_sub_groups"] === "object") {
//Get property keys
const type_keys = Object.keys(Waymark[type + "_sub_groups"]);
if (!type_keys.length) {
return false;
}
let type_content = jQuery(`<div />`)
.addClass("waymark-type")
.append(jQuery(`<strong>${type.toUpperCase()}S</strong>`));
//Iterate over property keys
type_keys.forEach((key) => {
const group = Waymark[type + "_sub_groups"][key];
if (
typeof group !== "object" ||
typeof group.getLayers !== "function"
) {
return false;
}
let group_content = jQuery(`<div />`).addClass("waymark-group");
const type_data = Waymark.get_type("marker", key);
const icon_data = Waymark.build_icon_data(type_data);
group_content.append(
jQuery("<div />").html(icon_data.html).addClass(icon_data.className),
);
//Iterate over sub groups
group.getLayers().forEach((layer) => {
if (typeof layer.feature !== "object") {
return;
}
group_content.append(
jQuery("<a />")
.attr("href", "#")
.css("display", "block")
.text(layer.feature.properties.title || "Click to view")
.on("click", (e) => {
e.preventDefault();
// Open popup
layer.openPopup();
switch (type) {
case "marker":
Waymark.map.setView(
layer.getLatLng(),
Waymark.map.getZoom(),
);
break;
case "line":
case "shape":
Waymark.map.fitBounds(layer.getBounds());
break;
}
}),
);
type_content.append(group_content);
});
overlays_content.append(type_content);
}); // End iterate
}
});
Waymark.jq_map_container.parent().append(overlays_content);
};CSS for layout:
.waymark-overlays {
display: flex;
}
.waymark-type {
margin: 15px;
}
.waymark-group {
position: relative;
padding: 15px 15px 15px 50px;
}
.waymark-marker {
position: absolute;
top: 15px;
left: 5px;
width: 32px;
height: 32px;
}
.waymark-group a {
line-height: 1.5em;
}