<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Hello Sajeer,<br>
<br>
When I try to use {hover: true} in the SelectFeature definition, the
popups appear and dissapear when I hover the mouse over a marker. If I
use hover:false, I get the regular functionality - the popups
appear/dissapear when I click on them.<br>
<br>
This is great... problem is - I would like to use both methods of
interaction: when the user hovers over a marker, he gets a small
div/popup with minimal information, and if the user clicks on the
marker he gets the whole information in a different popup.<br>
<br>
From what I've seen, and from your example, there are no special events
for mouseOver/mouseOut. It can be achieved with hover true/false. In
this case, the only sollution would be to create a different
selectControl for the same layer that handles just hover events. I
don't know if I can associate different select controls with the same
layer, or if I can have two controls active and working at the same
time (a previous example I tried with 2 select cotrols on different
layers didn't allow the "bottom" select to work).<br>
<br>
Here's what I tried so far:<br>
<br>
//markers is a KML layer<br>
map.addLayer(markers);<br>
//add the regular select behaviour<br>
select = new OpenLayers.Control.SelectFeature(markers);<br>
markers.events.on({ "featureselected": onMarkerSelect,
"featureunselected": onMarkerUnselect, "visibilitychanged":
onMarkerToggle });<br>
map.addControl(select);<br>
select.activate();<br>
<br>
//add the hover select control<br>
var hoverSelect = new OpenLayers.Control.SelectFeature(markers,
{clickout:true, hover:true, onSelect:
tooltipSelect}); <br>
map.addControl(hoverSelect);<br>
hoverSelect.activate();<br>
<br>
The behavior is the following: when I hover over an item,
tooltipSelect() is executed, but also onMarkerSelect(). It seems the
hover:true "jumps" to the select object :)<br>
Any ideas on how to get the behavior I need?<br>
<br>
Thanks.<br>
<br>
<br>
Regards,<br>
Adrian<br>
<br>
Sajeer... wrote:
<blockquote
cite="mid:43c3d3020907160644w60267b34h782baa1692cc21f9@mail.gmail.com"
type="cite">
<div dir="ltr">
<div>Ok, then replace
<p align="left">selectControl = <b><font color="#7f0055" size="2"><font
color="#7f0055" size="2">new</font></font></b><font size="2">
OpenLayers.Control.SelectFeature(kmlLayer,</font></p>
<p align="left">{hover: <b><font color="#7f0055" size="2"><font
color="#7f0055" size="2">true</font></font></b><font size="2">,onSelect:
onFeatureSelect, onUnselect: onFeatureUnselect});</font></p>
<p align="left">with</p>
<p align="left"><font size="2">selectControl = </font><b><font
color="#7f0055" size="2"><font color="#7f0055" size="2">new</font></font></b><font
size="2"> OpenLayers.Control.SelectFeature(kmlLayer,</font></p>
</div>
<div>
<p align="left"><font color="#3f7f5f" size="2"><font color="#3f7f5f"
size="2"><font color="#000000">{ </font><font color="#000000">clickout:
true, </font><font color="#000000">hover: false</font><font
color="#000000"> </font><font color="#000000">});</font></font></font></p>
<p align="left"> </p>
<p align="left"><font color="#3f7f5f" size="2"><font color="#3f7f5f"
size="2"><font color="#000000">and add this too</font></font></font></p>
<font color="#3f7f5f" size="2"><font color="#3f7f5f" size="2"><font
color="#3f7f5f" size="2"><font color="#3f7f5f" size="2">
<p align="left"><font color="#000000">kmlLayer.events.on({ </font></p>
<p align="left"><font color="#000000">"featureselected": function(e)
{ </font></p>
<p align="left"><font color="#000000">onFeatureSelect(e.feature); </font></p>
<p align="left"><font color="#000000">}, </font></p>
<p align="left"><font color="#000000">"featureunselected":
function(e) { </font></p>
<p align="left"><font color="#000000">onFeatureUnselect(e.feature); </font></p>
<p align="left"><font color="#000000">} </font></p>
<p><font color="#000000">});</font></p>
</font></font></font></font></div>
<div> </div>
<div> </div>
<div><br clear="all">
Regards<br>
<br>
Sajeer <br>
<br>
<br>
</div>
<div class="gmail_quote">On Thu, Jul 16, 2009 at 3:49 PM, Adrian Popa
<span dir="ltr"><<a moz-do-not-send="true"
href="mailto:adrian_gh.popa@romtelecom.ro">adrian_gh.popa@romtelecom.ro</a>></span>
wrote:<br>
<blockquote class="gmail_quote"
style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
<div text="#000000" bgcolor="#ffffff">Thank you Sajeer, <br>
<br>
To make it clear for me: you would register the "featureselected" event
for mouse over? Where do you specify hover:true/hover:false?<br>
I'd like to be able to keep featureselected for when the user actually
clicks on the feature - so I'd like to register 2 events to generate 2
different popups...<br>
<br>
Regards,<br>
<font color="#888888">Adrian</font>
<div>
<div class="h5"><br>
<br>
Sajeer... wrote:
<blockquote type="cite">
<div dir="ltr">
<div>you can register this function for click event by replacing <font
size="2">hover:true with hover:false </font><b><font
color="#7f0055" size="2"><font color="#7f0055" size="2"> </font></font></b></div>
<div> </div>
<div> </div>
<div><br clear="all">
Regards<br>
<br>
Sajeer <br>
<br>
<br>
<br>
</div>
<div class="gmail_quote">On Thu, Jul 16, 2009 at 3:38 PM, Adrian
Popa <span dir="ltr"><<a moz-do-not-send="true"
href="mailto:adrian_gh.popa@romtelecom.ro" target="_blank">adrian_gh.popa@romtelecom.ro</a>></span>
wrote:<br>
<blockquote class="gmail_quote"
style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
<div text="#000000" bgcolor="#ffffff">Hello Sajeer,<br>
<br>
How do you register your functions to events so that they are executed
on mouse over instead of on click? Or is your popup created when you
click a feature?<br>
<br>
Thanks,<br>
<font color="#888888">Adrian</font>
<div>
<div><br>
<br>
Sajeer... wrote:
<blockquote type="cite">
<div dir="ltr"><font size="2">
<div align="left"><font color="#3f7f5f" size="2"><font
color="#3f7f5f" size="2"><font color="#000000"><b><font color="#7f0055"
size="2"><font color="#7f0055" size="2">
<p align="left">Hi,</p>
<p align="left">try this one,</p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left">function</p>
</font></font></b></font></font><font size="2">onFeatureSelect(feature)
{</font><font size="2">
<p align="left">selectedFeature = feature;</p>
<p align="left">popup = </p>
</font><b><font color="#7f0055" size="2"><font color="#7f0055"
size="2">new</font></font></b></font></div>
</font><font size="2">OpenLayers.Popup.FramedCloud(</font><font
color="#2a00ff" size="2"><font color="#2a00ff" size="2">""</font></font><font
size="2">,
<p align="left">feature.geometry.getBounds().getCenterLonLat(),</p>
</font><b><font color="#7f0055" size="2"><font color="#7f0055"
size="2">new</font></font></b><font size="2">
OpenLayers.Size(100,100), </font><font color="#2a00ff" size="2"><font
color="#2a00ff" size="2">"<div style='padding:15px 5px 5px
10px;'>"</font></font><font size="2">+ </font><font color="#2a00ff"
size="2"><font color="#2a00ff" size="2">"<table
style='font-size:13px;color:red'>"</font></font><font size="2">+ </font><font
color="#2a00ff" size="2"><font color="#2a00ff" size="2">"<tr>"</font></font><font
size="2">+ </font><font color="#2a00ff" size="2"><font color="#2a00ff"
size="2">"<td width='40%'>Name</td>"</font></font><font
size="2">+ </font><font color="#2a00ff" size="2"><font color="#2a00ff"
size="2">"<td width='5%'>:</td>"</font></font><font
size="2">+ </font><font color="#2a00ff" size="2"><font color="#2a00ff"
size="2">"<td>"</font></font><font size="2">+feature.attributes.label+</font><font
color="#2a00ff" size="2"><font color="#2a00ff" size="2">"</td>"</font></font><font
size="2">+ </font><font color="#2a00ff" size="2"><font color="#2a00ff"
size="2">"</tr>"</font></font><font size="2">+</font><font
size="2"> </font><font color="#2a00ff" size="2"><font color="#2a00ff"
size="2">"</table></div>"</font></font><font size="2">, </font><b><font
color="#7f0055" size="2"><font color="#7f0055" size="2">null</font></font></b><font
size="2">, </font><b><font color="#7f0055" size="2"><font
color="#7f0055" size="2">true</font></font></b><font size="2">,
onPopupClose);
<p align="left">feature.popup = popup;</p>
</font><font size="2">map.addPopup(popup);
<p align="left">}</p>
</font><b><font color="#7f0055" size="2"><font color="#7f0055"
size="2">function</font></font></b><font size="2"> onPopupClose(evt) {
<p align="left">selectControl.unselect(selectedFeature);</p>
</font><font size="2">
<p align="left">}</p>
</font><b><font color="#7f0055" size="2"><font color="#7f0055"
size="2">function</font></font></b><font size="2">
onFeatureUnselect(feature) {</font>
<p align="left"><b><font color="#7f0055" size="2"><font
color="#7f0055" size="2"> </font></font></b><font size="2">map.removePopup(feature.popup);</font></p>
<p align="left">feature.popup.destroy();</p>
<p align="left">feature.popup = <b><font color="#7f0055"
size="2"><font color="#7f0055" size="2">null</font></font></b><font
size="2">;</font></p>
<p>}</p>
<p align="left"><font color="#000000">var</font><font
color="#000000"> kmlLayer = new OpenLayers.Layer.</font><font
color="#000000">GML(.............);</font></p>
</div>
<div align="left"> </div>
<div align="left">var selectControl = <b><font
color="#7f0055" size="2"><font color="#7f0055" size="2">new</font></font></b><font
size="2"> OpenLayers.Control.SelectFeature(kmlLayer,</font></div>
<p align="left">{hover: <b><font color="#7f0055" size="2"><font
color="#7f0055" size="2">true</font></font></b><font size="2">,onSelect:
onFeatureSelect, onUnselect: onFeatureUnselect});</font></p>
<font size="2">
<p align="left">map.addControl(selectControl);</p>
<p>selectControl.activate();</p>
</font>
<div><br clear="all">
Regards<br>
<br>
Sajeer</div>
<div><br>
<br>
</div>
<div class="gmail_quote">On Thu, Jul 16, 2009 at 3:07 PM,
Adrian Popa <span dir="ltr"><<a moz-do-not-send="true"
href="mailto:adrian_gh.popa@romtelecom.ro" target="_blank">adrian_gh.popa@romtelecom.ro</a>></span>
wrote:<br>
<blockquote class="gmail_quote"
style="border-left: 1px solid rgb(204, 204, 204); margin: 0px 0px 0px 0.8ex; padding-left: 1ex;">
<div text="#000000" bgcolor="#ffffff">Hello Pavel,<br>
<br>
Great idea... However - I would like to keep popups for when I click on
an item. <br>
Would it be possible to do something like:<br>
<br>
layer.events.on({ "featureselected": onLocationSelect,
"featureunselected": onLocationUnselect, //open regular popups<br>
"onMouseOver": onLocationMouseOver,
"onMouseOut": onLocationMouseOut<br>
});?<br>
<br>
Problem is - I don't see those kinds of events on my layer. These are
the event types for a vector layer:<br>
<span>0 "beforefeatureadded"</span>
<div>1 "beforefeaturesadded"</div>
<span></span>
<div>2 "featureadded"</div>
<span></span>
<div>3 "featuresadded"</div>
<span></span>
<div>4 "beforefeatureremoved"</div>
<span></span>
<div>5 "featureremoved"</div>
<span></span>
<div>6 "featuresremoved"</div>
<span></span>
<div>7 "beforefeatureselected"</div>
<span></span>
<div>8 "featureselected"</div>
<span></span>
<div>9 "featureunselected"</div>
<span></span>
<div>10 "beforefeaturemodified"</div>
<span></span>
<div>11 "featuremodified"</div>
<span></span>
<div>12 "afterfeaturemodified"</div>
<span></span>
<div>13 "vertexmodified"</div>
<span></span>
<div>14 "sketchstarted"</div>
<span></span>
<div>15 "sketchmodified"</div>
<span></span>
<div>16 "sketchcomplete"</div>
<span></span>
<div>17 "refresh"</div>
<span></span>
<div>18 "loadstart"</div>
<span></span>
<div>19 "loadend"</div>
<span></span>
<div>20 "loadcancel"</div>
<span></span>
<div>21 "visibilitychanged"</div>
<span></span>
<div>22 "move"</div>
<span></span>
<div>23 <span>"moveend"</span><br>
</div>
<br>
Any idea what the events would be? If they are supported?<br>
<br>
Pavel Iacovlev wrote:
<blockquote type="cite">
<pre>There many possible ways around this problem.
One is rewrite/extend your popup code. Popup is triggered on mouseover
and on mouseout popup is hidden. You can style the popup so it looks
more like a tooltip/label.
On Thu, Jul 16, 2009 at 2:34 PM, Adrian
Popa<a moz-do-not-send="true" href="mailto:adrian_gh.popa@romtelecom.ro"
target="_blank"><adrian_gh.popa@romtelecom.ro></a> wrote:
</pre>
<div>
<div>
<blockquote type="cite">
<pre>Hi,
Just a quick question - my users want to see the name of the city when
they are hovering over points loaded through KML in a vector layer. I
know this isn't supported, but are there plans to support such labels?
I'm thinking a different strategy might be to override/inherit the
OpenLayers.Control.MousePosition class and based on coordinate changes,
load the name from the closest KML feature. It doesn't need to be too
accurate, but it can't be an exact match, because the mouse will never
get that close to the KML coordinates.
However this solution will be costly - because on every mouse move you
would have to go through all the KML items and see which match...
What are your ideas regarding this subject?
---
Adrian Popa
NOC Division
Network Engineer
Divizia Centrul National de Operare Retea
Departament Transport IP & Metro
Compartiment IP Core & Backbone
Phone: +40 21 400 3099
_______________________________________________
Users mailing list
<a moz-do-not-send="true" href="mailto:Users@openlayers.org"
target="_blank">Users@openlayers.org</a>
<a moz-do-not-send="true"
href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a>
</pre>
</blockquote>
<pre> </pre>
</div>
</div>
</blockquote>
<br>
<br>
<pre cols="72">--
---
Adrian Popa
NOC Division
Network Engineer
Divizia Centrul National de Operare Retea
Departament Transport IP & Metro
Compartiment IP Core & Backbone
Phone: +40 21 400 3099
</pre>
</div>
<br>
_______________________________________________<br>
Users mailing list<br>
<a moz-do-not-send="true" href="mailto:Users@openlayers.org"
target="_blank">Users@openlayers.org</a><br>
<a moz-do-not-send="true"
href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
<br>
</blockquote>
</div>
<br>
</blockquote>
<br>
</div>
</div>
</div>
</blockquote>
</div>
<br>
</div>
</blockquote>
<br>
<br>
</div>
</div>
</div>
</blockquote>
</div>
<br>
</div>
</blockquote>
<br>
</body>
</html>