SVG World Map
SVG World Map
If you're looking for a world map alternative without the need for Google Maps, you're in luck! We've got you covered with react-svg-worldmap.
Baisc Map
const data = [
{ country: 'US', name: 'United States', value: 40, style: 'bg-[#028ca6]' },
{ country: 'CA', name: 'Canada', value: 20, style: 'bg-[#8bcad6]' },
{ country: 'IN', name: 'India', value: 15, style: 'bg-[#a1d4de]' },
{ country: 'CN', name: 'China', value: 5, style: 'bg-[#cce8ed]' },
{ country: 'GB', name: 'United Kingdom', value: 5, style: 'bg-[#cce8ed]' },
{ country: 'FR', name: 'France', value: 5, style: 'bg-[#cce8ed]' },
];
export default function YourMapComponent() {
return <WorldMap color="#028ca6" valueSuffix="%" size={500} data={data} />;
}
Checkout their github for more options https://github.com/yanivam/react-svg-worldmap