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:

npm install react-leaflet-select-area

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.

Example

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import { SelectArea } from 'react-leaflet-select-area';

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
        onBoundsChange={(bounds) => {
          console.log('Selected Area:', bounds);
        }}
      />
    </MapContainer>
  );
};

export 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.

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.