MouseOver & Coordinates
Stefan Schwarzer
stefan.schwarzer at GRID.UNEP.CH
Thu Mar 10 09:54:33 EST 2005
Voila, surely not as nice as yours, and still needs some tuning (the
document and getElementById thing...), but at least on IE it works...
Thanks for your help!!
<input type="hidden" name="csz" value="<?php echo
(($extend[2] - $extend[0]) / 400); ?>">
<input type="hidden" name="orig0" value="<?php echo
$extend[0]; ?>">
<input type="hidden" name="orig1" value="<?php echo
$extend[1]; ?>">
-----
function MapElmOverHndl(e) {
var imgOrig0 = document.mapserv.orig0.value;
var imgOrig1 = document.mapserv.orig1.value;
var imgCsz = document.mapserv.csz.value;
var posx = ((e.offsetX * imgCsz)+imgOrig0);
var posy = (((400-e.offsetY) * imgCsz)+imgOrig1);
Dspl.innerHTML=posx+' '+posy;
}
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('map1');
X_addEventListener(myMapElm ,"mousemove", MapElmOverHndl, false);
> On Thursday 10 March 2005 13:06, Stefan Schwarzer wrote:
>> Thanks Martin for that. The only thing I am not sure about is how
> the
>> javascript variable, which holds the information about the pixel
> size,
>> should be called. How does this variable get into the Javascript
>> functions?
>>
>> Thanks for your help - and congratulations to your planiglobe.com
> site.
>> Looks really neat!!
>>
>> Stef
>
>
> If your server delivers the entire interface (page) on every map
> generation, simply set the javascript obj or variable at generation
> time.
>
> With the last projects I send the core map elements generated (map,
> ref, scale, etc) to a hidden iframe which calls a function in the
> parent document onload to parse/copy the new content.
>
> Part of the document in the iframe could be a good ol' HTML-form
> holding the values.
>
> With Perl mapScript one part of the page sent back could look like:
>
> print <<"EOFORM";
> <form name="params">
> <input type="hidden" name="csz" value="$m->{cellsize}">
> </form>
> EOFORM
>
> where $m is the Perl mapScript map object you are working on.
>
> With CGI mapserver you would put a similar form into the template,
> but since the cell size is not an available CGI variable - as far as I
> know - you must pass the mapextent.
>
> <form name="params">
> <input type="hidden" name="mext" value="[MAPEXT]">
> </form>
>
> The <body> tag of the doc in the iframe could be:
>
> <body onload="parent.parseIframe();">
>
> and the function in the parent doc could look like:
>
> function parseIframe() {
> var paramsForm= parent.frames[0].document.forms["params"],
> myMap.mapext = paramsForm.elements["mext"].value;
> // or myMap.csz=paramsForm.elements["csz"].value;
> }
>
> As I said before, if you use mapextent you calc cell size yourself.
>
> Cheers, Martin
>
>>> 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/
>> _______________________________________
>>
>
> --
> --- Martin Weinelt
> --- kk+w - digital cartography
> --- Kiel, Germany
> --- Tel: +49.431.5791165
> --- http://www.planiglobe.com
>
>
_______________________________________
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/
_______________________________________
More information about the mapserver-users
mailing list