useMapEvent
Listen to map events from any component
Listen to map events from any component inside SphereMap.
Click, drag, or zoom the map to see events
No events yet
import { useMapEvent } from 'gistda-sphere-react';
function MapEvents() {
useMapEvent('ready', () => {
console.log('Map is ready');
});
useMapEvent('click', (location) => {
console.log('Clicked at:', location.lon, location.lat);
});
useMapEvent('zoom', () => {
console.log('Zoom changed');
});
useMapEvent('location', () => {
console.log('Map center changed');
});
useMapEvent('overlayClick', ({ overlay, location }) => {
console.log('Overlay clicked at:', location);
});
useMapEvent('rotate', (angle) => {
console.log('Rotated to:', angle);
});
return null;
}API
useMapEvent(eventName: EventName, handler: EventHandler<T>): voidListens to any Sphere event by name. The handler is automatically bound when the map is ready and unbound on unmount.
Available events
| Event Name | Data | Description |
|---|---|---|
"ready" | - | Map is ready |
"resize" | - | Map resized |
"zoom" | - | Zoom changed |
"location" | - | Center changed |
"rotate" | - | Rotation changed |
"pitch" | - | Pitch changed |
"click" | Location | Map clicked |
"doubleClick" | Location | Map double-clicked |
"mousemove" | Location | Mouse moved |
"drag" | - | Drag started |
"drop" | - | Drag ended |
"idle" | - | Map is idle |
"layerChange" | Layer | Layer added or removed |
"overlayClick" | { overlay, location } | Overlay clicked |
"overlayDrag" | Overlay | Overlay dragged |
"overlayDrop" | Overlay | Overlay dropped |
"overlayHover" | Overlay | Mouse entered overlay |
"overlayLeave" | Overlay | Mouse left overlay |
"popupClose" | Popup | Popup closed |
"routeComplete" | object[] | Route calculated |
"error" | object | Error occurred |