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.