use-leaflet
Hooks for using with react-leaflet.
Example of usage: https://codesandbox.io/embed/use-leaflet-jbftf
Installation: npm i use-leaflet
API
Table of Contents
- useLeafletZoom
- useLeafletMap
- useLeafletCenter
- useLeafletBounds
- useLeafletIsMoving
- useLeafletIsZooming
- Map
useLeafletZoom
React hook for getting current zoom of react-leaflet Map.
const MyLayer = () => {
const zoom = useLeafletZoom()
return zoom > 10 ? (<GeoJSON ... />) : (<GridLayer ... />)
}
Returns number current zoom.
useLeafletMap
React hook for getting current leaflet map. Returns the same value as the map
member of the leaflet
prop when using withLeaflet HOC from react-lealfet module.
Usage:
import React from "react"
import { Map } from "react-leaflet"
import { useLeafletMap } from "use-leaflet"
const MyLeafletComponent = (props) => {
const map = useLeafletMap()
return (
<... onClick={() => map.fitBounds(turf.bbox(props.activeShape))}>
...
</...>
)
}
const App = () => (
<Map>
<MyLeafletComponent />
</Map>
)
Keep in mind, that useLeafletMap
hook will work only in components which are used within Map component, the same as withLeaflet
HOC from react-leaflet
.
Returns (Map | void) current leaflet map.
useLeafletCenter
React hook for getting current center of react-leaflet Map.
const MyComponent = () => {
const [lat, lng] = useLeafletCenter()
return ...
}
Returns [number, number] [lat, lng] of the map center.
useLeafletBounds
React hook for getting current bounds of visible area of react-leaflet Map.
const MyComponent = () => {
const [[south, west], [north, east]] = useLeafletBounds()
return ...
}
Returns [[number, number], [number, number]] [[south, west], [north, east]] for visible area.
useLeafletIsMoving
React hook to see if a user is moving the react-leaflet map.
const MyComponent = () => {
const isMoving = useLeafletIsMoving()
return ...
}
Returns boolean true if a user is moving the map.
useLeafletIsZooming
React hook to see if a user is zooming the react-leaflet map.
const MyComponent = () => {
const isZooming = useLeafletIsZooming()
return ...
}
Returns boolean true if a user is zooming the map.
Map
- See: leaflet Map type.