Photoshop Google Maps Tile Cutter Script (Google Maps Tile Generator)

UPDATE SEPTEMBER 2013: PS_Bramus.GoogleMapsTileCutter has been updated and now includes a nice UI dialog. A video of the new version in action can be viewed on YouTube. The download link below links to the latest version, so no worries there.

Last week, I coded a Google Maps Tile Cutter script for use with Adobe Photoshop. The script automatically cuts/carves a very large image you’ve opened in Photoshop into tiles which you can immediately use in Google Maps.

Download

Example

The source image (originally 5670 x 3402)

The script in action

Note: the flickering is due to the constant canvas resizing that needs to happen

The resulting tiles, ready for use with Google Maps

The Google Maps Integration

A live example of an integration is available at http://bramus.github.com/photoshop-google-maps-tile-cutter/example/

Installation

  • Download and extract PS_Bramus.GoogleMapsTileCutter
  • Move PS_Bramus.GoogleMapsTileCutter.jsx to your Photoshop scripts directory
    • For Photoshop CS5 on Mac OS X this is /Applications/Adobe Photoshop CS5/Presets/Scripts
    • For Photoshop CS5 on Windows this is C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts
  • Restart Photoshop if it was already running

How to use

Cutting tiles

  • Open Photoshop and open the image you want to process.
  • Access the script from the scripts menu in Photoshop: File > Scripts > PS_Bramus.GoogleMapsTileCutter.
  • The script will start carving the tiles for as many zoom levels as possible.
    • During this phase it will look like Photoshop is going berzerk, this is normal, as it is.
    • Depending on the size of the image it might be a good idea to take coffee break.
  • When the script has finished carving, you will find the tiles on your desktop, in a tilecutter subfolder (~/Desktop/tilecutter)

Implementing the tiles

The resulting tiles can be used directly in Google Maps by setting up a custom map type, using a google.maps.ImageMapType instance

A fully working example is included in the examples directory that came with the download of PS_Bramus.GoogleMapsTileCutter. Just drop in your tiles and it will work.

A live example is available at http://bramus.github.com/photoshop-google-maps-tile-cutter/example/

Notes

  • The included example and Google Maps documentation referenced is for Google Maps Version 3.
  • PS_Bramus.GoogleMapsTileCutter will resize the canvas to being a square one, as this is easier to process and implement

    • A result is that extra (empty) tiles will be generated. In a future version it’ll be possible to omit these tiles from being saved, to save diskspace from being wasted.
  • If you’re familiar with JavaScript, you can adjust lines 11-25 of the script to change some settings like the targetPath (where to save the files), bgColor (background color for empty tiles), etc.

Credits

PS_Bramus.GoogleMapsTileCutter is built by Bram — Bramus! — Van Damme and is based upon the Automatic Tile Cutter by Will James, Curtis Wyatt, and Nate Bundy.

Basically PS_Bramus.GoogleMapsTileCutter is an improved, cleaned up and optimized version derived from their work.

It certainly is no obligation but it would most certainly put a smile on my face ;)

Elsewhere , , , , , ,

