Create A Customisable World Map with React & React Map GL

Introduction

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.

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 https://www.mapbox.com/ 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' }}>
      <ReactMapGL
        width="100%"
        height="100%"
        mapStyle="mapbox://styles/mapbox/light-v9"
        {...properties.viewport}
     />
    </div>
  );
};

export default MapChart;