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