Hooks

A "hook" in our parlance is, like in Wordpress generally, a place where you can "hang" a function that you want to run. Every hook recieves certain variables and can be registered to run on a specific map.

For example, let's say we need to resize the map in some special way after the page loads.

We'll register our hook before the map runs:

mwm.add_action('map_set', (map) => {
  // Do something with the map
  map.on('load', () => {
    map.setZoom(12);
  })
})

If you want to only target a specific map on a specific page, you can also pass the map ID (found by hovering over the map in the Maps > Maps screen, or in the URL when editing the map) to the hook function as follows:

mwm.add_action('map_set/mapster-7314', (map) => {
  // Do something with the map
  map.on('load', () => {
    map.setZoom(12);
  })
})

See below for lists of hooks as well as what data they provide. Get in touch if what you need isn't here!

General Hooks

Hook Name
Variables Passed
Description

access_token_set

After Access Token is set, if present.

data_fetched

postResponse

After all data to load map is fetched.

map_size_set

After map DOM element size is initially set.

map_library_set

mapLibrary

After map library (MapLibre, Mapbox, or Google Maps) is set.

map_set

map

After map variable is initialized.

set_interactivity

After map interactivity is enabled or disabled.

set_terrain

After map 3D terrain is enabled.

loading_icon_started

After loading icon appears.

loading_icon_done

After loading is completed.

map_resize_set

Whenever map is resized during runtime.

map_markers_set

markers

After markers are set onto map.

map_features_set

After map features set as Mapbox layers are placed onto map.

map_datalayers_set

dataLayers

After map features set as Google Maps data layers are placed onto map.

set_clustering

After map layers clustering has completed.

set_customscripts

After custom scripts are run.

set_mapstyle

After anytime the map style changes.

Controls Hooks

Hook Name
Variables Passed
Description

zoom_control_set

zoomControl

After this control is set onto the map.

geocoder_control_set

geocoderControl

After this control is set onto the map.

directions_control_set

directionsControl

After this control is set onto the map.

3d_control_set

3dControl

After this control is set onto the map.

scale_control_set

scaleControl

After this control is set onto the map.

geolocation_control_set

geolocationControl

After this control is set onto the map.

fullscreen_control_set

fullscreenControl

After this control is set onto the map.

map_type_control_set

mapTypeControl

After this control is set onto the map.

street_view_control_set

streetViewControl

After this control is set onto the map.

customSearch_control_set

customSearchControl

After this control is set onto the map.

filterDropdown_control_set

filterDropdownControl

After this control is set onto the map.

categoryFilter_control_set

categoryFilterControl

After this control is set onto the map.

list_control_set

listControl

After this control is set onto the map.

Interaction Hooks

Hook Name
Variables Passed
Description

layer_feature_clicked

clickedFeature

After a click event occurs on a layer feature.

layer_feature_hovered

hoveredFeature

After a hover event occurs on a layer feature.

popup_opened_from_layer_click

clickedPopup

After a popup is opened from a layer feature click.

popup_opened_from_layer_hover

hoveredPopup

After a popup is opened from a layer feature hover.

popup_closed_from_layer_hover

After a popup is closed from a layer feature mouseout.

external_link_opened

After a user is redirected to an external link.

marker_feature_clicked

clickedFeature

After a click event occurs on a marker feature.

marker_feature_hovered

hoveredFeature

After a hover event occurs on a marker feature.

popup_opened_from_marker_click

clickedPopup

After a popup is opened from a marker feature click.

popup_opened_from_marker_hover

hoveredPopup

After a popup is opened from a marker feature hover.

popup_closed_from_marker_hover

After a popup is closed from a marker feature mouseout.

Examples

Here are a few script examples performing different tasks that might help you build your own.

Creating a Custom Zoom Event on Click of External Element

  • Add IDs onto the elements to be clicked by looking at the Location IDs in the WP backend

  • Set the zoom level you want in the click event from jQuery

// HTML
<div>
  <p class="map-office" id="map-office-578">Mount Vernon Office</p>
  <p class="map-office" id="map-office-577">Puyallup Office</p>
</div>

// JS
<script>
let allLocations = []
mwm.add_action('data_fetched', (postResponse) => {
  allLocations = postResponse.locations;
})
mwm.add_action('map_set', (map) => {
  map.on('load', () => {
    jQuery(document).on('click', '.map-office', function() {
       let thisId = jQuery(this).attr('id').replace("map-office-", "");
       let thisLocation = allLocations.find(location => location.id === parseInt(thisId));
       map.flyTo({ center : thisLocation.data.location.coordinates, zoom : 12 });
    });
  })
})
</script>

Last updated

Was this helpful?