Add interactive map to Locations page#3
Conversation
- Installed `leaflet` and `react-leaflet` to provide an interactive map. - Created `src/data/locations.ts` with 10 London store locations. - Replaced the static map image in `Locations.tsx` with a `MapContainer`. - Rendered markers on the map using the configured store locations. - Fixed the default Leaflet marker icon issue in React.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Visit the preview URL for this PR (updated for commit 8d98a09): https://rexvelocity--pr3-add-interactive-map-c8k02hlh.web.app (expires Sun, 31 May 2026 22:59:12 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: e6a8092b99a21a146aa2c15690bc80339a98e50d |
This restores the distances on the location cards as per user feedback to have it as it was before. The distances are now configured in the static `src/data/locations.ts` file rather than hard-coded into the component.
- Added interactive Leaflet map with dark theme and custom markers - Configured 10 locations in London via JSON data - Simplified sidebar cards to only display name and address - Fixed Leaflet marker icon issues and imported CSS
1 participant
Replaced the static map on the Locations page with an interactive map using Leaflet and React-Leaflet. Configured 10 store locations in London within
src/data/locations.tsand mapped them to both the map markers and the location list. Fixed Leaflet's default marker icon resolving issue for bundlers.PR created automatically by Jules for task 1652406578742217909 started by @Reddevildragg