diff --git a/mapper/src/App.js b/mapper/src/App.js index 63d3a61..769d256 100644 --- a/mapper/src/App.js +++ b/mapper/src/App.js @@ -1,7 +1,8 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; import * as leaflet from 'leaflet'; import 'leaflet-polylinedecorator'; -import { MapContainer, TileLayer, useMap, useMapEvents } from 'react-leaflet'; +import { MapContainer, TileLayer, useMap, useMapEvents, FeatureGroup } from 'react-leaflet'; +import { EditControl } from 'react-leaflet-draw'; import Datetime from 'react-datetime'; import 'react-datetime/css/react-datetime.css'; import axios from 'axios'; @@ -10,6 +11,7 @@ import RangeSlider from 'react-range-slider-input'; import './App.css'; import 'leaflet/dist/leaflet.css'; import 'react-range-slider-input/dist/style.css'; +import 'leaflet-draw/dist/leaflet.draw.css'; // num: number of steps per duration @@ -244,6 +246,16 @@ function Map({end, duration, slider, mapState, setMapState, setSubmenu, showDire localStorage.setItem('api_key', api_key); } + const onRectangleDrawn = (e) => { + const { layer } = e; + const bounds = layer.getBounds(); + console.log('Rectangle drawn. Bounds:', { + northEast: bounds.getNorthEast(), + southWest: bounds.getSouthWest(), + }); + // In the future, we can use these bounds to filter data or perform a search. + }; + return (