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 = 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:
const MyLeafletComponent = { const map = return <... onClick= map> ... </...> } 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 = 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 = 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 = 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 = return ...}
Returns boolean true if a user is zooming the map.
Map
- See: leaflet Map type.