How to Make A Map Generator Using The MERN Stack And TypeScript — Part 8-Better UX

Goal

The goal of this part is to make the UX a bit better so it’s easier to navigate around. On program: the ability to move the map around, zoom in and out.

React konva

At the moment we are displaying our images in a normal canva. It’s doing the job, but for what we want, we’ll need something a bit more easy to use. We’ll donwload the react-konva library. Inside our frontend folder, run this command

npm install react-konva konva --save

Changing the layer

Inside MapRenderer.tsx, replace these lines:

<div style={{ maxHeight: 1025, maxWidth: 1025, overflow: "scroll" }}>
  <canvas id="map" ref={canvasRef} width={1025} height={1025}></canvas>
</div>

With those:

<Stage width={1025} height={1025}>
  <Layer>
    <Image image={image} />
  </Layer>
</Stage>

This will not change the appearance, but that’s the beginning of something nice.

Making it draggable

Now we want to make able to drag the map around. And you know what, konva is perfect for that, it’s literally a one line change.