Mapbox plugin for Craft CMS

Universal Methods

The following methods apply equally, whether you are working in JavaScript, Twig, or PHP. These methods have nearly identical parameters and behaviors across all three languages.

The Magic of Chaining

Each of these methods can be chained together in any order you'd like. Chaining can be a powerful technique, allowing you to build complex maps with ease.

There are also a few language-specific methods to be aware of. In addition to the Universal Methods below, check out the extended documentation for JavaScript Methods and Twig & PHP Methods.

# markers(locations, options)

map.markers(locations, options);

Places additional markers onto the map.

Arguments

  • locations (locations) - Will be used to create additional markers for the map.
  • options (array|null) - The options parameter allows you to configure the markers in greater detail. These options will only apply to the markers created in this method call.

Available Options

Most, but not all, of these options are available across JavaScript, Twig, and PHP. Please note the few options which are not universally available.

Option Available Description
id JavaScript, Twig/PHP Reference point for each marker.
markerOptions JavaScript, Twig/PHP Accepts any Marker parameters (opens new window)
popupOptions JavaScript, Twig/PHP Accepts any Popup parameters (opens new window)
popupTemplate Twig/PHP Template path to use for creating popups.
field Twig/PHP Address field(s) to be included on the map. (includes all by default)

Additional Options Details

For more info, please consult either the JavaScript object or the Dynamic Map model.

# style(mapStyle)

map.style(mapStyle);

Arguments

  • mapStyle (string|object) - A string specifying which style to use, or a JSON object declaring the map style. Defaults to streets-v12.

For more information, see the Styling a Map guide.

# zoom(level)

map.zoom(level);

Change the map's zoom level.

Arguments

  • level (int) - The new zoom level. Must be an integer between 1 - 22.

Zoom Level Reference

  • 1 is extremely zoomed out, a view of the entire planet.
  • 22 is extremely zoomed in, as close to the ground as possible.

# center(coords)

map.center(coords);

Re-center the map.

Arguments

  • coords (coords) - New center point of map.

# fit(options)

map.fit(options);

Pan and zoom map to automatically fit all markers within the viewing area. Uses fitBounds (opens new window) internally.

Arguments

# Marker ID formula

The remaining methods all refer to a markerId value.

Formula

The default formula for a markerId is as follows:

    '[ELEMENT ID]-[FIELD HANDLE]' // eg: '101-myAddressField'

# panToMarker(markerId)

map.panToMarker(markerId);

Re-center map on the specified marker.

Arguments

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

# changeMarker(markerId, options)

map.changeMarker(markerId, options);

Changes the configuration of an existing marker. Rebuilds and replaces the existing marker object.

Arguments

# hideMarker(markerId)

map.hideMarker(markerId);

Hide a marker. The marker will not be destroyed, it will simply be detached from the map.

Arguments

  • markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.

# showMarker(markerId)

map.showMarker(markerId);

Show a marker. The marker will be re-attached to the map.

Arguments

  • markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.

# openPopup(markerId)

map.openPopup(markerId);

Open the popup of a specific marker.

Arguments

  • markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all popups.

# closePopup(markerId)

map.closePopup(markerId);

Close the popup of a specific marker.

Arguments

  • markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all popups.

← Additional JavaScript Methods →