MouseOver & Coordinates

[Martin Weinelt]

On Thursday 10 March 2005 15:23, Stefan Schwarzer wrote:
> 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...

This was just an example. I keep an JS class which mirrors some 
of the map(-server) specific properties / methods. 'theMap' is an instance
of that class and '.getcsz()' simply returns the current cell size. 
In your code below it would be the value if the input field named "csz".
Wrap your input field in <form></form> tags and retrieve the value
by 

var hugo =  document.forms[0].csz.value;

Likewise you would want to to change  'theMap.getorig()' 
( imgOrig[0], imgOrig[1]) with  $extent[0], $extent[1].

The whole thing is really simple. Grab the numbers you need 
for calculating the mouse position in mapunits.



> 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="...." ...>
> 

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

The value '400' here has to reflect your image width. 

> <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 MapElmOverHndl(e) { 
    var hugo =  document.forms[0].csz.value;
    var posx = ((e.offsetX * hugo)+<?php echo ($extent[0]) ?>;
    var posy = (((400-e.offsetY) * hugo)+ <?php echo ($extent[1] ) ?>;
    //Dspl.innerHTML=posx+' '+posy;
    alert(posx+' '+posy); // only to be sure...
 }

Happy alert box canceling ... ;-)

Martin

> 
> 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:damn 
> >
> > 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/
>         _______________________________________