🇧🇿 Belize Interactive Map
Explore the tropical geography of Belize through our highly optimized, interactive SVG map. Perfect for dashboards, data visualization, and regional targeting across all 6 districts.
🌍 Country Overview
Belize is a small nation on the Caribbean coast of Central America, known for its vast barrier reef, hundreds of cayes, and rich Maya heritage. It is the only country in the region with English as its official language.
🎨 Design & Flag Inspiration
The visual identity of this map pack is inspired by the National Flag of Belize, which features a royal blue field with red stripes and the national coat of arms.
- Hover State: We utilize a vibrant translucent blue (
rgba(0, 63, 135, 0.35)) to represent the blue field of the flag, symbolizing the Caribbean Sea and the sky. - Borders: Rendered in Deep Navy (
#1e293b) to ensure maximum contrast and a modern, premium aesthetic.
🗺️ Interactive Demo
Hover over the districts to see the blue highlight and tooltips. Click any district to see how easily you can capture the region's data code.
Every <path> element in the generated SVG automatically receives data-code (e.g., "BZBZD") and data-name (e.g., "Belize District"). 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 Belize 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.
Generate the SVG with createMap(), inject it into a container, and listen for clicks using the automatic data-code and data-name attributes.