Skip to main content

Event Handling

MapWeave fires events in response to different events occuring on the map:

  • user interactions - for example, when the user drags a node or zooms in on the map
  • internal state changes - for example, when the map loads for the first time

You can respond to user interactions occuring on any layer. See Events and Layers for more details.

To respond to an event, attach an event handler to it. When an event fires, the event handler is passed a single object containing all the event details. You can use destructuring to find the properties you need.

To attach an event handler, use the mapweave.on() function:

function clickHandler({ id, item }) {   // if user clicked on an item
  if (item !== null) {                  // and not on the background
    console.log(id);                    // log the item id
  }
}

mapweave.on('click', clickHandler);

To detach it, use mapweave.off().

The available events and their event details are as follows:

EventPassed object
clickClickEvent object
drag-endDragEndEvent object
drag-moveDragMoveEvent object
drag-startDragStartEvent object
hoverHoverEvent object
loadNone
view-changeNone

Take a look at the Interaction examples for more details.

Events and Layers​

You can respond to user interactions occuring on any layer. See for instance the examples below:

Note that if multiple layers overlap, the top layer is always picked during user interactions.

See also the Layers docs.

Preventing Default Actions​

To prevent the default action of the drag-start event, which is to create a dragger, call the preventDefault() function in the event handler:

function preventDrag({ preventDefault }) {
  preventDefault();
}

mapweave.on('drag-start', preventDrag);