PDA

View Full Version : Google Maps API - What I've been working on.



Robbie
10-09-2006, 08:01 AM
I know I've been kinda quiet lately, and I have a bunch of plans on my plate (such as the featured map block) but this just couldn't wait.

I FINALLY cracked the code of the Google maps API...I've figured it out, and I plan on eventually sharing the secret with you all...but for now:

http://www.cartographersguild.com/mapview/arsala.html

This is my campaign map, and its unfinished and unpolished...and I only have implemented 2 zoom levels. I also forgot to turn on the sheet effects for the second zoom level.

BUT, this is a CC2 map viewed in the Google Maps API, and I like it. The only thing I don't liek is the file sizes...holy crap...The 2 zoom levels I have here is about 5 megabytes. Thats a lot of space for a map online I guess...and of course google isn't hosting the map, only the API.

I look forward to your thoughts and opinions.

Intermagus
10-09-2006, 08:15 AM
Excellent.....this is exactly what I've needed. With the CC2 maps, a file compression would be in order. With my painted PNG maps, I can use the PSP software to compress the files into something more manageable (conversions from MB to KB in most cases except the the truly huge maps I've painted, but even then they compress a 25MB file into the 5MB files you are wanting to abstain from).

I suppose if you were to export the CC2 or CC3 map to a picture file, then the image editor compression can be employed, could it not?

Robbie
10-09-2006, 08:35 AM
well, the image consists of tiles that the google map api overlays or replaces with the google tiles. The tiles are created by loading a map into Photoshop and running a script that chops the map up into tiles and names them automatically. The magical formular is figuring out how to name the tiles and how to use those names in your api script...its a beast.

Here's what a tile looks like on the server.
http://www.cartographersguild.com/mapview/arsala/13_8_4.jpg

I used a jpeg compression rate of 8 (12 being highest quality largest filesize) and could probably go lower if I wanted to, and I intend to experiment with lower numbers in the future. Especially when I add my next zoom level.

If the maximum zoom level displays a 1280x1024 map...then the next closest zoom level shows a 2560x2048 map, and the next one shows a 5120x4096, and so forth, doubling in size each time. So you can see how quickly the file sizes will add up on these.

Robbie
10-09-2006, 09:01 AM
And I just added a higher zoom level...but it doesn't seem to line up as well.

When you load the page you are at the max zoom level...there are two more closer zoom levels.

RPMiller
10-09-2006, 11:06 AM
This is really great! My very first nitpic would be that the jpgs are losing so much clarity that as you zoom in they get really blurry. Is there a way to use PNGs instead? They would be a lot clearer and maybe a bit smaller as, IIRC, PNGs have a better compression ratio.

Also the map seemed to 'jump' around in the applet from when it first reloaded to when I zoomed back out. It seemed to shift to the left.

Ultimately though I have to say that you ROCK! and I'm looking forward to seeing how to put this together for my own world map... which I need to finish one of these days.

Robbie
10-09-2006, 11:32 AM
This is really great! My very first nitpic would be that the jpgs are losing so much clarity that as you zoom in they get really blurry. Is there a way to use PNGs instead? They would be a lot clearer and maybe a bit smaller as, IIRC, PNGs have a better compression ratio.

The three zoom levels are individual images...they are never enlarged or anything. The poorer quality I think you're mentioning is actually from things not rendering well at that size in CC3. For example, when you zoom from the max view, to the middle zoom level, a whole new set of jpegs is loaded as opposed to the map being zoomed in by enlarging existing images. The third zoom level (where one continent has some symbol detail) didn't render very well...a lot of the fonts are unreadable and things are kinda jumpy...Thats the way it came out of CC3, I just sliced it. I am going to try pngs though, just to see what kind of difference it makes.


Also the map seemed to 'jump' around in the applet from when it first reloaded to when I zoomed back out. It seemed to shift to the left.

The maximum view zoom level does not line up with the others for some reason. Therefore when you zoom back out, you don't quite get what you expect because the tiles aren't related properly. I'm working on it.

RPMiller
10-09-2006, 01:50 PM
I'll be very interested in seeing the pngs vs. jpgs. I suspect that they will render better.

I'll say again, thank you very much for your work on this and I will look forward to seeing the project evolve and get used by everyone.

Robbie
10-09-2006, 03:23 PM
Unfortunately there doesn't seem to be an Adobe Scripting way to save a png-8...the pngsaveoptions don't have a method to specify compression or 8-bit, or colors or anything :(

Anybody got any ideas?

Looks like I'm stuck with jpeg or gif for now.

RPMiller
10-09-2006, 05:46 PM
Unfortunately Adobe Scripting is something I haven't looked into so you won't be getting any love from my direction, but I can give some sympathy. ;)

