Question

Lets say this object

var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }

Allright as you can see it has a id (isora,pepe, australia,otro) and each of those has cordinades (leftX, topY) and another name to show (name)

I am using this to geo tag pictures,
i already done the part where i hover an item and i highlight in the map the cordinades and the name to show, Now i need to do the opposite; if i hover the area in the map i need to highlight the item on the list (and in the map)

So lets say i have this mouse cordinades

x = 270

and     

y = 55   

how can i check if there is any item (id) with:
x+-30 (leftX) AND y+-30 (topY) ??

+-30 is the margin of error (obviously is very dificult that users point exact cordinades with the mouse)

Answer 1

function find(x, y) {
    for (var key in paises) {
        if (paises.hasOwnProperty(key)) {
            var current = paises[key];

            if (Math.abs(current.leftX - x) < 30 && Math.abs(current.topY - y) < 30) {
                return current;
            }
        }
    }
}

You’d then call it by;

var found = find(270, 55);

if (found == undefined) {
    // none found
} else {
    // found = the one found!
}

Of course, you can easily change the function to return a boolean if you don’t need the one that was matched.