Mapbox plugin for Craft CMS

Additional JavaScript Methods

In addition to all the Universal Methods available in the API, there are a few more methods that are available exclusively in JavaScript.

# tag(options = {})

Ends the map chain. Creates a new <div> element, to be placed in the DOM as you wish.

// Inject a map into the DOM
map.tag({'parentId': 'target-parent-id'});

Same But Different

The tag method also exists in Twig & PHP, but beware that the usage is notably different.

Arguments

  • options (array) - Configuration options for the rendered dynamic map.
Option Type Default Description
parentId string null The ID of the target parent container for the newly created element.

If the parentId is provided, the new HTML element will be automatically injected into the DOM container with the specified id attribute.

// Place the HTML element automatically
map.tag({'parentId': 'target-parent-id'});

Automatic vs Manual Placement

If the parentId is specified, the new HTML element will be automatically appended to the specified parent container in the DOM.

If the parentId is omitted, the new HTML element must be manually placed into the DOM at your discretion.

Returns

  • A new <div> element which holds the fully-rendered map. If no parentId was specified, the element will still need to be manually added to the DOM.

Always returns an HTML element

The new HTML element will always be returned by the tag method, regardless of whether it was automatically injected into the DOM.

# init(mapId = null, callback = null)

Initialize a map, or a group of maps. This will be automatically run (unless disabled) for each map on the page.

Arguments

  • mapId (null|string|array) - Depending on what is specified as the mapId value, the init method can initialize one or many maps simultaneously.
  • callback (function) - The callback function will be triggered immediately after the map has finished loading.
// Initialize all maps on the page
mapbox.init();

// Pass the callback function by reference
mapbox.init('my-custom-map', myCallbackFunction);

# getMarker(markerId)

Get the Mapbox Marker (opens new window) object of the specified marker.

// Get the specified Marker object
const marker = map.getMarker(markerId);

Arguments

  • markerId (string) - The ID of the marker that you want to access.

Returns

# getPopup(markerId)

Get the Mapbox Popup (opens new window) object of the specified popup.

// Get the specified Popup object
const popup = map.getPopup(markerId);

Arguments

  • markerId (string) - The ID of the marker with the popup that you want to access.

Returns

# getZoom()

Get the current zoom level.

// Get the current zoom level of the map
const level = map.getZoom();

Returns

  • An integer between 1 - 22 representing the current zoom level.

# getCenter()

Get the center point coordinates of the map based on its current position.

// Get the current center point of the map
const coords = map.getCenter();

Returns

  • A set of coordinates representing the current map center.

# getBounds()

Get the bounds (opens new window) of the map based on its current position.

// Get the current bounds of the map
const bounds = map.getBounds();

Returns

← Additional Twig & PHP Methods →