This release made some changes to the hooks.
The original implementation used refs to hold the center and zoom, which proved unnecessary. The refs have been removed, and the api looks cleaner.
Current:
const [zoom, setZoom] = useZoom({ ref, defaultZoom: 6 })
const [center, setCenter] = useMouseEvents({
ref,
defaultCenter: { latitude: 51.4768, longitude: -0.0005 },
zoom,
})
useClick({
ref,
center,
zoom,
onClick: (coordinate: Coordinate, point: Point)
=> console.log('click', { coordinate, point }),
onDoubleClick: (coordinate: Coordinate, point: Point) => {
// Zoom in on the new coordinate.
setCenter(coordinate)
setZoom(zoom + 1)
}
})
Previous:
const [zoom, zoomRef, setZoom] = useZoom({ ref, defaultZoom: 6 })
const [center, centerRef, setCenter] = useMouseEvents({
ref,
defaultCenter: { latitude: 51.4768, longitude: -0.0005 },
zoomRef,
})
useClick({
ref,
centerRef,
zoomRef,
onClick: (coordinate: Coordinate, point: Point)
=> console.log('click', { coordinate, point }),
onDoubleClick: (coordinate: Coordinate, point: Point) => {
// Zoom in on the new coordinate.
setCenter(coordinate)
setZoom(zoom + 1)
}
})
Rob