From 1a3c11b5bbcb843c552a00ce2e1156d4ae9f6ebb Mon Sep 17 00:00:00 2001
From: "Tanner Collin (aider)" <git@tannercollin.com>
Date: Fri, 15 Aug 2025 02:29:48 +0000
Subject: [PATCH] feat: add rectangle drawing controls to the map

---
 mapper/src/App.js | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

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 (
 		<div className='container'>
 			{loading ?
@@ -258,6 +270,20 @@ function Map({end, duration, slider, mapState, setMapState, setSubmenu, showDire
 								url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
 							/>
 							<PolylineWithArrows coords={coords} showDirection={showDirection} />
+							<FeatureGroup>
+								<EditControl
+									position="topright"
+									onCreated={onRectangleDrawn}
+									draw={{
+										rectangle: true,
+										polyline: false,
+										polygon: false,
+										circle: false,
+										marker: false,
+										circlemarker: false,
+									}}
+								/>
+							</FeatureGroup>
 						</MapContainer>
 					)
 				: