MapWeave fires events in response to actions 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.
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 select the properties you need.
To attach an event handler, use the mapweave.on() function:
function clickHandler({ id, item }) {
// if the 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 on the MapWeave component. In this case we are using onClick.
const clickHandler = ({ id, item }) => {
// if the 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 sits at the bottom and each subsequent layer is placed on top of that.
Preventing Default Actions
The default action of the drag-start event is to create a dragger. To prevent it, call preventDefault() inside the event handler:
function preventDrag({ preventDefault }) {
preventDefault();
}
mapweave.on('drag-start', preventDrag);The default action of the onDragStart event is to create a dragger. To prevent it, call preventDefault() inside the event handler:
const preventDrag = ({ preventDefault }) => {
preventDefault();
};
return (
<MapWeave onDragStart={preventDrag}>
<NetworkLayer data={networkData} />
</MapWeave>
);