Robbie
10-09-2006, 06:49 PM
I just redid it...so go look again and refresh if you haven't.

I wanted to further get an idea of the ranges with which I have to work. I figured it out. Here's a chart:

Zoom Level 0: 1x1 tiles (0) - 256x256 px
Zoom Level 1: 2x2 tiles (0-1) - 512x512 px
Zoom Level 2: 4x4 tiles (0-3) - 1024x1024 px
Zoom Level 3: 8x8 tiles (0-7) - 2048x2048 px
Zoom Level 4: 16x16 tiles (0-15) - 4096x4096 px
Zoom Level 5: 32x32 tiles (0-31) - 8192x8192 px
Zoom Level 6: 64x64 tiles (0-63) - 16384x16384 px
Zoom Level 7: 128x128 tiles (0-127) - 32768x32768 px

I recreated the map utilizing the first 5 zoom levels (0-4)...So the full zoom is 4096x4096 pixels...not too shabby. But I think I'm getting somewhere with this now that I have an idea of how it places the tiles.

RPMiller
10-09-2006, 07:10 PM
NICE!! :idea:

You definitely have it now. The tiling at zoom 0 is odd, but understable to allow for a sphere. If only there was a way to get the better pic exports...

Everything else seems to be working smoothly now.

Robbie
10-09-2006, 07:19 PM
As for the weird tiling: go to maps.google.com and zoom ALL the way out. You'll see the exact same effect, only with our earth. Unfortunately I didn't map the stretching at the poles and google actually handles that in its map coordinates.

As for the weirdness in the export of the images...the text being choppy and things like that actually is how the png originals turned out. Now, I imagine that if I used a different less flashy font, it would probably be easier to read, but meh...I'm not really worried about it too much since this is just a proof of concept at this stage.

Robbie
10-09-2006, 07:41 PM
BTW...those 5 zoom levels all add up to 14 megabytes...bleh. Thats all at jpeg quality 6. 12 is maximum quality.

RPMiller
10-10-2006, 01:26 AM
I wouldn't worry about the size of the files myself. There was a time when I would be concerned about those with slow connection speeds, but in this day and age I would give a warning that broadband is required and be done with it.

Intermagus
10-10-2006, 06:35 AM
I have to agree with RPMiller....a broadband connection is quickly becoming the norm instead of the exception, plus the idea that since these maps are tiled, which will load the first tile zoomed into and work its way out, will be very little wait time for viewing the sections of the maps as needed.

My largest map is my Kalam worldmap, at 7000 pixels wide by 3000 pixels tall. It's a PNG image and at last check was a 60+ MB file. Will I be able to use this one once it's also been sliced into tiles after the interface for this mapping becomes available? Ideally, I am aiming for city street level viewing in the same map as would also be available to view the whole planet, hence the massive file.

*edit* Oops.....I forgot about the "monster file" I made a year ago, sitting in my other maps folder. That bad boy is a pixel per mile file, 26250 by 11250, and still not street level (which by my estimates would require at least 1 pixel per 20 feet to make the street level view able to be recognizable). 866 MB PNG file. Now we're talking ACK. But that's with no compression at all.

Robbie
10-10-2006, 07:23 AM
Well, given the way the Google API is designed, all of what you say is possible...Whether or not I'll be able to provide a simple way of doing something like that without SOME level of user scripting is a different question though. Also, storage space isn't really a concern for me I don't think, but hosting bandwidth could become a concern eventually. If I were to start hosting map tiles (become a map tile server) I'd need to generate some additional ad revenue in order to afford the bandwidth costs of running something on that scale. Like I said on the CC2 List...I don't want to make any promises at all, but This looks very promising for the world of game mapping. Google maps go down to the street level, reasonably this could too. BUT...you wouldn't want that much detail for the whole world at every possible zoom level. Just like certain areas of the Google maps world aren't available at closest zoom, neither would your super-large world map.

The biggest concern would be lining up your street level zooms with the previous level of zoom, and so on and so forth. Of course you'd probably want to start at the widest view and work your way down. Remember the chart I posted previously that lists the pixel size and tile count all the way up to Zoom Level 7? Well, If I'm not mistaken the API currently supports zooming in all the way to level 17. I'm not willing to do the math, but thats a helluva lot of pixels.

