WorldMapPro is an interactive 2D world map component for Framer. Click any country to reveal data cards with main metrics, badge and detail rows. Includes 5 warm style presets and a live interactive demo. Perfect for dashboards, agency sites and landing pages.
Live Preview: https://worldmappro.framer.website/
About Component
WorldMapPro is an interactive 2D world map component for Framer. Click any country to reveal data cards with main metrics, badge and detail rows. Includes 5 warm style presets and a live interactive demo. Perfect for dashboards, agency sites and landing pages.
Interactive SVG map — 175+ countries rendered as clean, clickable vector paths
Country data cards — click any country to reveal a card with metric, badge and 3 detail rows
5 warm style presets — Light, Dark, Midnight, Ocean and Minimal, all warm-toned
Hover & click trigger — choose whether data cards open on hover or click
Country name label — a floating tag appears at the bottom as you explore the map
Demo mode — switch between all 5 styles in real time from a floating panel
Pre-selected country — set a country to appear highlighted and open on first load
Color legend — optional key showing active, highlighted and default state colors
150+ country dropdown — add any country from a full list, no manual typing needed
localStorage cache — map data loads once and stays instant on every revisit
Fully responsive — adapts to any container size with automatic aspect ratio scaling
Works out of the box — 6 example countries with real data included on first drop
What's Included
175+ interactive country paths
5 built-in warm style presets
150+ country dropdown, zero typos
7 property controls groups
Works out of the box, zero config
How It Works
1. Drop the component onto your canvas
2. Add countries and fill in your data
3. Pick a style preset and you're live
Use Cases
Business dashboards & data visualization tools
SaaS landing pages showing global reach & presence
Finance & fintech platforms with country metrics
Corporate & enterprise "where we operate" pages
Agency & consulting sites with international clients
E-commerce stores displaying shipping regions
Startup marketing pages showing user distribution
Analytics & reporting tools with geographic data
Annual reports & investor presentation pages
NGO & nonprofit global impact showcases
Travel & tourism destination overview sites
Product launch pages with worldwide availability
Keywords
world map, interactive map, country map, clickable world map, data map, map component, SVG world map, country data visualization, global map, map with tooltips, world map component, analytics map, dashboard map, country highlights, world map dashboard, geographic data, interactive geography, country picker, flat map, 2D map, data visualization, country tooltip map, global data, map visualization, world map visualization, map component, interactive data map, country stats map, geographic visualization, responsive map, choropleth map framer, framer dark map, framer beige map, country tooltip framer, hover tooltip map, world map no code framer, cms map
Ahmet Loca
