react-leaflet-select-area

A React component for selecting custom areas on a Leaflet map. This component is built using React and Leaflet to enable easy area selection functionality for maps.

Table of Contents

• Installation
• Usage
• API
• Contributing
• License

Installation

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

1npm install react-leaflet-select-area

Or with yarn:

1yarn 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.

Example

1import React from 'react';
2import { MapContainer, TileLayer } from 'react-leaflet';
3import { SelectArea } from 'react-leaflet-select-area';
4
5const MyMap = () => {
6  return (
7    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
8      <TileLayer
9        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
10        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
11      />
12      <SelectArea
13        onSelect={(bounds) => {
14          console.log('Selected Area:', bounds);
15        }}
16      />
17    </MapContainer>
18  );
19};
20
21export default MyMap;

Props

• onBoundsChange: A callback function that gets triggered when the selected area changes.

API

SelectArea

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

Props

Prop	Type	Description
onBoundsChange	Function	Callback function that gets triggered when the selected area changes.

Example

1<SelectArea
2  onSelect={(bounds) => {
3    console.log('Selected area bounds:', bounds);
4  }}
5/>

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.