Forums: Helping Hand > Image Maps

Use the following template for a nicely presented post:

{{Forum post|Write your message here!|~~~~}}

Please check out the image map I added to Silverymoon#Notable Locations. I had an idea to provide grid locations to all notable locations and make the map clickable. Let me know if you like the idea and if everything works for you. I'm open to suggestions.

If the idea is well-liked, I/we could easily make more for other major cities.

Even if you all hate it, I feel it was still time well spent for me, as I think I know the city of Silverymoon well enough to give tours now. :) That will make DMing much easier for when my players return there!

~ Lhynard (talk) 05:53, March 1, 2018 (UTC)

I think it's really cool! It would make the old maps much more useful for coordination in campaigns. The code looks REALLY dense though, is there a way to make it more simple, perhaps via template? I love this man, it really gives a new level to those 2e maps.
Ruf (talk) 07:32, March 1, 2018 (UTC)

Wow, that's amazing! This sets a standard for all other city pages that have a map available. I'm a big fan of image maps as well, and I think the format looks great. Good job!
Sirwhiteout (talk) 12:35, March 1, 2018 (UTC)

Nice work Lhynard! My only nit to pick is that The Forgotten Realms Atlas puts the numbers on the horizontal and the letters on the vertical axis. Not that it makes a critical difference, but we should probably make a quick survey of FR maps and see if there is a reasonably consistent scheme for map coordinates. Or not. :D
Moviesign (talk) 14:37, March 1, 2018 (UTC)

Thanks for the feedback, everyone.

Ruf, it would be hard to make the code less dense, since there is no way around having to provide numeric coordinates of the invisible shapes that make up each link, specific to the particular image used as the map. I could make sub-templates, but they'd end up being more complicated than the code itself. This is why I made it as a subpage, so that someone wanting to insert the map can simply us {{Silverymoon/Imagemap}}.

Sir Whiteout, I was inspired by your {{Realmspace navmap}}, so thank you!

Movie, that's a picky nit. Isn't the Atlas the only source that uses grid references at all? It wouldn't be too hard to edit the file to swap the letters and numbers, but I'm not convinced it's worth the effort. :)

~ Lhynard (talk) 14:58, March 1, 2018 (UTC)

I would say this would go a long way for some of the more dense cities like Baldur's Gate and Waterdeep to clarify where everything is in relation to one another. How do you feel about doing them for overland maps for locations that are too small (shrines, caves, entrances to ruins, etc.) to be officially labeled?
Ruf (talk) 15:24, March 2, 2018 (UTC)

This is really cool! It would work really well on the large maps of regions. Can it be refined to allow clicking on a town which then takes you to its article?
Regis87 (talk) 15:34, March 2, 2018 (UTC)

"How do you feel about doing them for overland maps for locations that are too small… to be officially labeled?"

As long as one can figure out where they are with enough precision, I am fine with that.

"Can it be refined to allow clicking on a town which then takes you to its article?"

That's how it is supposed to work, yes.

~ Lhynard (talk) 18:08, March 2, 2018 (UTC)

Don't forget there is a somewhat advanced image map at this site. (See the discussion about it in this forum post.) Loremaps would probably be better for large-scale maps, but the html imagemap technique could be used to enhance many of the smaller maps on our wiki.
Moviesign (talk) 18:27, March 2, 2018 (UTC)

I like the image maps, but it's not always clear what's present and clickable, so the reader has to scrub the mouse over it. One tiny building shape on the map might be an unidentified building or a notable structure. The map needs to be a large image. Ironically, Loremaps – code, pins, and articles – was copied wholesale from the wiki while that kind of map was a feature Wikia provided/thrust upon us, but it seems to have been removed. It never worked well anyway.
— BadCatMan (talk) 01:43, March 3, 2018 (UTC)

I might have a workable solution that will address some of your concerns BCM. Stay tuned.
Moviesign (talk) 05:38, March 3, 2018 (UTC)

Okay, I think I have it working now. Monobook users will have to use the default skin for this test, but I'll fix that later. To see image map highlights, go here and click "Enter test mode" and then view the demo page and test it out. Click "Show legend" to expand the list of links, each of which will highlight its area on the map. Going to bed now. Hope it works for you.
Moviesign (talk) 07:04, March 3, 2018 (UTC)

It doesn't seem to work for me. All that happens is the caption is no longer formatted correctly.
~ Lhynard (talk) 07:49, March 3, 2018 (UTC)

Try again and clear your cache a few times until it works. Takes a minute or two sometimes. I have it working in Monobook now, so Monobook users can see it. I need to change the color of the highlight to make it more visible. I hope this can be done with CSS, but I'm still investigating.
Moviesign (talk) 15:58, March 3, 2018 (UTC)

Cool. I agree that the highlighting could be better, but it's a neat concept.
~ Lhynard (talk) 16:53, March 3, 2018 (UTC)

In case it wasn't clear, I love what you did you improve the image map, Movie. The only problem is it made it more clear where I made errors in my shapes! :)
~ Lhynard (talk) 23:46, May 14, 2018 (UTC)

That code is live now, so if you want to use it just put a <div class="imageMapHighlighter"> around your <imagemap>. I'm not sure what to do about the highlight color. What I have works, but may not work for all images. The problem is that it is not easily changed. Let me know if you have any suggestions or druthers.
Moviesign (talk) 01:43, May 15, 2018 (UTC)