Choose you country. From a dropdown…

First of all — this article is about JavaScript, not emigration. Second — it is about open source. And about the World.

See it live — https://codesandbox.io/s/koryn1z5no

Forms

All good sites has forms. And half of that forms are payment details forms. Even if they are not — they could include one fields, which always… introduce a problem…

Choose your country from a list below…

How many sites misspelled countries, how many sites forgot about few of existing ones, and they even don't contain the second part, the hardcore level part

Choose your state from a list below…

The second step just double amount of joy, brings tears of happiness, and few story-points.

If you ever face this, while you tried to order something, or you ever tried to create such form by yourself, or you have tried to render a administrative boundaries for any region of the world.. so it was just unbearable.

Know your planet!

The first library, I ever publish on github, was OSME — OpenStreetMap based extraction of administrative boundaries. It countain ~400.000 shapes with borders for any country, state, shire, or a city. This is data-as-a-service project, as long OSME is just a javascript frontend library, and all information is stored on backend.

The second library I’ve published, was iso3166–2-db– data extraction from OSME in form of small JSON files, to actually provide information about iso3166–1 (list of countries), and iso3166–2 (list of states) and enable forms to shine.

And the third library in this line, was osme-geometries — geometry extraction from OSME to unbound it from backend, and make it great again (osme was released in early 2015)

Do you want your forms skyrocketed? Use the good data sources!

Part 1 — List of countries

This is the simplest one.

// load entire world dataset
import worldDatabase from 'iso3166-2-db/i18n/dispute/UN/en';
// do the absolutely same
import worldDatabase from 'the-country-names'; 
// load only list of countries
import listOfCountries from 'iso3166-2-db/countryList/dispute/UN/en';
// list only regions
import USregions from 'iso3166-2-db/regions/US/dispute/UN/en';

In short — you can load whatever you want, in whatever you want locale and with some :magic:. Better check the original readme.

esosedi/3166

The main difference between this library, and any other — it has a links to:

1. Wikipedia
2. Geonames
3. WhosOnFirst (MapZen)
4. Esosedi. Yep, as long esosedi is still the biggest cartographical site in Russia — we are keeping this data correct and up-to-date.

PS: Actually all this information exists only in “_ref” exports. We are counting on every bit….

Part 2 — Show me what you got!

Esosedi and OSME was created to DISPLAY result on the worlds map. Did you spot the map in the beginning of this article? It was real.

Example with D3.js. See source code.

Or you can just display all the things on the map —

(“edit” on CodeSandbox in case example does not work)

Example with Yandex.Maps.

OSME, in this examples are data-provider, and decoder. osme-geometries — is just a data. Do display some region you can:

1. Use build in mechanics to get data from esosedi’s servers
2. Use osme-geometry as a npm package. (~300 mb )
3. Get geometry from unpkg, as I did in this example.

Final words

And final worlds. For many of you it is some sort of pain — provide a list of countries, and it is absolutely undoable to provide a list of states.

I am here to solve this problem, just wash away it.

The source of country and region names:

theKashey/the-country-names

The more complete one:

esosedi/3166

The source of geometry for countries and regions

esosedi/osme-geometry

The more complete one:

esosedi/regions

PS: There is an article, which follows this one —

Address-[auto]complete