Applying coordinate transformations to ESRI world files

The ESRI World file is a plain text file with numbers on six lines. These numbers actually are just the coefficients of an Affine transformation matrix. The world file helps to place the raster image on a 2-dimensional plane. Since the world file is just a matrix, it is a simple matter to perform coordinate transformations (translation, rotation, and scaling) to the raster image by applying the various transformation matrices with the world file matrix.

An example of a world file is shown below.

0.124966541755889
-0.216448399567377
-0.216438882466538
-0.124961047055157
2132.25596524947
1263.76014101498

If we label the lines as the following for discussion:
A
D
B
E
C
F

Then the Affine transformation matrix of the raster image is

A C E
B D F
0 0 1

For more information on the world file format, visit the Wikipedia site http://en.wikipedia.org/wiki/World_file.

Translation transformation
To apply a translation transformation to the raster image, it is just a matrix multiplication of the translation matrix with the world file matrix, as shown below. dx and dy are the x offset and y offset of the translation.

| 1 0 dx |   | A C E |
| 0 1 dy | * | B D F |
| 0 0 1  |   | 0 0 1 |

Scaling transformation
To apply a scaling transformation to the raster image, just multiply the world file matrix with the scaling transformation matrix. s is the scale factor.

Note: if the scaling origin is not at (0,0), then apply the translation transformation to move the origin to the scaling origin (x,y) first. After the scaling is done, the apply an inverse translation translation to move the origin back.

| s 0 0 |   | A C E |
| 0 s 0 | * | B D F |
| 0 0 1 |   | 0 0 1 |

Rotation transformation
Similarly, to apply a rotation transformation to the raster image, multiply the rotation transformation matrix with the world file matrix. r is the rotation angle in radians (positive clockwise). 

Note: if the rotation origin is not at (0,0), then apply the translation transformation to move the origin to the rotation origin (x,y) first. After the rotation is done, the apply an inverse translation translation to move the origin back.

|  cos(r) sin(r) 0 |   | A C E |
| -sin(r) cos(r) 0 | * | B D F |
|  0      0      1 |   | 0 0 1 |

WebApp for batch resizing images

I wrote this simple WebApp using the HTML5 canvas element for re-sizing one or more images without having to upload the images onto a web server for processing. It will only work in modern Internet browsers that support the canvas element and the FileReader object; that leaves out Internet Explorer 9 and below.

1. To run the WebApp, go to this site http://dominoc925-pages.appspot.com/webapp/resize_image/default.html.
2. Then in the sidebar on the right, choose the scale factor for resizing e.g. 0.5.
   
   
3. Optional. Choose the output image format e.g. Jpeg.
   
   
4. Drag and drop the image files onto the dashed box. Alternatively, click the button and choose one or more image files.
   
   The images are resized.
5. To save the resized images, simple right click on the image and choose Save image as. Or drag and drop the image out to a folder.
   
    

Swipe the display of raster images on and off in Global Mapper 13

Global Mapper 13 comes with a new Image Swipe Tool which as the name suggests, will swipe the display of an image on and off. As long as one or more raster layer displayed, the command can be activated. The following illustrates how the command can be used.

1. Start Global Mapper. Load and display 2 raster layers e.g. an OpenStreetMap layer and a SRTM Worldwide Elevation Data layer.
   
   
2. Select Tools | Image Swipe Tool.
   
   The Select Layer to Swipe dialog box appears.
   
   
   
3. Choose the raster layer to swipe on and off. Usually this should be the uppermost layer. Click OK.
   
   The cursor changes to a white cross.
4. Move the cursor to the center of the map display. Press down the left mouse button and move the cursor left or right.
   
   The selected raster layer display is swiped on or off at the cursor point.
   

Tool to create custom icon marker shadow images

I made a simple HTML5 webapp to generate shadows from transparent icon images for use as custom icon marker shadows in web mapping applications like Google Maps, Bing Maps, OneMap or OpenStreetMap. There are already a couple of online shadow creation tools available but all of them performs the transformation processes on the server, which means the source image file needs to be uploaded first.

I thought of using the HTML5 canvas object to perform the silhouetting, scaling, skewing and blurring processes required to transform the source image into a shadow - all entirely done on the user's local browser without having to incur network bandwidth to upload and download the images onto the server. The only requirement is that a modern browser like Chrome, Internet Explorer 10, or FireFox must be used.

To run this webapp, go to http://dominoc925-pages.appspot.com/webapp/create_icon_shadow/default.html.

Then simply drag and drop a marker icon image onto the dashed box, or click the button and browse and select the source image.