Europe Maps

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