React Map
I need to enhance a React Admin supplier page to include a professional, interactive world map view that displays suppliers on a real map with proper geography. Requirements:
- Use a proper mapping library (like Leaflet.js) - NOT custom SVG drawings
- Real world map with accurate geography, countries, and coastlines
- Interactive controls: pan, zoom, mouse wheel support
- Clickable supplier markers that navigate to supplier detail pages
- Professional UI with map legend and controls
- Toggle between list and map view
- Position suppliers by country with slight offsets to avoid overlap
The current supplier data has fields: Id, CompanyName, ContactName, City, Country, etc.
Please install the necessary mapping library dependencies and create a production-ready map component that looks professional like Google Maps, not a hand-drawn cartoon map.