Custom Geo Tagging. Name to position and position to name
- by Toni Michel Caubet
Hello there i am implementing a custom geo tagging system, ok
Array where i store the cordenades of each place
/* ******Opciones del etiquetado del mapa*** */
var TagSpeed = 800; //el tiempo de la animacion
var animate = true; //false = fadeIn / true = animate
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> */
}
/**/
this is how i check with js
function escucharMapa(){
/*fOpciones*/
$('.mPointer').bind('mouseover',function(){
var clase = $(this).attr('class').replace(" mPointer", "");
var left_ = paises[clase].leftX;
var top_ = paises[clase].topY;
var name_ = paises[clase].name;
$('.arrow .text').html(name_);
/*Esta linea centra la etiqueta del hotel con la flecha. Si cambia el tamaño de fuente o la typo, habrá que cambiar el 3.3*/
$('.arrow .text').css({'marginLeft':'-'+$('.arrow .text').html().length*3.3+'px'});
$('.arrow').css({top:'-60px',left:left_+'px'});
if(animate) $('.arrow').show().stop().animate({'top':top_},TagSpeed,'easeInOutBack');
else $('.arrow').css({'top':top_+'px'}).fadeIn(500);
});
$('.mPointer').bind('mouseleave',function(){
if(animate) $('.arrow').stop().animate({'top':'0px'},100,function(){ $('.arrow').hide() });
else $('.arrow').hide();
});
}
/*Inicio gestion geoEtiquetado*/
$(document).ready(function(){
escucharMapa();
});
HTML
<div style="float:left;height:500px;">
<div class="map">
<div class="arrow">
<div class="text"></div>
<img src="img/flecha.png"/>
</div>
<!--mapa-->
<img src="http://www.freepik.es/foto-gratis/mapa-del-mundo_17-903095345.jpg" id="img1"/>
<br/>
<br/>
<span class="isora mPointer">isora</span> <span class="pepe mPointer">Pepe</span> <span class="australia mPointer">Australia</span>
</div>
</div>
OK so you have vew items and when you hover one, it gets the classname, it checks the cordinades in the object and displays a cursor in those cordinades of the image, right?
ok so how can i do the opposite? lets say if user hovers +-30px error margin (top and left) an area in the map the item is highlighted???
i was considering
-on map image mouse over
- get the offset of the mouse
- if is in the margin error area
-show
else
-no show
But that does not look really efficient as long as it would have to caculate each pixel movement, no?
