Image X & Y axe

Question

i have a image (1536x1536), it's a map.

And i want to have X and Y axe on image max x: 3000.0, max y: 3000.0, min x: -3000.0, min y: -3000.0.

I want to to convert my coordinates (X,Y) in position on map (top/bottom and left/right)

So you blow the image up by styling to 6000px x 6000px or higher? Or do you want to calculate closest point in scale 6000 to 1536? Is it an ``, ` — user13500, Mar 27 '14 at 18:03
It's img, i want to do a Live Map, and i want to convert coordinates of game on image. — user3032469, Mar 27 '14 at 18:06
I have this script: var size = document.getElementById('unique_map'); var xMod = 6000/size.width; var yMod = 6000/size.height; var xPoint = x / xMod; var yPoint = y / yMod; xPoint = xPoint + (size.width / 2); yPoint = -(yPoint - (size.height / 2)); var source = "#circle_id_" + ID; $(source).css("left", xPoint); $(source).css("top", yPoint); Work but not exactly. — user3032469, Mar 27 '14 at 18:33
Did you find it helpful? Also note that you have to take into account offset, margins etc of image, wrappers, HTML body etc. when positioning the elements. But guess you are aware of this ... — user13500, Mar 30 '14 at 01:31

user13500 · Answer 1 · 2014-03-28T15:46:29.523

From comments I assume you do not resize image by CSS but keep it in it's natural state. As such you can use a translate object with ratio difference. If this is extremely resource dependent I recommend using array over object (as to code displayed below).

It give you point to pixel translation.

var translate = {
    x: 1536 / 6000,
    y: 1536 / 6000
};

function pt_translate(pt) {
    return {
        x: Math.round((pt.x + 3000) * translate.x),
        y: Math.round((pt.y + 3000) * translate.y)
    };
}

// Sample coordinate input:
pt = {
    x: -1029.3652,
    y:  369.122
};

var ptt = pt_translate(pt);

Result:

{x: 504, y: 862}

More samples:

Various console log samples

console.log(pt_translate({x:0,y:0}), 'vs', 1536 / 2, 1536 / 2);
console.log(pt_translate({x:3000,y:3000}), 'vs', 1536, 1536);
console.log(pt_translate({x:-3000,y:-3000}), 'vs', 0,0);
console.log(pt_translate({x:910,y:-1045}), 'vs', 1000,500);
console.log(ptt);

Yields:

{x: 768, y: 768} "vs" 768 768
{x: 1536, y: 1536} "vs" 1536 1536
{x: 0, y: 0} "vs" 0 0
{x: 1000, y: 500} "vs" 1000 500
{x: 504, y: 862}

Image X & Y axe

1 Answers1