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.

Details

Route Map

Collection

Demo Collection

?

Export

GPX KML GeoJSON

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

Date

20/12/1879

Distance (km)

89

More Details

The information displayed here can be configured in Waymark > Settings > Meta.

More Details

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