Find static map image coordinates from two markers

Question

My idea is plain and simple:

I've got a map as an image, that can be either a scan of a printed map, or a SVG map from Wikipedia, or a screenshot of Google Maps.
I have for that map two lat/lon coordinates, and the user clicks on their position on the map, so I know their corresponding X/Y position on the image.

Now the fun part: I need to place a new marker on this map, only knowing its lat/lon coordinates.

I can't use any Google Maps API or other JS api as the maps can be of any scale, and often won't have a corresponding zoom factor.

I believe I need to find the image boundaries to position a marker on the map, and for this I need to know the scale of my map. I think I'm getting somewhere with this code, but I'm not getting accurate results for NE longitude.

    // Get NE and SW boundaries for the two known markers
    var ne = {lat: Math.max(map.a.lat, map.b.lat), lon: Math.max(map.a.lon, map.b.lon),
        x: Math.min(pos.a.x, pos.b.x), y: Math.min(pos.a.y, pos.b.y)};
    var sw = {lat: Math.min(map.a.lat, map.b.lat), lon: Math.min(map.a.lon, map.b.lon),
        x: Math.max(pos.a.x, pos.b.x), y: Math.max(pos.a.y, pos.b.y)};

    // Get boundaries box width and height
    var box = {width: sw.x - ne.x, height: sw.y - ne.y};

    box.lat_delta = ne.lat - sw.lat;
    box.lon_delta = ne.lon - sw.lon;

    // Map scale
    box.lat_ratio = box.lat_delta / box.height;
    box.lon_ratio = box.lon_delta / box.width;

    // Get Top-Left and Bottom-Right coordinates of the map
    var tl = {
        lat: ne.lat + (box.lat_ratio * ne.y),
        lon: ne.lon - (box.lon_ratio * ne.x)};
    var br = {
        lat: sw.lat + (box.lat_ratio * (box.height - sw.y)),
        lon: sw.lon - (box.lon_ratio * (box.width - sw.x))};

And then, how do I get the X/Y coordinates of the third marker? I thought about doing something like that:

var x = (map.c.lon - tl.lon) * box.lon_ratio; var y = (map.c.lat - tl.lat) * box.lat_ratio;

But results don't make any sense. So I'm a bit lost there.

score -2 · Answer 1 · answered Dec 09 '13 at 01:50

The answer was:

karto.prototype.getStaticMapBoundingBoxFromTwoPoints = function (point1, point2, width, height)
{
    // Coordinates of the inner bounding box containing the two points
    var box = {};
    var map = {};

    // Top left, with lat/longitude as pixel coordinates on full-size Mercator projection
    box.tl = {
        lat: this.latToY(Math.max(point1.lat, point2.lat)), 
        lon: this.lonToX(Math.min(point1.lon, point2.lon)),
        x: Math.min(point1.x, point2.x), 
        y: Math.min(point1.y, point2.y)
    };

    // Bottom right, with lat/longitude as pixel coordinates on full-size Mercator projection
    box.br = {
        lat: this.latToY(Math.min(point1.lat, point2.lat)),
        lon: this.lonToX(Math.max(point1.lon, point2.lon)),
        x: Math.max(point1.x, point2.x),
        y: Math.max(point1.y, point2.y)
    };

    // Box width and height
    box.width = box.br.x - box.tl.x;
    box.height = box.br.y - box.tl.y;

    // Horizontal and vertical distance in pixels on full-size projection
    var v_delta = box.br.lat - box.tl.lat;
    var h_delta = box.br.lon - box.tl.lon;

    // Get scale from the distance applied to map size
    map.v_scale = v_delta / box.height;
    map.h_scale = h_delta / box.width;

    // Get map top left
    map.topLeft = {
        x: box.tl.lon - (box.tl.x * map.h_scale),
        y: box.tl.lat - (box.tl.y * map.v_scale)
    };

    map.topLeft.lat = this.YToLat(map.topLeft.y);
    map.topLeft.lon = this.XToLon(map.topLeft.x);

    map.bottomRight = {
        x: box.br.lon + ((box.width - box.br.x) * map.h_scale),
        y: box.br.lat + ((box.height - box.br.y) * map.v_scale)
    };
    map.bottomRight.lat = this.YToLat(map.bottomRight.y);
    map.bottomRight.lon = this.XToLon(map.bottomRight.x);

    return map;
};


karto.prototype.getPointXYOnStaticMap = function (lat, lon, map)
{
    return {
        x: (this.lonToX(lon) - map.topLeft.x) / map.h_scale,
        y: (this.latToY(lat) - map.topLeft.y) / map.v_scale
    };
};

karto.prototype.getPointLatLongOnStaticMap = function (x, y, map)
{
    return {
        lat: this.YToLat(map.topLeft.y + (y * map.v_scale)),
        lon: this.XToLon(map.topLeft.x + (x * map.h_scale))
    };
};

Find static map image coordinates from two markers

1 Answers1