Making Interactive Region Maps

[Ganelon]

Hey there!


I wanted to share with you guys what I've been doing as a side project while working on Pokemon Shining Waters.

I know that someone else on the forum is making maps like this (I'd like to mention them but I can't find the thread any more) but mine are different- they're interactive!

I use CSS and jQuery web code to make maps that have features such as route highlighting, labelled cities, and click-for-detail features so far. I plan to add more, such as animations and a secret location reveal button, but right now I'm happy with what I've got.

Let me show you what I'm talking about:



This is the most advanced one I have so far.

There's also this one, which is actually the first one I made but haven't made quite as functional as the other one yet. It's for my own in-panning game, Amber Version / Obsidian Version.

c<---(Click for interactive!)


Now, my code is awful. Like, shockingly bad. It's horrifying to look at. But I like the functionality here, and I'd like to learn to code it easier so that I can make more of them. In the meantime, I'll keep this post updated on my advances in making these!

Oh, and in case anyone cares about the terrain maps themselves, this is how I make them:

Spoiler:

Tell me what you think!

 

[Kydeka]

I know no correct terminology in this area, so I cannot say much on that part.
However I do think this is brilliant! Not only does the map look great and fun to explore but the interactivity I've never seen before and it's quite fun to nose around and learn whats what.
Good job! ^^ b

 

[Pendraflare]

I'm with Kydeka, these are some fun maps to check out and learn where everything is, including the cities, towns and routes and the league. But I don't code things either, so I can't comment on that, sorry. Still enjoyable to see, though!

 

[Skip Class]

Hey! Awesome project you have going on here!
I'm not in the Pixel Art specialization, but it's awesome seeing someone mix code and and any pixel or art medium together is definitely a step up from your regular map. As a web designer and artist, it's something that I really appreciate seeing these two elements placed together.

Some things I'll say:
I really like how you're using a hover over code over to highlight different routes and whatnot. Have you ever thought about highlighting the actual towns? (since currently they still stay the same when you hover over the towns/cities). It's important to hover over the towns since when you do click it a picture of the town appears. The routes themselves have a more obvious highlight, but nothing happens when you click on them.

Second thing is the actual signs when you hover over them. Er.. can't think of the actual word I'm looking for. I know they're different with routes and towns, but the change in size can be a bit ... off putting I guess?

Apart from that, definitely keep up the amazing work. Keep on experimenting with the CSS and jquery too! There are loads of codes out there that you can combine with your maps, and I think the more you work on it, the even better your maps will be!

Can't wait to see what else you create!

 

[Ganelon]

Hey! Awesome project you have going on here! I really appreciate seeing these two elements placed together.

Have you ever thought about highlighting the actual towns? (since currently they still stay the same when you hover over the towns/cities). It's important to hover over the towns since when you do click it a picture of the town appears.

Second thing is the actual signs when you hover over them. Er.. can't think of the actual word I'm looking for. I know they're different with routes and towns, but the change in size can be a bit ... off putting I guess?

Can't wait to see what else you create!

Thank you so much for your kind words!

In terms of the town highlighting, it's something that I had made, but then lost the file, and just never re-coded. I can definitely do that now that you've reminded me; it won't take long at all.

The thing with the mouseover-nameplates being slighly different is that they were added at different times. The town names were like the first things I did, and the routes were one of the last. It's just a case of a slightly different font. If I have some time later I might re-do them properly, and most likely change the plate itself from that wood tile to something prettier.

Love the feedback; I'll be sure to keep working on it!

In the future, once I actually learn to use jQuery properly (I'm sure you can tell if you looked at the source code that I don't have any idea how to do so right now) I'll probably take requests for people's region maps.

;)