Adding an interactive mini-map to your Konva canvas using react-konva

By adding a mini-map to reciprocal.dev users are now able to navigate across their user journey maps easier

As part of building reciprocal.dev I’ve been working with Konva (and react-konva) to create an MVP of the user journey mapping tools in order to validate the idea.

Over time, the example map that I built for our MVP has become larger than the browser window and I’ve needed to introduce panning and zooming to allow the user to navigate this larger map.

With the introduction of moving the map it became crucial to give the user a means to locate themselves within the full map. To solve this problem I decided to include a mini-map.

The mini-map shows the entire map with an overlay of the user’s current view (what I’ll call the viewbox) so the user can see the position and zoom level of what they can currently see against the overall content on the canvas.

Interactivity can be added to the mini-map, allowing the user to update the position and zoom level of the current view without the need to scroll or pan.

Building the mini-map

The Reciprocal.dev UI layout is similar to Miro as it maximises the canvas space and has floating menu elements along the sides of the screen.

This UI layout means I need to render a second Konva stage in one of the floating menu elements which would show the full journey map and also show information such as zoom level and buttons to zoom in and out.

Laying out the entire map

I’m using a grid of predefined coordinates to position the screens on the full size map so I re-used that grid when laying out the mini-map as this meant I could ensure consistency between the two stages.

As the mini-map would only be for reference I didn’t want to render all the screens and connections that the full map displayed so I opted to just render a Rect in the same dimensions as one of the screens in the main map which made it clear what it represented.

As I needed to render the full map for the mini-map I needed to know how big the entire map was in order to scale it down to fit the container. I did this by calling getClientRect on the stage at a scale of 1 , this allowed me to use the returned width value to calculate…