Interactive Map

[ZEJ]

I have recently embarked on a project in which I need to create an interactive map from a JPG. The image is a map of a fantasy campaign setting. 

 

My initial research has lead me to a few places, Google Maps API looks promising, but I have no idea how I would parse the image into the amount of tile images needed for google maps, or how to do it correctly. 

 

I also stumbled upon MapBox, which I have no idea how much it allows for custom maps (it looks like it does but I have yet been able to figure it out). The biggest problem here is in order to create a layer to get started you need Geo Data, which if I'm working with a custom image, I don't know where I would get Geo Data.

 

Before I dig in too deep in any one direction, I wanted to come over here and see if anyone has experience making an interactive map and could give me some pointers or at least some direction.

 

Thanks! 

[trag1c]

This may be a really stupid reply or it may be gold I have not thought about it much. You could try extracting a normal  map or a bump map out of your image then using that as your geo data.  (Im assuming by geo data your talking about terrain height.)

[ZEJ]

@ZEJ what kind of interaction do you want with that map? Just markers, rotation, landmarks or something else?

 

Markers for sure, markers showing up depending on your zoom height, much like google maps. 

 

There was talk of (since this is a fantasy campaign settings) eventually trying to layout the roadways and airways so that you could determine how long (in game) it would take to travel from one point to another, however if this ends up being over our head for day one that's fine. Worse case scenario I build another page for that (that could possibly tie off the marker pop ups). 

 

This may be a really stupid reply or it may be gold I have not thought about it much. You could try extracting a normal  map or a bump map out of your image then using that as your geo data.  (Im assuming by geo data your talking about terrain height.)

 

There are sites that allow you to extract sections of google maps geo data, then creating an overlay image, and overlaying overtop of the google maps data. However, most of these sites are expecting an overlay for like one continent, not the entire projection so they don't work too well for that. This is an option, however I have not figured out how to do it on the scale I'm trying to do (entire replace of the world map with this map). 

 

Also, I don't know for certain what the Geo Data actually consists of, I'm rather new to this. I don't know so much that its elevations as just latitude and longitude data. This is stuff I could technically generate, I assume, I just have no idea where to get started, or if I'm understanding the Geo Data correctly. 

[ZEJ]

@ZEJ, you should take a look at the GEO5 project: http://geo5.org/#top 

 

This looks promising! 

 

I'm not seeing right away support for custom map images, it appears to have tile support, but not so much for custom map images. However I will absolutely tinker and see if this is what I need. (If it ends up being what I need I will flag your post )

 

In the mean time if anyone else has other suggestions or ideas please, keep em coming  

[ZEJ]

Hey guys! I figured out how to get it working with the google maps API. 

 

Using ImageMagick I was able to generate the thousands of tiles I would end up needed, then it was a simple matter of altering the example code on the google maps API documentation page to use my file structure and zoom levels, and I'm up and running. 

 

Thanks for the help!