Cloud Regions Country Flags

• JavaScript

Project Overview

In February 2023 I released cloud-regions-country-flags because I needed it! I was working on a demo application for CockroachDB’s new Cloud API and wanted to show the database regions in a more user friendly way.

The Problem

You’ll see in the docs that when you make a request using the /clusters endpoint it will return, among other things, a list of regions where the database(s) is/are running. E.g

[
  {
    "name": "clever-phantom",
    "cockroach_version": "v22.2.3",
    "plan": "SERVERLESS",
    "cloud_provider": "AWS",
    "regions": [
      {
        "name": "eu-west-1"
        ...
      }
    ]
    ...
  },
  {
    "name": "mellow-stork",
    "cockroach_version": "v22.2.3",
    "plan": "SERVERLESS",
    "cloud_provider": "GCP",
    "regions": [
      {
        "name": "us-east-1"
        ...
      }
    ]
    ...
  }
]

Using this payload I displayed a fancy looking “card” which shows the name, plan, version of CockroachDB and the regions the cluster was running in. As you can see from the above, eu-west-1 isn’t an overly attractive thing to show in a UI.

My requirement was to map this region name to a country flag. Shouldn’t be too hard I thought, someone has probably published an npm package that can do this — I was wrong.

Turns out there’s absolutely loads of database regions, and their names aren’t standardized between providers. For instance Google Cloud Platform (GCP) and Amazon Web Services (AWS) use different names for similar locations.

The Solution

I Googled around for a little while and with no easy solution in sight I spun up this little project and et voilà, lovely little flag emojis in my UI!

You can find the package on npm here: cloud-regions-country-flags, and here’s how it works.

import { fromProvider } from 'cloud-regions-country-flags';

fromProvider('eu-west-1', 'AWS');

// => { location: 'Europe (Ireland)', flag: '🇮🇪', country: 'Ireland' }

With the package installed I can now pass the region.name and cloud_provider from the Cloud API response as parameters to the fromProvider function which returns the appropriate country flag, E.g

import { fromProvider } from 'cloud-regions-country-flags';

const response = ...

response.regions.map((region, index) => {
  const details = fromProvider(region.name, response.cloud_provider)

  return <span key={index} role="img" aria-label={`${details.country} flag`}>{details.flag}</span>
}))

// => <span role='img' aria-label='Ireland flag'>🇮🇪</span>
// => <span role='img' aria-label='United States of America flag'>🇺🇸</span>

I’m not sure how many folks out there will ever need this, I did, so I made it. 🕺