Create A Customisable World Map with React & React Map GL

Web Dev

Fri Dec 30 2022


This post will explain how you can make use of the react-map-gl package to display a world map and highlight any country with a colour of your choice. After following this guide you will have something similar to the image below.

React Map GL Example

Before installing the package you will need to ensure that you have a api key that will allow you make use of the package. This is simple and free for certain usages. You can get a key by going to and singing up for an account. Once you have signed up you will be able to see your public api key, make a note of this. 

Setting up the Package

The package will need to be installed, you can install the package by using the following command.

npm install react-map-gl --save

Create a new component in React, import the package and set up the viewport and settings as shown below

import React, { useState } from 'react';
import ReactMapGL, { Layer } from 'react-map-gl';

const MapChart = () => {
  const properties = {
    viewport: {
      width: 1380,
      height: 731,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 1

  return (
    <div style={{ height: '100%', position: 'relative' }}>

export default MapChart;