Question

I am currently new to open layers. And I am having trouble on using mouseover event with the use of jquery. I used jquery to create a tooltip, this tooltip will output coordinates from the map. Here’s my example.

<?php
 $init = "
map.events.register('mouseover', map, function (e) {
 var lonlat = map.getLonLatFromViewPortPx(e.xy);
 var selMinX=lonlat.lon-sizeSelection;
 var selMaxX=lonlat.lon+sizeSelection;
 var selMinY=lonlat.lat-sizeSelection;
 var selMaxY=lonlat.lat+sizeSelection;

 alert(e.pageX); // Showing the event.pageX isn't working.
     alert(selMinX); // Showing also one of the variables above isn't working.
 alert('hello'); // This msgbox works.

$(document).ready( function() {
        // Obviously I need to comment the mouseover function here 
        // since I am already using the mouseover event.
    // $('#map').mouseover(function(e) { 
       $('<div id='tooltip'><input type='text' id='coor'/></div>').appendTo('body');
    // });
});
});
        ";

?>

Right now, my map isn’t showing because I think there is something wrong with the code that append the tooltip to the body section. What I want to achieve here is to display the div with an input box on the document.

Thanks.

Answer 1

You need to change the quotations on the tooltip append:

 $("<div id='tooltip'><input type='text' id='coor'/></div>").appendTo('body');

Please note that the first and last quote of the first selector are double quotes. The attributes are quoted with single quotes.

I don’t know php but I assume you need to escape the quote like this or however php does it:

$(\"<div id='tooltip'><input type='text' id='coor'/></div>\").appendTo('body');