Skip to content Skip to main navigation Skip to footer

Shortcodes

The Waymark Shortcode allows you to embed Maps in your content.

Once created, Maps and Collections can be embedded within your content by simply adding the Shortcode.

Using the Shortcode

The Shortcode is simply a text placeholder that tells Waymark what to display.

It can be added to any content in WordPress that supports shortcodes.

For example, this Shortcode will display the Map with an ID of 1649:

Waymark map_id="1649"

This Shortcode will display the same Map, but with a different Basemap and zoom level:

Waymark map_id="1649" basemap="Satellite" map_zoom="11"

This Shortcode will display all Maps in the Collection with an ID of 27:

Waymark collection_id="27"

To display a Basemap without any data, simply provide centre coordinates and zoom level, like this:

Waymark map_centre="54.526814,-3.017289" map_zoom="16" basemap="Satellite"

Shortcode Parameters

The Shortcode can be passed the following parameters.

Parameter Value Description
map_id Map ID Display a single Map. You can create Maps (and obtain Map IDs) in WP Admin > Waymark > Maps.
collection_id Collection ID Display all Maps in a Collection. You can create Collections (and obtain Collection IDs) in WP Admin > Waymark > Collections.
map_centre Latitude,Longitude The initial centre coordinates of the Map. By default Waymark centres the Map so all Data is visible.
map_zoom 0-18 The initial zoom of the Map. By default Waymark zooms the Map so all Data is visible.
basemap Basemap Name Which Basemap to display when the Map first loads (instead of the default). The value must match a Basemap Name listed in Waymark Settings > Maps > Basemaps.
map_height Number of pixels Specify the desired height of the Map. The default can be changed in Waymark Settings > Maps > Misc.
map_width Number of pixels Specify the desired width of the Map.
shortcode_header 0 or 1 Whether to display the Shortcode Header (if Meta exists for the Map). The default can be changed in Waymark Settings > Maps > Shortcodes
show_gallery 0 or 1 Whether to display an image gallery for Markers that have images associated with them. The default can be changed in Waymark Settings > Maps > Misc.
show_filter 0 or 1 Whether to display the Overlay Filter. This enables visitors to filter for which Markers, Lines and Shapes are currently visible on the Map. The default can be changed in Waymark Settings > Maps > Misc.
show_cluster 0 or 1 Whether to cluster (stack) Markers that are close together. The default can be changed in Waymark Settings > Maps > Clustering
show_elevation 0 or 1 Display an interactive elevation profile graph below the Map for Lines that have elevation data. The default can be changed in Waymark Settings > Elevation
map_hash Alpha-numeric text By default, Waymark adds a unique ID to the Shortcode HTML container like this: waymark-shortcode-23a60b. When you provide a Map Hash the ID will become: waymark-shortcode-maphash. This can be useful if you are adding multiple occurrences of the same Waymark Shortcode on a single page which will cause a “Map container is already initialized.” error.
max_zoom 1-18 Providing a maximum zoom level will prevent the Map from being zoomed in further than this.
elevation_units metric or imperial This will override the Waymark > Elevation > Elevation Units option.

Show/Hide Types Initially

Individual Overlay Types can now be Shown/Hidden initially using the Shortcode, overriding the “Show Initially” Setting for each. Use the hide_marker, show_marker, hide_line, show_line, hide_shape, show_shape Shortcode parameters, providing one or multiple (comma separated) Type Keys. For example:

Waymark map_id="1234" hide_marker="photo,alert" show_line="green"

Shortcode Markers

Markers can be displayed using the Shortcode, without the need for a Map to be created.

To display a Marker, pass your preferences to the Shortcode like this:

Waymark marker_centre="54.526814,-3.017289" marker_type="shelter" marker_title="Emergency Shelter" marker_description="Built in 1590 as a shelter for shepherds and their trusty dogs." marker_image="https://www.waymark.dev/wp-content/uploads/2019/11/UNADJUSTEDNONRAW_thumb_6458-1024x768.jpg"
ParameterValueDescription
marker_centreLatitude,LongitudeThe centre coordinates of the Marker to be displayed.
marker_typeType NameThe type of Marker to display, must match a valid Type Key (e.g. “photo”)
marker_titleTextThe Title to display when the Marker is clicked.
marker_descriptionTextThe Description to display when the Marker is clicked.
marker_imageImage URLAn Image URL to display when the Marker is clicked.

Shortcode Files

Files (GPX, KML & GeoJSON) can be displayed using the Shortcode, without the need for a Map to be created.

To display a File, pass the URL to the Shortcode like this:

Waymark file_url="https://www.waymark.dev/assets/geo/track-ele-only.gpx"

By default, all Overlays (Markers/Lines/Shapes) will be displayed using the default Type (i.e. the first listed in Settings). You can specify a different Type to use like this:

Waymark file_url="https://www.waymark.dev/assets/geo/track-elevation-marker.gpx" file_line_type="red" file_marker_type="alert"

You can automatically add a Marker of the specified type to the start and/or end of ALL Lines in the file using the file_start_type and file_end_type parameters:

Waymark file_url="https://www.waymark.dev/assets/geo/track-ele-only.gpx" file_start_type="start" file_end_type="finish"

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.

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
	  	Waymark.reset_map_view();
  	})
	;
	
	//Add to page
	container.prepend(button);
}