A clean, flexible map component for Framer that renders European countries in a distinctive dot style. Select a country, choose how it's displayed, adjust the colours, and drop it straight onto your canvas. No image assets, no map APIs, no dependencies — just a single component that does exactly what it says.
9 countries included
Austria, France, Germany, Italy, Netherlands, Portugal, Spain, Switzerland, and the United Kingdom are ready to use immediately, with data bundled directly in the component so nothing needs to load.
Three ways to display each map
Filled — the entire country shape rendered as a solid field of dots
Outline — just the border of the country, traced in dots
Grid — the full dot grid shown across the canvas with the country highlighted within it
Customise everything from the property panel
Country dropdown
Display mode — Filled, Outline, or Grid
Dot colour
Background colour
Grid dot colour (Grid mode)
Country label — toggle on or off, with separate colour control
Easy to extend
The component pulls map data from JSON files in a GitHub repository you own. Adding a new country is as simple as dropping in a new file and adding one line to the component. No republishing required. The included README walks through the full process, with a Python script to convert any country border into the correct dot format.
Where it works well
Office and studio location pages
Country-of-origin callouts on product or brand sites
Travel, logistics and territory pages
Editorial layouts and infographic sections
Data dashboards and reporting interfaces
Technical details
Pure React, no external libraries
SVG-based rendering — sharp at any size
Outline mode is computed automatically from the shape data
All 9 base countries are bundled — works on canvas immediately, no GitHub setup required to get started
Andrew Norman
