Skip to main content

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​

Basic Map preview

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