35 Responses to Photoshop Google Maps Tile Cutter Script (Google Maps Tile Generator)

  1. Barry says:

    Dear Bram,

    Is this script only available for CS5 photoshops? I still have CS3 and it doesn’t show up in my scripts list.

    Thanks,
    Barry

    • Bramus! says:

      Barry, the script has only been tested with CS5. Even if the script would fail in CS3, you’d still have to see it in the scripts menu.

      What you can also do in Photoshop is go to File > Scripts > Browse… and manually select the .jsx file.

      • Barry says:

        It works by-the-way. It makes my computer “flicker” but it does the job. I accidentally put the script-file in the wrong folder… Thanks!

        • Bramus! says:

          Hi Barry, this flickering is normal. I’ve updated the blogpost with a recording of the script in action to notify users of this normal behavior.

          Regards,
          B!

  2. Alex says:

    \o/
    I was thinking of developing exactly this tool for a future website, so thanks.

  3. DW says:

    Greetings from Brooklyn, New York.

    I stumbled on your blog by accident, but I am glad I did. You have a depth of creativity and intelligence.

    I was interested in your tile cutter..I use Inkscape (linux user).

    Would your script happen to work with Inkscape? I would gladly pay for something like that…it would make my work so much easier.

    I

    • Bramus! says:

      Hi DW. I’ve quickly taken a look at Inkscape and it has no built-in scripting engine.

      However, it can be run from the command line. I guess a combination of the -e and -a parameters, along with quite a few codes of bash scripting, could do it, yet I’m not that profound with bash scripting.

      If you’re interested, I also have a PHP version (which needs some polishing) lying around which does the job too.

      Regards,
      Bram.

      • DW says:

        Thank you for your fast reply!

        I am not too well versed in scripting myself, but I will try to make it work.
        Inkscape is my software of choice…much more direct and intuitive than Adobe (for me). Not to mention it’s much easier on my system—and it’s free.

        I have been trying forever to learn how to make my own maps to post online–I figured it cannot be as hard as it seems.

        • DW says:

          Also–

          Inkscape does render scripts….the files end in .px and .inx (don’t know what that means, lol). I am actually going to try to put your script in the Inkscape plugin folder and see what happens.

          • Bramus! says:

            Aha, turns out that Inkscape supports many plugins which are written in Python. If I ever learn how to speak fluent python, I’ll give it a shot (but it’s not high on my priority list).

            If you find someone who knows both Python and JavaScript, converting the PS .jsx will be easy.

  4. DW says:

    Thank you for your time…

    An extension like this would open up a lot of opportunities not only for Inkscape users but for you as well. If say, you presented this as an Inkscape extension to the open source community, it would be a huge hit, I’m sure.

    If I had the expertise, I would start coding extensions myself. I think Inkscape with its SVG support has a lot of untapped potential. I was reading about Raphael.js and d3.js (for the wb) and if there were ways to seamlessly integrate Inkscape with those tool–WOW!
    The possibilities!

    Thank you for your time. i will try to find other ways to get the tiles cut.

  5. Yan says:

    I just tried your Photoshop Google Maps Tile Cutter Script and it worked. How do I align the tile map with the real google street map?? Or how do I plot real markers (with real lat / long ) into the Tile map?? Thanks, Yan

    • Bramus! says:

      You can plot markers on to the maps as you’d normally do (example). You’ll have to figure out the coordinates yourself though (the map is centered onto lat:0,lng:0).

  6. Hey man!

    You did a great job. That script helped allot to develop my new project.
    Thank you for your time.

    Cheers from Brazil!

  7. Marco says:

    Hi!
    Your script is fabulous.
    I’d like to know if it’s possible to set the zoom level.
    I’d like to have at least 10 levels but the script gives me only 3…
    How can I figure it out?

  8. Steffen says:

    Great plugin. This is exactly what I’ve been looking for! And it didn’t require me to code anything either. Great work, thanks a lot!

  9. Pim says:

    Hi

    Thank you for your work, it is very helpful.

    I have a question. Is it possible to have the page load at a specific zoom and place? Ie not zoom out and full image, but zoomed in to a bottom corner.

    I am not experienced with coordinates in Google map API etc but am willing to learn if you point me in the right direction.

    Kind regards

    Joakim

  10. Ricky Vesel says:

    Hi Bram, thanks for the script! I wanted to make you aware of a typo in the code: line 229, you have jpegSaveOptions.formatOpsions = … where options is misspelled the second time. Take care!

  11. Leonard says:

    Hi, thanks for this great script!
    Do you know how I could have the tiles to be saved in .png instead of .jpg?

  12. Berenice says:

    Hi !!

    thxs so mush for the tips , i have one more question , how can you put several pictures on one map ??

    i have to do a portfolio and i have a lot of pictures but i can’t download them all and have them all in one map ??

    thxs !!

  13. Pingback: 20 Great Time-Saving Photoshop Scripts

  14. Pingback: Photoshop Google Maps Tile Cutter Script Update | Bram.us

  15. Olivier says:

    Nice script and was more than happy to make a small donation, thank you for sharing.
    I am meeting some issues though. I have a file that is 4096X2048 and after many attempts, it seems to miss some tiles or make blank tiles.
    Am I doing something wrong?

    • Bramus! says:

      Hi Olivier,

      I’ve just sent you an e-mail regarding this, in order to find a solution to the problems you’re running into. Please note that transparent tiles are not cut by default. If you do want empty tiles to be cut, uncheck the “Don’t export transparent tiles” option.

      Regards,
      Bram.

  16. Pingback: Re-sizing and Resolution.

  17. Ruizman says:

    Congratulations on your great application.

    It would be possible to get the tiles without the black box. I need only the tiles of the original image.

    regards

    • Bramus! says:

      Hi Rulzman.

      All images used with Google Maps needs to be square, therefore the image needs to be altered into a square one adding some (most of the time) horizontal bars.
      You can change the background color from black to anything you want using the background color field.

      Regards,
      Bram.

  18. Snipet says:

    Just an FYI, when a user uses the new UI and selects anything other than the output to be .jpg the index.html file that is produced doesnt change its extension for the tile image files…I just had to go in and manually change out the .jpg to .png or .gif.

    Ok onto my questions, it goes along the lines of one of the above questions in regards to plotting real world LatLng coordinates. I saw you mentioned that the map is centered at 0/0, but how in the world do you change it to center on a different coordinate? I’ve been looking all day and just can figure it out…

    Thanks for the excellent script!

  19. Tim Kelty says:

    I’m trying to use your script, but it appears to only be kicking out 5 zoom levels. Is there a way to control this?

    Also, I don’t see anywhere to set the initial lat/long, which it seems like I need to do, as Google Maps appears to request image tiles with zoom level and lat/long.

    • Bramus! says:

      Tim,

      The number of zoom levels exported depends on the dimensions of the image you are using. If you chop up a small image, you’ll only have a few zoom levels. If you chop up a large image, you’ll have a few more. The script limits itself until it is at a Photoshop zoomlevel of 100%.

      You needn’t worry about lat and lon, we’re (ab)using Google Maps here to show the tiles which themselves have no relation to lat/lon. If you want to know more about tile numbering, I recommend reading http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

      Regards,
      Bram.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>