Zum Hauptinhalt springen

🇨🇻 Cape_verde Interactive Map

Cape Verde is an island country spanning an archipelago of 10 volcanic islands in the central Atlantic Ocean, famous for its Creole culture, morna music, and dramatic mountainous terrain.

🌍 Overview

Cape Verde is an island country spanning an archipelago of 10 volcanic islands in the central Atlantic Ocean, famous for its Creole culture, morna music, and dramatic mountainous terrain.

🎨 Design & Flag Inspiration

The visual identity of this map pack is inspired by the National Flag of Cape_verde.

  • Hover State: We utilize a vibrant translucent color (rgba(0, 44, 125, 0.35)) to represent the national identity and heritage.
  • Borders: Rendered in Deep Navy (#1e293b) to ensure maximum contrast and a modern, premium aesthetic.

🗺️ Interactive Demo

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

svg-world-maps / capeverde.svg
BravaSanta Catarina do FogoMosteirosSão FilipeTarrafalSanta CatarinaRibeira Grande de SantiagoPraiaSão DomingosSanta CruzSão MiguelMaioBoa VistaRibeira BravaTarrafal de São NicolauSalSão VicenteRibeira GrandePorto NovoPaulSão Salvador do MundoSão Lourenço dos Órgãos
How it works

Every <path> element in the generated SVG automatically receives data-code and data-name. 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 Cape_verde 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 →