How to Organize Session Notes as a Map

[SpookyNoodle]

Hey all,

As I assume is pretty typical, I play D&D, specifically as a DM, and I tend to find that the most fun our group has in session are when there isn't a real plot, but rather, events and plots that can happen in an area, which the players can explore, and things feel more organic that way.

So, I'd like to organize my notes in such a way that it works visually, moving from area to area.

I have a worldmap, of my campaign setting (Barovia, I'm doing Curse of Strahd):



And I'd like each of those icons to be a clickable area, that will take me to a new page, new section, whichever. Let's say I click on 'E', which corresponds to the town of Barovia, and I'd like to define the clickable area as something larger than just the 'E' button, covering, say, the entire town in that worldmap.

Then I come to a new map, with some general information, and new areas for me to click on, including an area (say the title of the map) that would take me back to the worldmap.



Then I click on some of the houses, and I go to a new area, a specific house:



As you can see, it contains a map of the house, with sections set for each floor. I'd like to be able to say, click the title, and go back to the map for Barovia village, then click the title of Barovia village, and go back to the worldmap.

But if I click the floor, I go to the floor map.



And the floor map shows each of the areas, which is rooms, and then when I click on a room, I go to the room section, which has a map of the room and the information for it:



I'd like to be able to click on the little slivers of the other rooms to go to the page/note for that room, or click on the room I'm already in, and go to floor page. In addition, I'd like each of these pages, World, Village, House, Floor, and Room, to be able to have notes, or hyperlinks to other pages, and some sort of navigation so that I can manually go to those pages, just by clicking through a cascading menu.

As you can see, I already have something similar jerry-rigged in OneNote 2016, where I have little items of text, and then I can click on those to go to separate pages. However, it's a little inconvenient, because it has a full text box, which opens up, but the only clickable link part of the text box is the text itself.



This can be kind of annoying, and it'll sometimes have me select to type in the box I'm hovering over, rather than clicking the link of the box next next to that one, that I'm actually trying to click.

I don't need the solution to be pretty, I don't need to be able to zoom in and out, I just need it to be convenient, and very light on resources. I'd also rather not learn an entire coding language like HTML or Javascript to do it, so if a simple website would do the job just fine that'd be great, but I'd need to find a good builder that would make something simple, since Wix and Squarespace try to incorporate all these java elements that I don't need.

Some Secondary Goals

• I'd like to be able to define clickable areas that aren't simply squares, like say a circular area.
• I'd like to be able to edit the pages and page information right there in the page, without having to open up a separate area, since the whole purpose is to be able to take notes for sessions.

I don't need these things, but they'd be really nice to have. I'm more than willing to use a service that does all of the above, even if the clickable areas are squares, and I'd have to open an editor to change anything.

Reading back over this, I guess I should clarify: I'm not looking to have someone make this for me, I'm looking for a service that would enable me to make this for myself, and describing the ideal situation that service would be able to provide.

Based on this description, can you guys think of anything that sounds like it describes what I'm looking for? I've done a ton of research, but when I look up `clickable map DnD/D&D`, all I find are ways to generate new land maps or dungeon maps, not notate a map you already have.

[Greason Wolfe]

In general, that sounds like a web page that uses image maps for hyper links. That being said, you could take a look at the products offered at pro fantasy.com or nbos.com and see if they might have serving useful. There are a few others as well, but I can't recall them off the top of my head at the moment.

[SpookyNoodle]

In general, that sounds like a web page that uses image maps for hyper links. That being said, you could take a look at the products offered at pro fantasy.com or nbos.com and see if they might have serving useful. There are a few others as well, but I can't recall them off the top of my head at the moment.

Do you know a good way to define areas of a screen to be clickable links?

[Redrobes]

You can use html and set up an image and take all the coordinates and convert them into the numbers and it will do it but its tedious. I wrote an app to make that easier but even so I would not recommend doing that. If the image changes and usually they do, then you have to redo the numbers and html again. What you need is a tool which can link up maps and images together and keep track of those links. I wrote one of those as well but its now obsolete. What your basically looking for is a virtual table top or a VTT. There are a number of them out there. Mine had an emphasis on linking stuff like the stats to the map so you could click on a part of the map and it would bring up the room description or character stat sheet etc. But most of them have that in more of a text format. Another way of doing it is with a wiki. Self host the wiki like MediaWiki or UseMod and then you can edit the pages and link stuff from your maps to that instead.

[SpookyNoodle]

You can use html and set up an image and take all the coordinates and convert them into the numbers and it will do it but its tedious. I wrote an app to make that easier but even so I would not recommend doing that. If the image changes and usually they do, then you have to redo the numbers and html again. What you need is a tool which can link up maps and images together and keep track of those links. I wrote one of those as well but its now obsolete. What your basically looking for is a virtual table top or a VTT. There are a number of them out there. Mine had an emphasis on linking stuff like the stats to the map so you could click on a part of the map and it would bring up the room description or character stat sheet etc. But most of them have that in more of a text format. Another way of doing it is with a wiki. Self host the wiki like MediaWiki or UseMod and then you can edit the pages and link stuff from your maps to that instead.

I found a pretty cool way to create highlightable images using this tutorial:

https://www.youtube.com/watch?v=8WJU4Foku98

It allows me to take an image, create light-up areas when you hover over them, and then clicking them to go to a new page. This is super helpful, because it highlights which area is being selected, and it doesn't have to be exclusively square areas. Now the problem is that it only works with wordpress (or at least I can't find an easy way to get it to work anywhere else).

