[ka-Map-users] Re: Overlay mouse handler implementation
Stéphane RIFF
stephane.riff at cerene.fr
Thu Oct 25 09:27:05 EDT 2007
Hi Rosario,
The alert window is just for the example, in kamap you have the tootlip
tools that can display the infos you want more beautifully.
See the kaToolTip.js file for this :
/******************************************************************************
* kaToolTip -
*
* To use kaToolTip:
*
* 1) add a script tag to your page:
*
* <script type="text/javascript" src="tools/kaToolTip.js"></script>
*
* 2) create a new instance of kaToolTip
*
* var toolTip = new kaToolTip( oMap);
*
* 3) if you want you can set an image (as the tip pointer)
*
* var offsetX=-6;//offset to move the image left-right
* var offsetY=-19;//offset to move the image top-bottom
* toolTip.setTipImage('images/tip-red.png',offsetX,offsetY);
*
* 4) Set text
*
* toolTip.setText('Some text inside the tooltip');
*
* 6) add it to the map
*
* toolTip.move(x,y); //pixel coords
*
* or by geo coords:
*
* toolTip.moveGeo(x,y); //geo coords
*
* 7) hide the tooltip
*
* toolTip.move();
*
*
*
*
*****************************************************************************/
With simple modification in the css you can have something cool :)
I try to implement the google map info window but it's not yet finish.
Good Luck,
Steff
rosario.carbone at ipl.com wrote:
>Stéphane RIFF wrote:
>
>
>>Hi every one,
>>
>>I have implement a simple overlay mouse event handler.
>>I send you the code and hope it can help someone.
>>Here is how it works. You can add to your xml definition in the "point"
>>element three new attributes "onclik, onmouseover, onmouseout" :
>>
>><point id="the_id" x="x" y="y" redraw="true" onclick="pclick"
>>onmouseover="pover" onmouseout="pout">
>>
>>the pclick, pover and pout are your own functions names that take the
>>pid for argument
>>
>>example :
>>function pclick (pid) {
>> alert(pid);
>>}
>>
>>Here is the modification I add :
>>
>>Modify the kaXmlOverlay.js file like this :
>>(the line starts with "++" are the ones I add)
>>
>>kaXmlPoint.prototype.parse = function(point_element) {
>>
>> var i;
>> var x = parseFloat(point_element.getAttribute("x"));
>> var y = parseFloat(point_element.getAttribute("y"));
>> var redraw_a = point_element.getAttribute("redraw");
>> var redraw = false;
>> if (redraw_a == "true") redraw = true;
>>++ var point_id = this.pid;
>>++ var clickHandler = point_element.getAttribute("onclick");
>>++ if(clickHandler) {
>>++ this.div.onclick = function () {
>>eval(clickHandler+"(\""+point_id+"\");"); };
>>++ }
>>++ var overHandler = point_element.getAttribute("onmouseover");
>>++ if(overHandler)
>>++ this.div.onmouseover = function () {
>>eval(overHandler+"(\""+point_id+"\");"); };
>>++ var outHandler = point_element.getAttribute("onmouseout");
>>++ if(outHandler)
>>++ this.div.onmouseout = function () {
>>eval(outHandler+"(\""+point_id+"\");"); };
>>
>> if (!this.shown) {
>> this.placeOnMap(x,y);
>> this.shown = true;
>> } else {
>> this.setPosition(x,y);
>>................
>>}
>>
>>I hope it's clear and it can help somebody.
>>It's good for and seems to works well.
>>
>>I can answer some questions if you needs
>>
>>Thanks
>>
>>--
>>Stéphane RIFF
>>stephane.riff at cerene.fr
>>
>>CERENE SERVICES SA
>>3, rue Archimède
>>10600 La Chapelle-Saint-Luc - France
>>Tel : 33 (0)3 25 74 11 78
>>Fax : 33 (0)3 25 78 39 67
>>----------------------------
>>"Ce message peut contenir des informations confidentielles et/ou
>>protégées. Il est à l'usage exclusif de son destinataire. Toute
>>utilisation non autorisée peut être illicite. Si vous recevez ce
>>message par erreur, nous vous remercions d'en aviser immédiatement
>>l'expéditeur en utilisant la fonction réponse de votre gestionnaire
>>de courrier électronique."
>>
>>"This email may contain confidential information and/or copyright
>>material. This email is intended for the use of the addressee only.
>>Any unauthorised use may be unlawful. If you receive this email by
>>mistake, please advise the sender immediately by using the reply
>>facility in your email software."
>>
>>
>>begin:vcard
>>fn;quoted-printable:St=C3=A9phane RIFF
>>n;quoted-printable:RIFF;St=C3=A9phane
>>org;quoted-printable:CERENE Services;Informatique et D=C3=A9veloppement
>>adr;quoted-printable:;;3, rue Archim=C3=A8de;La Chappelle
>>Saint-Luc;Aube;10600;FRANCE
>>email;internet:stephane.riff at cerene.fr
>>title:Informatique
>>tel;work:+33 3 25 74 11 78
>>tel;fax:+33 3 25 78 39 67
>>tel;cell:+33 6 32 84 37 79
>>note;quoted-printable:"Ce message peut contenir des informations
>>confidentielles et/ou=0D=0A=
>> prot=C3=A9g=C3=A9es. Il est =C3=A0 l'usage exclusif de son destinataire.=
>> Toute=0D=0A=
>> utilisation non autoris=C3=A9e peut =C3=AAtre illicite. Si vous recevez=
>> ce=0D=0A=
>> message par erreur, nous vous remercions d'en aviser
>>imm=C3=A9diatement=0D=0A=
>> l'exp=C3=A9diteur en utilisant la fonction r=C3=A9ponse de votre
>>gestionn=
>> aire=0D=0A=
>> de courrier =C3=A9lectronique."=0D=0A=
>> =0D=0A=
>> "This email may contain confidential information and/or copyright=0D=0A=
>> material. This email is intended for the use of the addressee
>>only.=0D=0A=
>> Any unauthorised use may be unlawful. If you receive this email by=0D=0A=
>> mistake, please advise the sender immediately by using the reply=0D=0A=
>> facility in your email software."
>>url:http://www.cerene.fr
>>version:2.1
>>end:vcard
>>
>>
>>_______________________________________________
>>ka-Map-users mailing list
>>ka-Map-users at lists.maptools.org
>>http://lists.maptools.org/mailman/listinfo/ka-map-users
>>
>>
>>
>>
>Quoted from:
>http://www.nabble.com/Overlay-mouse-handler-implementation-tf4684319.html#a13385555
>
>Hi Stéphane
>this is a variation of what I have done (see few posts down) but much simpler and more complete as it includes onmouseover and onmouseout, well done. You only forgot to say you need to write the handle function in the code, but this is pretty obvious, I used this to test:
>
>function pover( point_id ) {
> alert( point_id.pid );
> };
>
>and it works. Now the only thing I'd like to do is that when I click on my point ( or mouseover should be fine as well ) I can show to the user some informations related to the point in a better fashion that the windows form generated by the "alert" method, I do not pretend to have the bubble message with the arrow that point to the point ( although it would be nice to have ) like in Google Maps generated by the "openInfoWindow" and "openInfoWindowHtml" functions but a simple and small window that can possibly make more clear on which point the user has just clicked and with a possibility of some html formatting like <em> and href <a> elements. I tried to see what Google does but honestly it is obfusched so well which I can't understand any logic in the code, I also tried to see customization on the web but all are based on the presence of a GMap2 object ( Google Map object ) as base. I don't want the perfection but the "alert" function is honestly unaccettable from a user point of view and unfortunately my Javascript skills are not such good to write myself something from scratch without any external help. Any suggestion will be greatly appreciated.
>
>Kind Regards
>Rosario
>
>
>
>
--
Stéphane RIFF
stephane.riff at cerene.fr
CERENE SERVICES SA
3, rue Archimède
10600 La Chapelle-Saint-Luc - France
Tel : 33 (0)3 25 74 11 78
Fax : 33 (0)3 25 78 39 67
----------------------------
"Ce message peut contenir des informations confidentielles et/ou
protégées. Il est à l'usage exclusif de son destinataire. Toute
utilisation non autorisée peut être illicite. Si vous recevez ce
message par erreur, nous vous remercions d'en aviser immédiatement
l'expéditeur en utilisant la fonction réponse de votre gestionnaire
de courrier électronique."
"This email may contain confidential information and/or copyright
material. This email is intended for the use of the addressee only.
Any unauthorised use may be unlawful. If you receive this email by
mistake, please advise the sender immediately by using the reply
facility in your email software."
-------------- next part --------------
A non-text attachment was scrubbed...
Name: stephane.riff.vcf
Type: text/x-vcard
Size: 1282 bytes
Desc: not available
Url : http://lists.maptools.org/pipermail/ka-map-users/attachments/20071025/ed092448/stephane.riff.vcf
More information about the ka-Map-users
mailing list