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.

Hello,

I tried to change to a image based map, [...] 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.

It looks like maybe you missed the last block of code:

https://github.com/ThePix/QuestJS/wiki/Image-based-Maps

Settings

You need to tell Quest to import the library file.

settings.libraries.push('image-map')

There are then a number of settings. The most import is the "mapImages" attribute. This is an array of dictionaries, with each element of the array corresponding to a map image. In this example, two map images are used. Each needs a filename (with path and extension), the width and height of the image in pixels, and the name.

settings.mapImages = [
  {
    name:'Halmuth',
    file:'game-alt-map/halmuth.png',
    width:1000,
    height:1000,
  },
  {
    name:'Small scale',
    file:'game-alt-map/country.png',
    width:1000,
    height:1000,
  },
]

These are optional settings to customise it:

settings.mapScrollSpeed = 1
settings.mapStyle = {
  right:'0',
  top:'200px',
  width:'400px',
  height:'400px',
  'background-color':'#ddd', 
  border:'3px black solid',
}
settings.mapMarker = function(loc) {
  return map.polygon(loc, [
    [0,0], [-5,-25], [-7, -20], [-18, -45], [-20, -40], [-25, -42], [-10, -18], [-15, -20]
  ], 'stroke:none;fill:black;pointer-events:none;opacity:0.5')
}

It looks like maybe you missed the last block of code:
https://github.com/ThePix/QuestJS/wiki/Image-based-Maps

I assume you need to include all elements in the image map, even the optional parameters to add an image map to the system? I might've misunderstood that I had to include this.

These are optional settings to customise it:

settings.mapStyle = {
  right:'0',
  top:'200px',
  width:'400px',
  height:'400px',
  'background-color':'#ddd', 
  border:'3px black solid',
}
settings.mapMarker = function(loc) {
  return map.polygon(loc, [
    [0,0], [-5,-25], [-7, -20], [-18, -45], [-20, -40], [-25, -42], [-10, -18], [-15, -20]
  ], 'stroke:none;fill:black;pointer-events:none;opacity:0.5')
}

I only included the settings.mapStyle properties but not the mapMarker... boy I feel dumb, I assume with this it is easier to create a resizable map, since in the mapStyle I can add resize to it and since it isn't SVG based it doesn't need to create it at a specific size. In hindsight the mapmarker not being defined makes sense when taking a 2nd glance.

I assume you need to include all elements in the image map, even the optional parameters to add an image map to the system?

I think it's because everything is coded to work out of the box, so to speak. The code for the optional settings has to be there, but we don't have to use it in our games. That makes it easier to write the tutorials and just have one library that will handle most anything.

You're doing better than I would if I tried to do this.

All I did was look at your error, then search the ThePix/QuestJS repo for the undefined term: mapMarker

Heck, I had to read your original post a few times to even understand enough about this to try to help, hehehe. (This is how I learn new things. I never actually make games -- worth sharing, anyway, haha.)

You're doing better than I would if I tried to do this.
All I did was look at your error, then search the ThePix/QuestJS repo for the undefined term: mapMarker
Heck, I had to read your original post a few times to even understand enough about this to try to help, hehehe. (This is how I learn new things. I never actually make games -- worth sharing, anyway, haha.)

I don't think I did well explaining what I meant to be fair. Though having to include even the things they say are optional at least to define it makes sense. can't believe I didn't realise it facepalms

I want to see if I can make it expandable and so on and if so maybe I can even do some other things with QuestJS see if I can make it into more of a custom engine, though that's just my thought process.

Well, it looks like you've pretty much got a handle on things to me. I definitely learned a thing or two from this thread.

Not rushing by any means, but I'll be watching for your game in the future so I can check it out.

Hope to see you on GitHub!