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.