پرش به مطلب اصلی

🇦🇷 Argentina Interactive Map

Explore the vast and diverse geography of Argentina through our highly optimized, interactive SVG map. Perfect for dashboards, data visualization, and regional targeting spanning from the Andes to the Atlantic coast.

🌍 Country Overview

Argentina is the second-largest country in South America, boasting an incredibly diverse landscape. It ranges from the towering Andes mountains in the west to the expansive Pampas grasslands and the rugged Patagonian steppes in the south.

🎨 Design & Flag Inspiration

The visual identity of this specific map pack is inspired by the National Flag of Argentina, which features the iconic light blue (Celeste) and white stripes.

  • Hover State: We utilize a vibrant translucent Celeste (rgba(117, 186, 222, 0.35)) to represent the blue stripes of the flag, symbolizing the sky and the clear waters of the Rio de la Plata.
  • Borders: Rendered in Deep Navy (#1e293b) to ensure maximum contrast and a modern, premium aesthetic.

🗺️ Interactive Demo

Hover over the provinces to see the Celeste highlight and tooltips. Click any province to see how easily you can capture the region's data code.

svg-world-maps / argentina.svg
Entre RíosSaltaJujuyFormosaMisionesChacoCorrientesCatamarcaLa RiojaSan JuanMendozaNeuquénChubutRío NegroSanta CruzTierra del FuegoBuenos AiresCiudad de Buenos AiresSanta FeTucumánSantiago del EsteroSan LuisLa PampaCórdoba
How it works

Every <path> element in the generated SVG automatically receives data-code (e.g., "ARBUE") and data-name (e.g., "Buenos Aires"). You can listen for clicks on the parent container to instantly build drill-down experiences, filtering, or regional detail views.


💻 How to Render It

Implementing the Argentina map in your project takes just a few lines of code. Since every map is generated as a plain SVG string, the exact same approach works in React, Vue, Angular, Svelte, and vanilla JavaScript.

One pattern, every framework

Generate the SVG with createMap(), inject it into a container, and listen for clicks using the automatic data-code and data-name attributes.

👉 See the full rendering guide for your framework →