Creating Interactive Maps

gnunn

After participating in "Sandman's discussion":http://forums.obsidianportal.com/comments.php?DiscussionID=1249&page=1#Item_14 on modifying a magic item tracker, I adapted the results to create an "interactive map":http://www.obsidianportal.com/campaign/the-westerlands/wikis/westerlands-map for my campaign.

Even though the coding is pretty much exactly the same, I think this subject is worthy of its own topic so that people who are interested in creating their own maps can find it more easily.

Anyway, this is the code I used to make my map.

====
==

ChainsawXIV

Note that (as seen in the other thread mentioned above), you'll have some issues just pasting the code above into your wiki pages, due to the way the forums format text. When you set up your map, just make sure you replace the "smart quotes" in the code above with the traditional kind of quotation marks your keyboard makes.

Also, I'm adding a link to this guide to the FAQ. Thanks for creating it Gnunn!

sandman

More resources!

Here you have a couple of Hex Color Code Generators, just pick the color and you'll get the hex code, and in two languages!

"C

DiceMasterNick

Thanks for the shout out gnunn! =D
However, I must give credit where credit is due.
Although the final design was mine, the foundations for the code I used came both from Arsheesh, ChainsawXIV and Gnunn.
High-five you guyz. ^_^ This is the most helpful community of gamers ever!

Cheers

Drokles

What kind of format should I use if I want to use an image as a map marker and I don't want "this":http://www.obsidianportal.com/campaign/cartac/wikis/vainwood-shire to happen?

gnunn

I would recommend saving the image as a png or perhaps a gif. The other thing you need to make sure to do is to make sure you have the image file's settings set to preserve transparency when you save it on your computer before uploading. The process for doing this varies depending on which graphics program you are working in. Which program do you do you use to edit your graphics?

Drokles

Ah, that makes sense. I just used ms-paint to create the icons. I saved them as png's, but I'm not sure how to impose transparency on it.
Thanks for posting this thread by the way. It's a lot easier than having to figure it out by myself :).

ChainsawXIV

For what it's worth, the difference between using a GIF or using a PNG for this is in the way they handle transparency. GIFs use what's called one-bit alpha - each pixel of the image is either fully opaque, or fully transparent - which often produces jagged edges to the image, where as PNGs use eight-bit alpha, where each pixel can be fully transparent, fully opaque, or a range of values in between. The only problem with PNGs is that old browsers (IE6 being the most common example) don't support them, so people who are using elderly software may see some strangeness.

gnunn

Drokles: I don't know if MS paint will allow you to preserve transparency when you save the icons. I would recommend you make the adjustments and re-save things using Gimp. Judging by the map style you used, I'm guessing you created it using the "Artistic Regional Map" Tutorial over at the Cartographer's guild, and so are probably familiar with Gimp.

Drokles

Hey, thanks guys. Problem fixed ^_^. And seriously you're good at replying on short notice.

vstraydogstrutv

Another problem with png's is their load time; they're much bigger than gif's. With icons it's certainly negligible, but if you start throwing a lot of them up or really big ones you may experience slow page loading. Granted that all depends on the speed of your connection and whatnot, but despite the occasional roughness of a gif I like using them better to compensate not only for older browsers, but for people with lagging connections.

RobertAnderson

Hey Gnunn,you do some kick ass work.do you have any of these templats available for retareds like me that have no idea what all that code stuff is?

gnunn

What sort of templates do you want? If you want the code that will let you add a map to your wiki, it's posted at the beginning of the thread. If you want the actual technique used for drawing the map, I recommend you check out "The Cartographers' Guild":http://cartographersguild.com. and especially "this tutorial":http://www.cartographersguild.com/attachment.php?attachmentid=30650&d=1288649425.

You might need to set up a free account to view the linked tutorial.

If you have more specific questions, I'm happy to help.