# image rectification with Mercator projection

I have written an image rectification function which allows a user to select 2 points on an image and 2 points on a map. The function will then rectify the image so it is translated, scaled and rotated to fit the two points on the map.

The code I have written works perfectly along the equator. However this function 'breaks' when moving further north or south. The rotation and the scale are both wrong. I believe this is because of the Mercator projection I use which stretches along the latitude axis.

I am unsure how to proceed. Is there a bit of math I am unaware of which will compensate for the stretching along the latitude? Or am I wrong in my assumption this is because of the Mercator projection?

Below you will find the code I use:

``````// transformFromPoints is an array with the two coordinates on the image
// They are in lat long
var fromPointA = this.transformFromPoints;
var fromPointB = this.transformFromPoints;

// transformToPoints is an array with the two coordinates on the map
// They are in lat long
var toPointA = this.transformToPoints;
var toPointB = this.transformToPoints;

// This is the img we want to transform
var img = this.activeBaseMapImg;

// First update the anchor so the anchor is exactly at fromPointA
// The anchor defines the point around which the image will be drawn
// This is also the point around which the image is rotated.
var cornerPoints = img.getCornerPoints();
var xAnchorPos = M.Math.projectPointOnLine(fromPointA, cornerPoints, cornerPoints);
var yAnchorPos = M.Math.projectPointOnLine(fromPointA, cornerPoints, cornerPoints);

var xAnchorDir = M.Math.subVector2(xAnchorPos, cornerPoints);
var xLineDir = M.Math.subVector2(cornerPoints, cornerPoints);
var yAnchorDir = M.Math.subVector2(yAnchorPos, cornerPoints);
var yLineDir = M.Math.subVector2(cornerPoints, cornerPoints);

var xAnchor = xAnchorDir.x / xLineDir.x;
var yAnchor = yAnchorDir.y / yLineDir.y;

// Set the anchor at the fromPointA location
img.setAnchor({x: xAnchor, y: yAnchor});

// Move the image to the toPointA location
img.setPosition(toPointA);

var fromDirection = M.Math.subVector2(fromPointB, fromPointA);
var toDirection = M.Math.subVector2(toPointB, toPointA);

// Determine scale
var scale = toDirection.length() / fromDirection.length();

// Determine rotation
var fromAngle = Math.atan2(fromDirection.y, fromDirection.x);
var toAngle = Math.atan2(toDirection.y, toDirection.x);

var angle = fromAngle - toAngle;

// Perform rotation and scale
img.setRotation(img.rotation + angle);
img.setSize({width: img.size.width * scale, height: img.size.height * scale});
``````

• is this python ? I also don't see any spatial reference object in the code which I think could be relevant. – jbchurchill Jul 24 '14 at 12:51
• Hello jbchurcill, thank you for your reply. The code is Javascript not Python. What do you mean with spatial reference object? I am sorry I am still very new to this field. Should I add some more information to my original question? – Mathyn Jul 24 '14 at 14:15
• You may get more eyes on this if you tag with the term "javascript". I was referring to arcpy.SpatialReference in python. This is probably out of my depth if using javascript for this type of thing. I would have probably pursued something like this with a Geoprocessing tool in ArcGIS server but I don't have a lot of experience with that yet either. – jbchurchill Jul 24 '14 at 16:12
• I've added the Javascript tag, thank you for the suggestion. – Mathyn Jul 25 '14 at 7:44