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…