CodingNic

Add Location & User Interactions

Add “Use My Location”

Add Location & User Interactions 10 min read

Add “Use My Location”

Task

Connect the prepared location button to a browser geolocation handler.

File / section

src/App.jsx and SearchPanel.jsx

Change

Pass onLocation={useLocation} to SearchPanel. Add a useLocation function that checks navigator.geolocation before requesting coordinates.

Why this change matters

Feature detection prevents an unsupported browser from causing a runtime error.

Test it

Click Use My Location and observe the browser permission prompt.

Checkpoint

The location button starts a browser geolocation request.