I am using react leaflet to interact with leaflet map. Now I want to use a leaflet plugin called leaflet-area-select to select an area on the map and get current long lat of the rectangle selected. However, it is an leaflet plugin and can't be used on react leaflet. How can I use this plugin ? Or do you know any libraries that can select areas from leaflet map ? Thank you very much!

Select area code ( leaflet-area-select):

let map = new L.Map('map', {
  selectArea: true // will enable it by default
});
 
// or
map.selectArea.enable();
 
map.on('areaselected', (e) => {
  console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
 
// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
  return bounds.contains(
    this._map.layerPointToLatLng(layerPoint)
  );
});
 
// now switch it off
map.selectArea.setValidate();

My code :

export default function Home(){
    return(
        <>
        <Header/>
            <MapContainer center={[10.7743, 106.6669]} zoom={6}>
          <TileLayer
            attribution='&copy; <a href=";>OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          />
          {/* <GeoJSON
          style = {this.countryStyle}
          data={polygonData.features}
          onEachFeature={this.onEachContry}
          
          /> */}
        </MapContainer>
        </>
    )
}

I am using react leaflet to interact with leaflet map. Now I want to use a leaflet plugin called leaflet-area-select to select an area on the map and get current long lat of the rectangle selected. However, it is an leaflet plugin and can't be used on react leaflet. How can I use this plugin ? Or do you know any libraries that can select areas from leaflet map ? Thank you very much!

Select area code ( leaflet-area-select):

let map = new L.Map('map', {
  selectArea: true // will enable it by default
});
 
// or
map.selectArea.enable();
 
map.on('areaselected', (e) => {
  console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
 
// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
  return bounds.contains(
    this._map.layerPointToLatLng(layerPoint)
  );
});
 
// now switch it off
map.selectArea.setValidate();

My code :

export default function Home(){
    return(
        <>
        <Header/>
            <MapContainer center={[10.7743, 106.6669]} zoom={6}>
          <TileLayer
            attribution='&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          />
          {/* <GeoJSON
          style = {this.countryStyle}
          data={polygonData.features}
          onEachFeature={this.onEachContry}
          
          /> */}
        </MapContainer>
        </>
    )
}

• javascript
• reactjs
• leaflet
• react-leaflet

Share Improve this question Follow edited Dec 20, 2020 at 9:47 kboul 14.6k55 gold badges4747 silver badges5858 bronze badges asked Dec 11, 2020 at 12:50 Nguyen TuNguyen Tu 15944 silver badges1212 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Create your own custom react-leaflet ponent:

function AreaSelect() {
  const map = useMap();
  console.log(map);

  useEffect(() => {
    if (!map.selectArea) return;

    map.selectArea.enable();

    map.on("areaselected", (e) => {
      console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
      L.rectangle(e.bounds, { color: "blue", weight: 1 }).addTo(map);
    });

    // You can restrict selection area like this:
    const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
    // check restricted area on start and move
    map.selectArea.setValidate((layerPoint) => {
      return bounds.contains(this._map.layerPointToLatLng(layerPoint));
    });

    // now switch it off
    map.selectArea.setValidate();
  }, []);

  return null;
}

Use the external library's (leaflet-area-select) code when the p mounts and add a rectangle, after doing a Ctrl + left mouse click to draw a rectangular area, on the map.

Include your custom new ponent as a MapContainer child:

<MapContainer center={position} zoom={13} style={{ height: "100vh" }}>
    ...
    <AreaSelect />
  </MapContainer>

Demo