Skip to main content

Event Handling

MapWeave fires events in response to different events occurring 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
Useful APIs:

You can respond to user interactions occurring on any layer.

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:

Useful APIs:

MapLibre on() | Mapbox on() | Standalone on()

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().

Useful APIs:

MapLibre off() | Mapbox off() | Standalone off()

Useful Examples:

Events and Layers​

You can respond to user interactions occurring on any layer. If multiple layers overlap, the top layer is always picked during user interactions. Layers are added in the order that they are created, so the first layer will be on the bottom and subsequent layers added on top of that.

Useful Examples:

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);
Useful APIs: