Interactive Map (Inspired by GoogleMaps but less complex)

[Water Crystals]

I have a custom page for viewing the region map for my RPG site, by using a HTML box widget. The problem is, the updated map I want to use is bigger and so hard to display properly - due to having to shrink it to fit so members can't see everything properly. The actual map is quite large (since the region is too).

I'd like to request a new HTML code (or is the right word "script") to put instead. Below are the functions I'd like to have:

• It's inspired by Google Maps in terms of how it operates. So I want a zoomed out image of the entire region contained within a box (which I've set the size of). The image inside the box can be dragged around and zoomed in/out of, enabling members to get a better view of everything.
• An option to "show labels and paths". When clicked, the image is replaced with another, which will have the location names, routes, shortcut roads etc on it (to be clear, I mean I've made two versions of the same map - one is labelled and other is not). When the option is ticked off, it'll be back to the default one. 
• Small thing, but I'd like to add a border around the box, just so it looks better and fits in with my theme.

I've looked at Google Map's developers page and they have the coding there but I don't have the skills to understand it or make it work for my site. I'm hoping someone can kindly make this feature because I really need it on my RPG. What I have right now just isn't working and the map is so incredibly important to keeping things running. Especially as I'm overdue to updating it with the new locations I've made.

[Water Crystals]

Bump?

[Kami]

This wouldn’t be possible via template (actually this has nothing to do with templates) or strict HTML.

I recommend asking for a plugin in the Plugin Request Board instead since at bare minimum this would require the use of javascript. I don’t know if this is even possible the way you’re asking, to be honest, but it wouldn’t hurt to ask

[₪» ⅀ ƪ Ƒ «₪]

Water Crystals

I haven't tested or tried to construct this code. I am not positive it is possible. But off the top of my head, some wonky but perhaps functional workarounds could occur with HTML/CSS? It is probably easier in JS, assuming it is possible at all, but I don't know JS. xD

So, this code allows you to "zoom in" if you hover over images:
www.w3schools.com/howto/howto_css_zoom_hover.asp
My thoughts are making multiple images, one of each "land" or area you want to zoom in at once. You'd put them side by side, in a table grid most likely, so they look like one seamless image but in reality is several images in rows/columns.
For each individual image, you could then apply this zoom-in code. In this way, you could zoom in on each part of the overall map, as you could zoom in on one "section" at a time.

For the pathways....
I don't know a way to make it work with a checkbox. But you could do it with hover. The way to do this would be something like...
.map {background-url: ('http://IMAGE1URL.com'); width: 500px; height:500px;}
.map:hover{background-url: ('http://IMAGE2URL.com'); width: 500px; height:500px;}
You would make 2 different versions of the map. Map 1, in the top code, would be the standard map. Map 2, in the second part of the code, would be the same map image except you would put in the pathways yourself. It would look like pathways appear because the map image is the same, but in reality it is simply replacing image 1 with image 2 when you hover over it.
Also, it is making the image the background rather than inserting the image directly. So you'd be making an empty space with a certain height and width, and the background would show with nothing on top of it because it is an empty space, thereby looking like you simply coded the image.

Of course, this is a conflict because both codes are based on hovering. I'm unsure if you would be able to mesh the 2 together without experimenting. If you were able to mesh the 2 together, you'd only be able to show the path in one section of the land at a time, when it zooms in. If you can't mesh the 2 together or you simply don't like the idea of it, you could make 2 versions of the map, one that can zoom in on each section and one that shows the pathways. If you go this route, you could have the 2 versions of the map stacked, as in map 1 on top and map 2 below it, or you could perhaps put it into a carousel code - so that you click a right/left arrow to switch between the types of map.

Okay, so.. let me know if you're interested in trying. It isn't exactly what you want, obviously. And if someone more experienced wants to say "no that won't work, don't even try" or "there is a better way to do it," by all means, please post!

[Kami]

I really wouldn’t advise having on hover effects without an onclick effect added to it for mobile / touch screen compatibility 

[₪» ⅀ ƪ Ƒ «₪]

I'd personally rather have something than nothing..

[Kami]

Oct 16, 2018 14:02:12 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

I'd personally rather have something than nothing..

You’re misunderstanding me — I’m suggesting you add in an onclick in addition to hover to the code you provided.

[₪» ⅀ ƪ Ƒ «₪]

Ahh, okay! Unfortunately I don't know how to do that myself. Perhaps if the OP decides to pursue the idea I came up with, someone could assist them with that? ^^