Intermagus
10-10-2006, 08:14 AM
Considering the calculations, the farthest zoom is well within the parameters of even my monster file map. IMO if the larger the map, the less details per pixel required and therefore a much lower file size/higher compression needed for each level of zoom-out. Compression/detailing of the individual tiles would be easier, unless the API can use only the 1 whole file (which doesn't look like that's the case from what I'm reading here).

Robbie
10-10-2006, 09:19 AM
No it can't use the whole file, it has to be chopped up and "served" accordingly. Each tile is named according to its position in the map. For example the tile I linked to previously (and subsequently renamed after I redid the map) is 13_8_4...meaning its position is x:13, y:8, zoom level 4. The google api allows for code to call those tiles from a tileserver or host directory based on a formula.

I think in your case it would be unreasonable for you to detail every square mile of your world down to the street level. BUT it is possible. Google doesn't detail every square mile of our world down to the street level, but they've sure done a lot of it.

For every 1 tile at zoom level 4, there's 4 tiles that represent the same area at zoom level 5. So every zoom level doubles the amount of space available to show detail on a particular area. Should an interface be built that allows maps to be automated, a tool would have to be built (or duplicated) that allows smaller maps to be lined up with the appropriate area at a previous zoom level. All logistical issues that I'll be trying to work out.

In the meantime...it appears that since I have moved the demo to the Cartographers Guild site template, the page is not viewable in IE. I'm trying to work out that issue right now. (EDIT: Fixed for now)

RPMiller
10-10-2006, 11:09 AM
So basically each zoom level has its own image, and then that image is sliced up. So for instance if I wanted to do something similar to Intermagus, I would start with the way my world map from FT looks lets say, then I would turn on the various layers to display more detail and save that as another file but with a higher resolution. Rinse and repeat. Is that correct?

ravells
10-10-2006, 11:54 AM
Superb!!!

i suspect the 'how do to it' bit will be completely beyond me though!

Ravs

Robbie
10-10-2006, 12:27 PM
So basically each zoom level has its own image, and then that image is sliced up. So for instance if I wanted to do something similar to Intermagus, I would start with the way my world map from FT looks lets say, then I would turn on the various layers to display more detail and save that as another file but with a higher resolution. Rinse and repeat. Is that correct?

That is almost absolutely correct. You'd start at the maximum zoom level and submit an image that is within the size requirements for that zoom level. Then it gets sliced up and you submit an image for the next zoom level that is proportionately larger and it gets sliced up...rinse, and then repeat...exactly.

For the first draft, if the map doesn't fill the whole space, it will be centered at each zoom level and padded accordingly. First draft won't include the tools to line things up and move them around an subsequent zoom levels. Initially, each subsequent zoom level has to be a larger version of the previous zoom level. Twice as large to be exact. And it has to be equal based on its center point, it can't be offset from center...its kinda hard to explain right now.

RPMiller
10-10-2006, 12:56 PM
I think I get it. The centering means that when it is zoomed in and sliced in quarters the intersection of those 4 slices has to be at the center of the previous pic and then "radiates" out from there stacked like a pyramid. With the 0 zoom at the top and the highest zoom at the bottom.

keithcurtis
05-06-2007, 12:53 PM
Depending on what you want to do with the final map, you might save youself a lot of hassle by using Zoomify (www.zoomify.com). It's an easy-to-use web tool for doing Google Map style panning and zooming. It's pretty imited at the free level, but it might be enough to fit your needs.

RobA
05-06-2007, 01:52 PM
There is a similar java tool available to cut up high res images to view them using a googlemap interface:

http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp

A couple of examples here:
http://digitalurban.blogspot.com/2007/02/google-image-cutter-software-released.html

here:
http://www.casa.ucl.ac.uk/googlemaps/QuadHDR.html

and here:
http://www.casa.ucl.ac.uk/googlemaps/house.html

Though it seems to base everything on the large image, so detail/lables will be lost in each successive zoom out.

-Rob A>

Robbie
05-06-2007, 02:04 PM
yeah...this project has pretty much been dropped because of the complexity and availability of other methods. Thanks for the links!

Robbie
05-22-2007, 12:36 AM
I am however considering writing a quick tutorial on how to implement google maps api for your rpg maps like this...any interest?

RPMiller
05-22-2007, 11:19 AM
*raises hand*

I would be interested!

pyrandon
05-22-2007, 04:19 PM
I am however considering writing a quick tutorial on how to implement google maps api for your rpg maps like this...any interest?

DO IT....DO IT NOW!!!!!! :)