Javascript Hooks

Hook into events in the lifecycle of your map

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>