Android - plotting gps coordinate on custom map

Question

I have an activity in my app where there are images I use as maps. If the image is "grid aligned" to google maps then when I use the top left and bottom right corners of the map I get from googlemaps online then I can turn the users gps into an x and y on screen. However if the map is not "grid aligned" and is at an angle than the values my math returns draws the users position off screen. Obviously I am missing the part on how to handle the angle of the map so if anyone could shed some light on how to do that it would be super helpfull.

I know I would have to figure out the angle in radians and do some conversion but I have no idea where to start. This is what I use to get an x and y to plot on a canvas so far.

public double[] getPositionGPS(Location upperLeft, Location lowerRight, Location current){

    try{

        double hypotenuse = upperLeft.distanceTo(current);
        double bearing = upperLeft.bearingTo(current);
        double currentDistanceY = Math.cos(bearing * Math.PI / OneEightyDeg) * hypotenuse;
        //                           "percentage to mark the position"
        double totalHypotenuse = upperLeft.distanceTo(lowerRight);
        double totalDistanceY = totalHypotenuse * Math.cos(upperLeft.bearingTo(lowerRight) * Math.PI / OneEightyDeg);
        double currentPixelY = currentDistanceY / totalDistanceY * ImageSizeH;

        double hypotenuse2 = upperLeft.distanceTo(current);
        double bearing2 = upperLeft.bearingTo(current);
        double currentDistanceX = Math.sin(bearing2 * Math.PI / OneEightyDeg) * hypotenuse2;
        //                           "percentage to mark the position"
        double totalHypotenuse2 = upperLeft.distanceTo(lowerRight);
        double totalDistanceX = totalHypotenuse2 * Math.sin(upperLeft.bearingTo(lowerRight) * Math.PI / OneEightyDeg);
        double currentPixelX = currentDistanceX / totalDistanceX * ImageSizeW;

        return new double[]{currentPixelX, currentPixelY};

    }catch(Exception e){

        e.printStackTrace();
        return new double[]{0,0};

    }

Answer 1

First, map your google map coord to your custom image as if the image is NOT at an angle. Here you are basically dealing with scaling and offsets. Assume the coord you get is (x, y).

Then, rotate your coord according to this matrix: Rotate a point around origin. Since you already know the angle, you know / can calculate that center point coord that your custom map is rotating around. Assume it's (a, b). Specifically:

1) turn your map coord (x, y) to a (0,0) based coord, (x-a, y-b),

2) rotate using that matrix and you have a new coord (x', y'),

3) turn it back to (a, b) based coord, (x'+a, y'+b).

Answer 2

I might be completely wrong but I think this is a way to get the angle of rotation (or maybe the 4 corners):

1. Get the angle alpha between lowerRight and upperLeft. I guess this is equal 180 - lowerRight.bearingTo(upperLeft) EDIT (This equation should be dependent on the quadrant of the screen)
2. Use your X,Y (screen) coordinates to get the angle theta between the hypotenuse and the lower edge. I guess (again) the sine of this angle is equal to: (height) / ((height^2) + (width^2))^1/2
3. Now the angle of rotation is equal to theta - alpha

If you want to visualize this: