MouseOver & Coordinates

[Stefan Schwarzer]

Just as a side-note: there was a small errors in the code:
	
         +imgOrig[1]));  -- the last ")" is too much;
        And, ok, obviously enough, the code must be integrated after inserting  
the map-image, not before.


The "theMap" in the first function... is this really correct? And why  
is it theMap.getcsz() - thus, a function, not the retrieval of the  
value? And where does the getorig() come from? Are these build-in  
functions? I get different error messages - "theMap is not defined",  
etc...

Sorry, sorry. I really tried my best. But I am not a crack in  
Javascript...

Thanks for your help.

Stef

------------------------------------------------------------------------ 
--------------------------------
This is what I have now...

<img name="myMap" id="myMap" src="...." ...>

<input type="hidden" name="csz" value="<?php echo (($extent[2] -  
$extent[0]) / 400); ?>">

<script language="javascript" type="text/javascript">

function MapElmOverHndl(e) {
   var imgOrig = theMap.getorig();
   var posx = ((e.offsetX * theMap.getcsz())+imgOrig[0]);
   var posy = (((400-e.offsetY) * theMap.getcsz())+imgOrig[1]);
   //Dspl.innerHTML=posx+' '+posy;
   alert(posx+' '+posy); // only to be sure...
}

function X_addEventListener(elm, evt, lstnr, useCapture) {
   (! elm.addEventListener && d.all)? elm.attachEvent('on'+evt, lstnr) :  
elm.addEventListener(evt, lstnr, useCapture);
}

var d= document;
if (!d.getElementById && d.all) d.getElementById = new Function('id',  
'return d.all[id]');

myMapElm= d.getElementById('myMap');
X_addEventListener(myMapElm ,"mousemove", MapElmOverHndl, false);

</script>



> On Thursday 10 March 2005 11:07, Stefan Schwarzer wrote:
>> Hi,
>>
>> I would like to display the coordinates in a corner of the map, when a
>> user moves the mouse over it. Is there any Javascript (or Java) code
>> out there that would do this?
>>
>> Thanks for any suggestions.
>>
>> Stef
>
> Stefan,
>
> you need to know the pixel size of your map image in map units (DD,  
> meters,..).
> using MapScript you can pass this value along with every new map  
> generated
> as a (hidden) value and set a javascript object or variable to this  
> value.
> With mapserver CGI you must calculate this value by image size and map  
> extent
> yourself.
>
> Next you define an eventhandler for the mouseover event of your map  
> image,
> for instance:
>
> function MapElmOverHndl(e) {
>   var imgOrig = theMap.getorig();
>   var posx = ((e.offsetX * theMap.getcsz())+imgOrig[0]);
>   var posy = (((400-e.offsetY) * theMap.getcsz())+imgOrig[1]));
>   Dspl.innerHTML=posx+' '+posy;
> }
>
> 'theMap.getorig()':  returns minx, miny (mapunits) of the current image
> 'theMap.getcsz()': returns the cellsize (pixelsize) in mapunits
> '400' is the image height in pixels
> 'Dspl' is a document element like <p>, <td>, <div> or some such.
>
> Once you got the handler you add this event handler to your map image.
> If your map image got an id of - say - 'myMap':
>
> for DOM-Browsers you type:
> document.getElementById('myMap').addEventListener("mousemove",MapElmOve 
> rHndl , false)
>
> for IE6 you type:
> document.all['myMap''].attachEvent("onmousemover", MapElmOverHndl);
>
> A cross browser solution could look similar to:
> var d= document;
> if (!d.getElementById && d.all) d.getElementById = new Function('id',  
> 'return d.all[id]');
>
> function X_addEventListener(elm, evt, lstnr, useCapture) {
>   (! elm.addEventListener && d.all)? elm.attachEvent('on'+evt, lstnr)  
> : elm.addEventListener(evt, lstnr, useCapture);
> }
>
> Now you add the listener by:
> myMapElm= d.getElementById('myMap');
> X_addEventListener(myMapElm ,"mousemove", MapElmOverHndl, false);
>
> Cheers, Martin
>
>

        _______________________________________

        Stefan Schwarzer
        GIS & Data Management

        UNEP/DEWA/GRID-Geneva
        Chemin des Anemones 11
        CH - 1219 Chatelaine
        Switzerland

        Tel: (+41) 22.917.83.49
        Fax: (+41) 22.917.80.29

        Internet: http://geodata.grid.unep.ch/
        _______________________________________