# 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.

{% embed url="<https://www.youtube.com/watch?v=wwxYvxsknmM>" %}

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

<table><thead><tr><th>Hook Name</th><th width="150">Variables Passed</th><th>Description</th></tr></thead><tbody><tr><td>access_token_set</td><td></td><td>After Access Token is set, if present.</td></tr><tr><td>data_fetched</td><td>postResponse</td><td>After all data to load map is fetched.</td></tr><tr><td>map_size_set</td><td></td><td>After map DOM element size is initially set.</td></tr><tr><td>map_library_set</td><td>mapLibrary</td><td>After map library (MapLibre, Mapbox, or Google Maps) is set.</td></tr><tr><td>map_set</td><td>map</td><td>After map variable is initialized.</td></tr><tr><td>set_interactivity</td><td></td><td>After map interactivity is enabled or disabled.</td></tr><tr><td>set_terrain</td><td></td><td>After map 3D terrain is enabled.</td></tr><tr><td>loading_icon_started</td><td></td><td>After loading icon appears.</td></tr><tr><td>loading_icon_done</td><td></td><td>After loading is completed.</td></tr><tr><td>map_resize_set</td><td></td><td>Whenever map is resized during runtime.</td></tr><tr><td>map_markers_set</td><td>markers</td><td>After markers are set onto map.</td></tr><tr><td>map_features_set</td><td></td><td>After map features set as Mapbox layers are placed onto map.</td></tr><tr><td>map_datalayers_set</td><td>dataLayers</td><td>After map features set as Google Maps data layers are placed onto map.</td></tr><tr><td>set_clustering</td><td></td><td>After map layers clustering has completed.</td></tr><tr><td>set_customscripts</td><td></td><td>After custom scripts are run.</td></tr><tr><td>set_mapstyle</td><td></td><td>After anytime the map style changes.</td></tr></tbody></table>

### 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wpmaps-docs.mapster.me/developer/hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.