While researching how to start, I was lucky enough to find a page on scaling SVGs which gave me everything I needed: how to reference already-existing elements without duplicating the code, and what
You can view the frame source to see all the code in detail, and I’ll highlight the important parts below.
You can use SVG use with a href of the original element to reuse a node. This means that if you group all the nodes with a unique ID in either the minimap or the larger version (which I’ve called the maximap), you can reference it in the other one!
The second problem involves moving the minimap hover-square as the user drags. I could have handled this by applying CSS transforms in pixels to the SVG-defined rectangle, but I wanted to be able to just adjust the x and y coordinates in SVG form. As this didn’t map onto pixels directly, I needed to apply a transformation after calculating how the user had moved their mouse.
After computing how far the mouse has moved since the last check (
movedY), we scale by the ratio of the viewport of the SVG to the height of the SVG in pixels. We then add that to the existing coordinates of the rectangle.
The last problem is to make the minimap actually function as a minimap, and drag the larger map as the user moves the mouse.
For this one, I can choose the initial parameters to make this one just fall out: if the height and width of the rectangle on the minimap are the same as the height and width of the viewbox on the maximap, and the two maps share the same initial coordinates, then the viewbox
y can be set to the rectangle’s
y. If not, this would involve an additional coordinate transformation, but it’s easier to just set the initial parameters so that the variables come out to 0.