Interactive world map component for Astro with choropleth data visualization, country grid, and customizable views
npm install astro-worldmap-choroplethAn interactive world map component for Astro with search functionality, configurable data views, and customizable modal content.
- Interactive SVG World Map with pan and zoom
- Country Search with keyboard navigation
- Configurable Data Views with tabs
- Customizable Modal Content with Astro slots
``bash`
npm install worldmap
`astro
---
import WorldMap from 'worldmap';
const countryData = {
'US': { population: 331000000, gdp: 21400000 },
'CA': { population: 38000000, gdp: 1740000 }
};
---
mode="modal"
/>
`
You can provide custom modal content using Astro's slot feature with data attributes:
`astro
---
import WorldMap from 'worldmap';
const countryData = {
'BR': {
country: 'Brazil',
access_rank: 88,
access_desc: 'Minimal Access Restrictions',
needs_range_desc: 'more than ten million',
pop_total: 217637000,
pop_christian: 196608000,
pct_christian: '90.34%',
lang_total: 164,
lang_full_bible: 36,
lang_nt: 60,
lang_portion: 25,
lang_none: 43,
bible_prio1: 'Print',
bible_prio2: 'Audio',
religion_main: 'Christianity',
region: 'Latin America',
church_growth: '0.3%'
}
};
---
The slot content supports data attributes for dynamic content with automatic hiding of missing data:
Basic Usage:
- data-fill="isoCode" - Country ISO code (e.g., "US", "BR")data-fill="countryName"
- - Country display namedata-fill="countryData.fieldName"
- - Any field from country data
With Formatting:
- data-fill="countryData.population" data-format="number" - Format numbers with commas
Auto-Hide Behavior:
- Elements with data-fill are automatically hidden if the data doesn't existcol-span-*
- Grid items (elements with classes) are hidden if all their data elements are missing
- This creates a clean, adaptive layout that only shows relevant information
- Modal content is automatically cleared between different country selections to prevent accumulation
- The original slot template is preserved and reused for each modal opening
Example:
`html
Population Stats
0
0
Country: Unknown
GDP: N/A
Data Views Configuration
Configure multiple data views with tabs:
`astro
---
const dataViews = [
{
id: "access",
label: "Access Ranking",
fields: { primary: "access_rank" },
classes: { primary: "is-access-rank" }
},
{
id: "needs",
label: "Needs Assessment",
fields: { primary: "needs_rank" },
classes: { primary: "is-needs-rank" }
},
{
id: "combined",
label: "Access & Needs",
fields: { primary: "access_rank", secondary: "needs_rank" },
classes: { primary: "is-access-rank", secondary: "is-needs-rank" }
}
];
--- countryDetails={countryData}
dataViews={dataViews}
defaultView="access"
mode="modal"
>
`Props Reference
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
countryDetails | Record | {} | Country data indexed by ISO code |
| mode | "link" \| "modal" | "link" | Interaction mode for countries |
| dataViews | DataView[] | [] | Tab configuration for data views |
| defaultView | string | undefined | Default active data view |
| countryNames | Record | Default names | Custom country name mappings |
| linkPath | string | "" | Base path for link mode |
| classes | object | {} | Custom CSS classes |Styling
The component uses Tailwind CSS classes. You can customize the appearance by providing custom classes:
`astro
classes={{
worldMap: "custom-map-class",
modal: {
overlay: "custom-overlay",
modal: "custom-modal-panel"
},
search: {
searchButton: "custom-search-btn"
}
}}
/>
``