Calculate the difference between ground control points and a DEM using Global Mapper

Somebody asked me how to find out the elevation difference between the digital elevation model (DEM) and independently surveyed ground control points (GCP). Any terrain software such as Global Mapper should have the tools to calculate the differences. In this post, I shall illustrate the steps to use Global Mapper to find out the elevation differences.

It is not as straightforward as other software as there is no single tool in Global Mapper. Basically, the DEM and the ground control points layer must be loaded together first; then the DEM elevation under the control point must be added to the GCP layer as an ELEVATION database attribute field. With the database attributes having the GCP elevation and DEM elevation fields, a database field subtraction can be done to calculate the difference between the DEM elevation and the GCP elevation.

Load the DEM and GCPs

1. Start Global Mapper. Load in a DEM layer e.g. dtm.asc.
   
   
   
   
2. Load and display the vector GCP layer e.g. gcp.shp.
   
   
3. Optional. Select Search | Search by Attributes, Names, and Description.
   
   The Search by Attributes, Names, and Description dialog box appears.
   
   Note the GCP elevation field e.g. GPS_ELEVAT. 

Append the DEM elevation to the GCP

1. Select File | Export Vector Format.
   
   The Select Export Format dialog box appears.
   
2. Choose a format e.g. Shapefile. Click OK.
   
   The Shapefile Export Options dialog box appears.
   
3. Toggle on Generate 3D Features Using Loaded Elevation data.
   
4. Toggle on Export Points.
   
   The Save As dialog box appears.
   
5. Type in the new GCP layer name e.g. gcp_dsm_accuracy.shp. Click Save.
   
   
   The GCP layer is exported out to a new vector file. The DEM elevation for each GCP point is appended to the output file
   .
6. Press ALT+C.
   
   The Overlay Control Center dialog box appears.
   
7. Select the loaded GCP layer e.g. gcp.shp. Click Close Overlay.
   
   The GCP layer is unloaded.

Calculate the difference between GCP and DEM elevations

1. Load in the GCP layer appended with the DEM elevations exported previously e.g. gcp_dsm_accuracy.shp.
   
   
2. Press ALT_C.
   
   The Overlay Control Center appears.
   
   
3. Right click on the GCP layer.
   
   A pop up menu appears.
   
   
4. Choose CALC_ATTR.
   
   The Setup Attribute Calculation dialog box appears.
   
5. In the Select Existing or Create New Attribute to Assign Calculated Values to field, type in a name e.g. hgtdiff.
   
6. In the Source Attribute field, choose the GCP elevation field, e.g GPS_ELEVAT.
   
7. In the Operation field, choose Subtract.
   
8. Toggle on Use Attribute Value. Choose the DEM elevation field e.g. ELEVATION.
   
   
   
9. Click OK.
   
   The differences are calculated and inserted into the hgtdiff field.
   
   
   The Feature Information dialog box below shows the new field with the calculated difference for one of the GCP feature.
   

WebApp tool to apply coordinate transformation to raster world files

It is possible to perform coordinate transformation to raster files with associated ESRI world files by multiplying the matrix described in the world files with the transformation matrices (translation, rotation, scaling). An implementation of this is a simple Javascript web app at this site http://dominoc925-pages.appspot.com/webapp/transform_raster/default.html.



To use the web app to apply coordinate transformations to one or more raster files, just do the following:

1. In the sidebar on the right, define the transformation parameters - the x and y translation offsets, the scale factor, the rotation angle (positive clockwise), and the rotation/scaling origin.
2. Then either drag and drop the ESRI world files (*.tfw, *.pgw, *.jgw, etc.) onto the dashed box area. Or click the button and select one or more ESRI world files.
   
   The source world files are read and transformed. The resultant matrices are displayed in the browser page.
   
3. Copy and paste the resultant matrix into a text editor. Save as a file with the same name as the original world file.
   
   
4. To see the transformation results, simply display the raster file in a GIS software that recognized world files e.g. Global Mapper.

   

   Before

   

   After

   
    

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.

Javascript example code to create a silhouette of an image using the Canvas

The HTML5 Canvas object can be used to do simple image processing tasks such as blurring, sharpening, darkening etc. provided the proper algorithm is written into the Javascript code. This post will provide an example of turning a transparent image such as the sample image on the right into a silhouette.

The code logic is quite straightforward - draw the image onto the canvas, then read each RGBA pixel from the canvas and set the RGB values to zero while keeping the alpha channel values intact.

The following is just the HTML code for laying out the image and button elements.

<!DOCTYPE html>
<html>
<head>
<title>Create Silhouette from an Image using the Canvas</title>
<script type="text/javascript" src="silhouette.js">
</script>
</head>
<body>
<p>
<img id="sourceImg" src="silhouette01.png" />
<img id="silhouetteImg" src="" />
</p>
<p>
<input type="button" value="Create Silhouette" id="createSilhouetteButton" />
</p>

</body>
</html>

The HTML page is rendered in a browser as shown above. 

The following is the Javascript code that converts the source image into a silhouette when the button is clicked.

window.onload = init;
function init() {
    document.getElementById("createSilhouetteButton").onclick = onButtonClick;
}
function onButtonClick(){
    var canvas = document.createElement("canvas");
    var sourceImg = document.getElementById("sourceImg");
    var silhouetteImg = document.getElementById("silhouetteImg");
    var ctx = canvas.getContext('2d');
    canvas.width = sourceImg.width;
    canvas.height = sourceImg.height;
    ctx.drawImage(sourceImg,0,0);
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var pix = imgData.data;
    //convert the image into a silhouette
    for (var i=0, n = pix.length; i < n; i+= 4){
        //set red to 0
        pix[i] = 0;
        //set green to 0
        pix[i+1] = 0;
        //set blue to 0
        pix[i+2] = 0;
        //retain the alpha value
        pix[i+3] = pix[i+3];
    }
    ctx.putImageData(imgData,0,0);
    silhouetteImg.src = canvas.toDataURL();
};

When the button is clicked, this resultant silhouette image is created.