When I said "bird's eye view", that's not quite what I meant....

March 15, 2010 12:00 PM

How can I easily combine small digital maps (and potentially other isomorphic 2D images) into one large composite?

I have a large series of maps I've created in Community Walk (web mapping application that utilizes Google Maps API). I need to be able to print these in a large-scale format with a lot of detail. There doesn't appear to be an easy way to do this.

If I try to print the maps using the print function on the page, I have to choose between not enough detail (entire map is contained on the page, but is too "zoomed out" to see street names, etc), or not enough area (map is "zoomed in" enough to see detail, but is cropped to a small area, the entire map can not be seen).

What I've been doing to get around this problem is to zoom in to the desired detail level, then take screenshots as I scroll around the map area, then manually slice up and composite the shots in Photoshop. Then I print the final image. This works, but it is VERY tedious.

There's got to be a better way, right? I've seen some tools that create large maps using Google's API, but using those tools doesn't seem to give me the option of keeping the markers I've set up in Community Walk, so they don't provide everything I need. I know how to use Autostitch to combine 2D photos into a large panoramic, but the program doesn't seem to work well for isometric data that shouldn't be scale or perspective corrected. Also, it would be awesome if I had a solution that didn't require me to crop the browser chrome out of the shots too. Does anything like this exist?

If I *can* find a tool that will stitch 2D map images or browser screenshots into one large composite, I will probably have more uses for it in the future, so that would be ideal. But I'd consider any other ideas too (for example, maybe I could export my marker data from Community Walk in CSV format, and import it into something else?).

Incidentally, the size of the maps on screen seems to be primary limited by my screen resolution, as the viewable map area will always expand to whatever size the browser is. So if I could find a way to emulate having a, say, 6000x4500 pixel screen, that would probably solve the problem too. Maybe there's a VM program that can do this?

Thanks MeFites!

posted by Vorteks to Computers & Internet (8 answers total)

Best answer: You tried autostitch, which is one of many photo stitching programs. Perhaps another one might do what you need?
Microsoft ICE
Panorama Perfect Lite
Microsoft Photo Gallery
Panostitch
CleVR
all the above are free, I believe. Of course there are for pay programs too.
posted by luvmywife at 12:45 PM on March 15, 2010

I have a lot of experience in this area, where the images can be thousands captured in grids automatically by optical microscope or SEM. Good luck. Custom software was always the best solution for stitching. My algorithm and software belongs to the company, so unfortunately, can't give it to you.
posted by hungrysquirrels at 12:52 PM on March 15, 2010

Response by poster: @luvmywife - Microsoft ICE is producing pretty decent results. That helps a lot, thanks.

I suppose I can use some kind of scripting to automatically crop away the browser chrome from the screenshots.... That's definitely a better solution than what I've been doing. Still not painless, but better.

I wonder if anyone knows how to emulate a really large screen resolution? I'm actually kinda curious if that's even possible now, if only for future reference.
posted by Vorteks at 1:05 PM on March 15, 2010

Best answer: I don't have a magic solution, but I will tell you the process I use for getting large aerial images out of Google Earth (and the same strategy should work for a gMaps-based system), which I assemble in Photoshop:

1. Create a large empty Photoshop file with a transparent background (you can always enlarge/crop it later)
2. Zoom to your desired zoom level in your map (I find that it is pretty easy to tell when you are at the "max zoom" level beyond which you are just upscaling pixels and not adding any new image data). Once you get your zoom level set, be very careful NOT TO CHANGE IT, as it will probably mean starting over
3. Take a screenshot (I find OneNote to be a great tool for this -- I set it to only copy the screen clipping to the clipboard, and the "select the area on-screen" feature means that I can only select the image content, leaving behind all of the browser chrome, google UI stuff, etc)
4. Paste into Photoshop
5. Repeat steps 3 & 4, but when you paste in the next image, set the layer's Blending Mode to "Difference". Areas of the image that exactly match the image below will be black -- this allows you to quite quickly nudge the new layer around until it is aligned pixel-perfect with the layer below. Once they are aligned, set the blending Mode back to Normal.

I find that the "Difference" trick makes this quite quick and (relatively) painless. But naturally an automated process would obviously be even more painless, if someone chimes in...
posted by misterbrandt at 1:26 PM on March 15, 2010

I suppose I can use some kind of scripting to automatically crop away the browser chrome from the screenshots.... That's definitely a better solution than what I've been doing. Still not painless, but better.

Imagemagick is free and can be used to programmatically strip chrome (cropping).

Fiji is a free microscope image editing tool that includes functionality for 2D stitching (tutorial). It is based off of the National Institutes of Health ImageJ project.
posted by Blazecock Pileon at 1:32 PM on March 15, 2010

Fiji can be scripted (as well as imagemagick).
posted by Blazecock Pileon at 1:39 PM on March 15, 2010

With VMWare you can can set the screen size to be quite big (I'm not sure what the limit is though).

Another approach could be to use AutoIT. It is a scripting program, and you can control the behavior of what it does entirely through coordinates; so you could pan/screencapture exact pieces of what you want so you don't have to worry about stitching.

Perhaps some of the professional features of commmunity walk might help?
posted by a womble is an active kind of sloth at 5:09 PM on March 15, 2010

Best answer: By asking around on some other sites, and then experimenting in Javascript and the Google Maps API, I found a really easy way to do this for this particular application.

First, I created a bookmarklet (in Firefox) with the following code:

javascript: var tempElement = document.getElementById("walk_rhs"); tempElement.style.marginLeft = "0"; tempElement.style.width = "3200px"; tempElement.style.height = "2400px"; tempElement = document.getElementById("walk_map_container"); tempElement.style.width = "3200px"; tempElement.style.height = "2400px"; walkApp.map.gmap.checkResize(); tempElement = document.getElementById("walk_lhs"); tempElement.parentNode.removeChild(tempElement); tempElement = document.getElementById("adcontainer"); tempElement.parentNode.removeChild(tempElement); tempElement = document.getElementById("walk_map_controls"); tempElement.parentNode.removeChild(tempElement); tempElement = document.getElementById("map_comments_container"); tempElement.parentNode.removeChild(tempElement); void (0);

Then I used FireShot to get a screenshot of the entire (now 3200x2400 pixel) page, by clicking "Capture Entire Page" from the menu.

I'm very grateful for the answers given to me. Even though my eventual solution was different, I learned about some very useful tools in this thread.
posted by Vorteks at 11:45 AM on March 16, 2010 [1 favorite]