I recently shared on Twitter an example of an interactive RPG map and have had a few requests to explain the process. Using Squirrel365 to make an interactive custom map was extremely easy, so I’m excited to dive right into the process.

Interactive Version HERE!

The Resources

For this challenge, I used maps and descriptions from 2-Minute Tabletop, with assets being licensed under CC BY-NC 4.0 License.

The tool is Squirrel365, and you can make an App for free if you publish it to their cloud hosting. Ultimately, you can do a lot with a single app, ultimately like making multiple apps into a single file.

This ZIP contains both the stand-alone Excel and the Squirrel file. [DOWNLOAD FILES HERE]

The Data

Straight-forward here. 5 Rows of information, which includes my ‘No Selection’ and help button.

Essentially, we are going to use the hotspot control in Squirrel, and capture when we have hovered or pushed the button. Then we will dynamically show what ever section matches the ‘popup.’

Follow Along- Simple Example

Keeping to the most basic steps, we create a background map and a single popup below.

• First we will set the Canvas to 800 x 600
• Next we will add the background map (width @ 800)

• Add a Circle (Make sure the width & height are equal)
• Add a Label
• Add a Hotspot (For now, turn off the ‘Mouseover’ and turn on the ‘Click’ option)
• Select these 3 Objects and Group them Under the Arrange Menu (Cntrl+G)

Load Image in New Window (Too large to embed in page)

• Add a Container
• All Elements will need to be dragged into the Container and Repositioned
• Add a Background Rectangle (Try 90% Opacity, and Round the Corners)
• Give it a Close Button
• Setup Dynamic Visibility (Container’s visibility is keyed to the yellow pop-up, make this equal to 1)
• When adding more elements, set visibility to the corresponding number

Load Image in New Window (Too large to embed in page)

How did it turn out?

Give it a shot, and make sure to check the download files for the source table, the simple example and the full version. [DOWNLOAD FILES HERE]