Skip to content Skip to main navigation Skip to footer

Using the Waymark Callback Function

Adding a “Refresh” button to the Map.

Clicking on the “Refresh” icon located bottom right of the Map will reset the Map’s view so all Overlays on the Map are visible.

Route Map
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.

Distance (km)
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_refresh"

The callback function, in this case waymark_refresh 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
function waymark_refresh(Waymark) {
	//Get the container
  let container = jQuery('.leaflet-bottom.leaflet-right', Waymark.jq_map_container);
	//Create a button
  let button = jQuery('<div />')
  	.addClass('waymark-refresh leaflet-bar leaflet-control')
  	.html('<a title="Reset Map"><span class="ion ion-android-refresh" style="cursor:pointer;margin-top:5px;font-size:20px"></span></a>')
  	.on('click', function() {
  		//Reset view when clicked
	//Add to page