Skip to content Skip to main navigation Skip to footer

If you (or your organisation) benefit from Waymark, please consider supporting the continued development of the plugin through sponsorship 🙂

Using the Global 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.

Details
Route Map

This is a Map created with Waymark. A Map can have Meta associated with it, which can be displayed here.

Using the Editor you can add Markers, Lines and Shapes to the Map. Each can be given a title, description and an image which will be displayed once clicked.

The Editor can import from GPX, KML and GeoJSON formats and can detect photo location information.

Maps can be embedded in your content using the Shortcode.

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 add the Waymark Shortcode to our page:

Waymark map_id="1647"

We then need to define the callback function, waymark_loaded_callback. This 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_loaded_callback(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
	  	Waymark.reset_map_view();
  	})
	;
	
	//Add to page
	container.prepend(button);
}