This might be a bit weird to ask about, but I'll give some background info and then what I'm trying to do.

I have been trying to create an interactive map in QuestJS/6 (from now just quest) using the built-in systems, I've specifically tried to use the node-map since I feel it can be customised relatively well. I have managed to get the map itself to be resizable however it does not resize the "board" inside of it, once the map is generated regardless of the rooms, it creates this element <svg width="100" height="200" viewBox="-25 -100 100 200" xmlns="http://www.w3.org/2000/svg"> which has groups inside with lines to create a map with the rooms, this does not seem to change in size, it's always sized at the specified width. This is because it is inline-style I believe.

Now to my question, is there a way to make it so the svg reacts to the map when it is resized? for example I want to make the map a bit bigger but retain the info inside, like a container. so you have the map and the content inside is able to be moved basically. A good example would be the functionality of google maps.

I assume I'd have to make the svg not be created with the current width and height, and have the overflow be hidden , so for example create a svg that is the "canvas" for the map at 300px x 500px then have what isn't shown be hidden and then be visible when the map is expanded, so it basically draws all nodes when needed within that svg so it doesn't get cut off inside.

I can also provide pictures of what I mean or a clip, since that might be better as an explanation.

Edit 1: I tried to change to a image based map, however I might be an idiot, it gives me an error after I followed the instructions that looks like this: Uncaught TypeError: settings.mapMarker is not a function image-map.js:122:24 which indicates something wrong with the creation of it. If anyone has any suggestions I would be more than happy.