[ka-Map-users] Overlay mouse handler implementation
The Bun
rosario.carbone at ipl.com
Thu Oct 25 12:01:09 EDT 2007
Stéphane RIFF wrote:
>
> 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 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."
>
>
> 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
>
>
Hi Stéphane
I implemented the kaToolTip in kaXmlOverlay, I did in loadXmlDoc, keep in
mind I am using the CVS release. First I embedded a tootTip object in
kaXmlPoint then I did this way:
blah blah blah
np.xml_overlay.handler_onclick = function ( np ) {
np.toolTip.setText(np.pid);
np.toolTip.moveGeo(np.geox,np.geoy);
};
blah blah blah
and seems to work a bit funny though :-), the window never get to the point
and when program exit from the event handler ( the above function ) the
window is closed. I'd like at least to leave the window open and as soon the
user click on another point or anywhere else in the map the windon is
closed, but I have no idea how to implement that, any help would be
appreciated :-).
Regards
Rosario
--
View this message in context: http://www.nabble.com/Overlay-mouse-handler-implementation-tf4684319.html#a13409305
Sent from the ka-map-users mailing list archive at Nabble.com.
More information about the ka-Map-users
mailing list