Wordpress wants to charge me a fair bit of money to create a website with them, and I'm not sure that a free site would have the plugins that do the same thing as what's described in the tutorial. I'd be willing to make money for an entire site that just has notes for all my campaigns in future, that would be pretty handy, but there's also the concern of privacy, since the adventure I'm using is a paid adventure, and others would be able to access it for free, which would kind of violate the terms of service of using a paid adventure, and I don't wanna get in trouble for publishing content that's supposed to be behind a paywall.

A wiki sounds like a good solution, but I'd probably have to go through the HTML process of defining those pixel coordinates, and that sounds super tedious, and I'm not even sure that would work in a wiki format. Would a wiki allow me to define those clickable areas, or (even better) allow me to use SVG/CSS styling like the tutorial I linked above?

[SpookyNoodle]

You can use html and set up an image and take all the coordinates and convert them into the numbers and it will do it but its tedious. I wrote an app to make that easier but even so I would not recommend doing that. If the image changes and usually they do, then you have to redo the numbers and html again. What you need is a tool which can link up maps and images together and keep track of those links. I wrote one of those as well but its now obsolete. What your basically looking for is a virtual table top or a VTT. There are a number of them out there. Mine had an emphasis on linking stuff like the stats to the map so you could click on a part of the map and it would bring up the room description or character stat sheet etc. But most of them have that in more of a text format. Another way of doing it is with a wiki. Self host the wiki like MediaWiki or UseMod and then you can edit the pages and link stuff from your maps to that instead.

So my first reply didn't get approved, I'm assuming because it contained a YouTube link. But! That's okay, I don't really need it to make my point.

There's a great tutorial that does almost exactly what I'm looking for. You can look for it on YouTube, it's called "Make a responsive image with HIGHLIGHTED clickable areas," and it details how to make an SVG with dynamic, interactive behavior, so I can have the areas appear and disappear when I mouse over them.

However, the tutorial mostly details how to upload these images to WordPress, which is okay, I could always use a self-hosted wordpress site.

But the idea of using a wiki fits the organizational structure much better, of having nested pages, rather than just blog pages. And obviously there are themes and plugins that reconfigure WordPress to behave like a wiki, but why bother doing that when another situation probably already exists?

So, I guess my question is, is there a way to upload SVG images to wikis that keep their interactivity, such as onmouseover, onmouseoff, and behaving as clickable links?

[Ilanthar]

By SpookyNoodle
So my first reply didn't get approved, I'm assuming because it contained a YouTube link. But! That's okay, I don't really need it to make my point.

Welcome, and no, it's not a problem. Just consider that we aren't so many CLs. Plus, it's the beginning of summer and there is less activity on the guild right now, both among CLs and users, so you have to be patient.
I'm not a specialist of this kind of tech issues, but I'm sure you'll get useful comments.

[SpookyNoodle]

Welcome, and no, it's not a problem. Just consider that we aren't so many CLs. Plus, it's the beginning of summer and there is less activity on the guild right now, both among CLs and users, so you have to be patient.
I'm not a specialist of this kind of tech issues, but I'm sure you'll get useful comments.

Oh, sorry! I didn't mean to imply that I was upset or angry in any way, just that it made sense from a security perspective, if you were worried about spam, to block links to external websites.

[SpookyNoodle]

Okay, I've figured out a sort-of solution: I created SVG's using the tutorials I described above, and it works! Kinda!

When I open it in a browser, everything works great, except that the image doesn't scale:

https://gfycat.com/entirevainindianpangolin

When I try to insert it into various software, like TiddlyWiki, it scales and is actually useable, but there's none of the highlighting or the links to other places:

https://gfycat.com/elaboratewatchfulbichonfrise

So, I'm kind of at an impasse. Does anyone know how to upload an interactive GIF to the web, while still being interactive?

[Redrobes]

No images on their own are interactive. You need to upload some html which has the coords for the interactive zones with the image and host it. So this format is not very compatible with wikis, and other web site builders unless they have their own kind of interactive management parts built into them. The old way of doing this kind of thing was to use "flash" but that went out of fashion since flash was riddled with security holes in it. I wrote my program precisely because I never saw a proper solution to this.

This is a youtube vid I did ages ago of our CWBP put into the program. I do all of our community projects in ViewingDale and upload them here on this site:
https://www.youtube.com/watch?v=qELcbKXdRm8

If you go to the community pages and look for CWBP, CWBP II and CWBP III, the community dungeon and the community city project them all of them have been done with this app. With the app I can then export the mosaic of tiles that we all map and then I put it into the pan and zoom web interface:
https://www.cartographersguild.com/f...splay.php?f=91
e.g.
https://www.cartographersguild.com/l...type=guildcity

This is using the Leaflet interface:
https://leafletjs.com/

If you zoom on the guild city to Mouse's "Atlas Stadium" then you will find a little scroll icon designed by J.E. and if you click that then it takes you to Mouses fishished maps page. Now you can see that it is possible to attach web links to a zoomable map and this was desired linking method of my app but done in web site compatible code.

But... using leaflet and getting this set up is a pain and is difficult and beyond what I would want to be able to describe on a forum page. The leaflet page has tons of help so you can read through that but I use some code and all sorts of hacks to get this on this forum. The process was made much easier and better with my app which is why I use it to generate the images for leaflet upload but it was not popular and I lost a lot of money over it so its been abandoned for sale and now I just use leaflet here for you guys instead. But if your a bit of a hackster then check out Leaflet and try to build up some maps using that. Fundamentally its a great bit of javascript work there.

So its possible using some custom html which is tedious, leaflet which is great but needs some code, flash which is mostly abandoned as a technology, or another VTT like maybe maptool and maybe there are other apps out there that I dont know about or have forgotten exist but its not a straight forward thing to do. If it were me and I didnt have my app and I could not code leaflet then I would do it with a wiki. We used to have a guild wiki for the CWBP projects but given that anyone could modify it then it became a spam dump so it was pulled.