Delicate Apps · Widget
A country and language picker for websites. All 250 countries on a world map you can zoom by continent, with native names and search in the visitor's own language. Or just one region, or a handful of countries. One script, one config file.
Try it
Click a country on the map or in the list, switch continents, or type to search by country, native name or language. "Deutsch" finds every German-speaking country.
–
Language –
Locale –
Pick a country with the button at the top of the page. This page switches to its language where it can, and every picker here renames the world into that country's language.
What it does
All 250 countries and territories, or one region, several, or a list you choose. The map zooms to what you offer.
Country and continent names follow the page language, every country also shows its own name, and right-to-left scripts mirror the layout.
Every pick returns country, language and locale. Countries your site has no language for fall back to the one you choose.
Type a country, its native name, a language or a code, in any language. Matches light up on the map.
Full keyboard control, a phone layout that fills the screen, and a first tap on the map that previews before it picks.
One module with no dependencies, about 24 KB when the page loads. The flags follow once the page is idle, the map only when someone opens the picker.
Configure
Every choice here writes into the config file below. Download it and put it next to your page.
One region hides the continent tabs. Several give an "All" tab plus one per region.
The first one is the fallback for every other country.
Listed sites appear on the public World Picker map while the credit stays visible.
Use {country}, {language} or {locale}. Leave empty to handle picks in your own script.
Set it up
Unzip worldpicker-0.3.3.zip into a folder on your site, for example /worldpicker/. It holds the script, the map, the flags and an example page.
Put your worldpicker.config.json next to the page, made with the configurator above or edited by hand. Every key is listed in the README.
Add an element with data-worldpicker where the picker belongs, and load the script once. Picks arrive as an lp-change event, or as a redirect.
<!-- where the picker goes --> <div data-worldpicker="/worldpicker.config.json"></div> <!-- once, anywhere on the page --> <script type="module" src="/worldpicker/lang-picker.js"></script> <!-- optional: react to a pick --> <script> document.addEventListener('lp-change', e => { const { country, language, locale } = e.detail document.documentElement.lang = language }) </script>
Licence
World Picker is free for your site. The Delicate Audio icon and copyright line at the foot of the picker stay visible and unchanged.
Need it without our mark, for a client or inside your own product? An unbranded version is available on request.
armin.lanzinger@gmail.comBuilt by Armin Lanzinger in Innsbruck. Flags from flag-icons, country data from countries-list, map shapes from Natural Earth via world-atlas. Their notices ship with the download in THIRD_PARTY.md.