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 and not on the background
  if (item !== null) {
    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:

Event	Passed object
click	ClickEvent object
drag-end	DragEndEvent object
drag-move	DragMoveEvent object
drag-start	DragStartEvent object
hover	HoverEvent object
load	None
view-change	ViewChangeEvent object

Take a look at the Interactions examples for more details.

Events and Layers

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

• Highlight a Node - Interaction with the network layer
• Highlight a Trajectory - Interaction with the observations layer
• Filter a Network - Interaction with the GeoJSON layer

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);