How to Make A Map Generator Using The MERN Stack And TypeScript — Part 7 -Colors

Goal

The goal of this part is to modify / add / remove colors from the front end.

The generator at the end of this part

The color range type

To be able to manipulate color, we’ll have to mimic the ColorRange that we created in the server. To do so, create a lib/types.ts file inside the frontend folder.

export type ColorRange = {
  min: number;
  max: number;
  color: string;
};

export const defaultRangeArray: Array<ColorRange> = [
  { min: 0, max: 0.1, color: "#05308d" },
  { min: 0.1, max: 0.2, color: "#153e97" },
  { min: 0.2, max: 0.3, color: "#0016ff" },
  { min: 0.3, max: 0.4, color: "#FFF8DC" },
  { min: 0.4, max: 0.5, color: "#DEB887" },
  { min: 0.5, max: 0.8, color: "#0d980d" },
  { min: 0.8, max: 0.9, color: "#8B4513" },
  { min: 0.9, max: 1, color: "#ffffff" },
];

As you can see, it defines a ColorRange type and also a default array, identical to what we use in the server. We will be using this all through our app.

Displaying the colors

Before modifying them, we need to first be able to show the available colors on the screen. As a starting point, we’ll simply display a table under the map.