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

You can find the events in the map adapter props.

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:

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

To attach an event handler, include the event handler prop inside the MapWeave tag. In this case we are using onClick.

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

return (
  <MapWeave onClick={clickHandler}>
    <NetworkLayer data={networkData} />
  </MapWeave>
);

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.

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

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

const preventDrag = ({ preventDefault }) => {
  preventDefault();
};

return (
  <MapWeave onDragStart={preventDrag}>
    <NetworkLayer data={networkData} />
  </MapWeave>
);