react-leaflet-select-area

A React component for selecting custom areas on a Leaflet map. It supports desktop shortcut selection and an explicit selection mode for touch and mobile users.

• npm: npmjs.com/package/react-leaflet-select-area
• source: github.com/nirajmohanrana/react-leaflet-select-area
• docs: react-leaflet-select-area.vercel.app

Table of Contents

• Installation
• Usage
• API
• Contributing
• License

Installation

You can install react-leaflet-select-area via npm:

npm install react-leaflet-select-area leaflet react react-dom react-leaflet

Or with yarn:

yarn add react-leaflet-select-area

Usage

Below is a basic example of how to use react-leaflet-select-area in a React project with Leaflet.

Built-in Control

import { MapContainer, TileLayer } from 'react-leaflet';
import { SelectArea } from 'react-leaflet-select-area';
import 'leaflet/dist/leaflet.css';

const MyMap = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <SelectArea
        keepRectangle
        showControl
        onBoundsChange={(bounds) => {
          console.log('Selected area:', bounds);
        }}
      />
    </MapContainer>
  );
};

export default MyMap;

Desktop users can still hold Ctrl and drag on the map. Touch and mobile users can tap the built-in control, drag once to select, and the map will return to normal pan mode automatically.

External Button

import { MapContainer, TileLayer } from 'react-leaflet';
import { SelectArea, useSelectArea } from 'react-leaflet-select-area';
import 'leaflet/dist/leaflet.css';

const MyMap = () => {
  const selectArea = useSelectArea();

  return (
    <>
      <button type="button" onClick={selectArea.toggleSelectionMode}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" />
          <path d="M5 3a2 2 0 0 0-2 2" />
          <path d="M19 3a2 2 0 0 1 2 2" />
          <path d="M5 21a2 2 0 0 1-2-2" />
          <path d="M9 3h1" />
          <path d="M9 21h2" />
          <path d="M14 3h1" />
          <path d="M3 9v1" />
          <path d="M21 9v2" />
          <path d="M3 14v1" />
        </svg>
        Select area
      </button>

      <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        />
        <SelectArea controller={selectArea} keepRectangle />
      </MapContainer>
    </>
  );
};

Props

• onBoundsChange: A callback function that gets triggered when the selected area changes.
• options: Leaflet path styling for the selection rectangle.
• keepRectangle: Keeps the completed rectangle visible after selection.
• showControl: Renders a Leaflet-style select-area control inside the map.
• controlPosition: Sets the built-in control position.
• controller: Allows an external button or app state to drive selection mode.

API

SelectArea

The SelectArea component allows users to select a rectangular area on the map.

Props

| Prop | Type | Description | |----------|----------|-----------------------------------------------------| | onBoundsChange | (bounds: SelectAreaBounds \| null) => void | Called when the persisted selection changes, including when it is cleared. | | options | PathOptions | Leaflet path styling for the selection rectangle. | | keepRectangle | boolean | Keeps the completed rectangle visible. | | showControl | boolean | Shows the built-in Leaflet-style select button. | | controlPosition | ControlPosition | Placement for the built-in control. | | controller | SelectAreaController | Shared controller for custom external controls. |

useSelectArea

The hook returns shared selection state and actions for custom controls.

const selectArea = useSelectArea();

selectArea.enterSelectionMode();
selectArea.exitSelectionMode();
selectArea.toggleSelectionMode();
selectArea.clearSelection();

Docs App

This repository also contains a pnpm workspace-powered docs and examples app in examples/.

Useful commands from the repo root:

pnpm install
pnpm build
pnpm dev:examples
pnpm --filter examples build

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or would like to contribute to the project, feel free to open an issue or submit a pull request.

Please make sure to follow the code of conduct.

License

This project is licensed under the MIT License. See the LICENSE file for details.