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.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Convert MrSID to an image (PNG, JPG, TIFF, …)


Conversion result, using data of my hometown Deinze, Belgium

To convert a MrSID (Multiresolution Seamless Image Database) from LizardTech you’ll need GDAL (Geospatial Data Abstraction Library) — Mac Users: download here — along with its MrSID Plugin — Mac Users: scroll down at link above.

Once both are installed you can use gdal_translate to do the actual conversion. Beware that converting will give you a gigantic file and will take a while. Best is to resize the output, to not end up with images of 500MB.

Convert MrSID to PNG and resize

/Library/Frameworks/GDAL.framework/Programs/gdal_translate -of PNG -outsize 10% 10% input.sid output.png

More info on the parameters can be found on the GDAL site.

Tip: if you can determine the NE and SW coordinates of the image, you can project it on top of Google Maps as a Ground Overlay (example)

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Enabling Image Upload in Staff Panel of Kayako Support Suite

When it comes to features and functionality Kayako Supportsuite is a fine product indeed. One of the things that is lacking though is the ability to upload new images to the server in order for you to insert them into a KB article for example. Took me a little while, but I found out how to enable the functionality straight into the WYSIWYG editor that comes with Kayako (which is the extremely outdated HTMLArea). Quite sure I’ll be making some other guys out there very happy with this guide, as this is a much requested feature 🙂

Continue reading “Enabling Image Upload in Staff Panel of Kayako Support Suite”