Mapbox plugin for Craft CMS

Additional Twig & PHP Methods

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

# tag(options = {})

Ends the map chain. Outputs a Twig\Markup object for use in a template.

{# Renders a map in the Twig template #}
{{ map.tag() }}

Same But Different

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

Regardless of whether you are using Twig or PHP, this will create a new Twig\Markup object.

If you are working in Twig, you can use curly braces to output the map directly. This produces a <div> element with a carefully constructed data-dna property.

Arguments

  • options (array) - Configuration options for the map container and its related JavaScript.
Option Type Default Description
init bool true Whether to automatically initialize the map via JavaScript.
assets bool true Whether to preload the necessary JavaScript assets.
inline bool false Whether to render JS immediately after map <div>.
callback string null JavaScript function to run after the map has loaded.
params object {} Optional query parameters for the Mapbox API URL.

The init option

Allows the map to be automatically rendered via JavaScript, after the <div> element has first been loaded onto the page via Twig. See how to disable automatic initialization...

The inline option

Enable for Sprig-loaded maps

If you are using Sprig (opens new window) (or a similar tool) for DOM manipulation, you will likely need to enable the inline option.

This puts all relevant JavaScript immediately after the map container, allowing Sprig to refresh the JavaScript each time the div is reloaded. If you leave inline disabled, all JavaScript will be injected into the footer by default, beyond the reach of Sprig.

The params option

Can be used to append query parameters to the Mapbox API URL.

Returns

  • A new Twig\Markup object. This can be output directly using Twig's curly brace syntax ({{ }}).

# getDna()

Aliased as dna property via magic method.

{% set dna = map.dna %}
{% set dna = map.getDna() %}

Returns

  • An array of data containing the complete map details. It will be used to hydrate a map's container in the DOM.

← Popups →