Hi,<br><br>I'm sorry, but I have a problem.<br><br>When I implement this, I can "pan" the map, and when I go over a marker, A popup appears, and when I go out of the marker, the popup disappear.<br><br>That's ok, but after the popup has appear an disappear, now I can not "pan" the map.<br>
Maybe the popup has deactivated something.<br>Can anyone help me?<br>Thanks<br> Esteban Olm<br><br><br>after a popup is how<br><br><div class="gmail_quote">2009/8/5 Adrian Popa <span dir="ltr"><<a href="mailto:adrian_gh.popa@romtelecom.ro">adrian_gh.popa@romtelecom.ro</a>></span><br>
<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Following Alexandre's suggestion, here's what I did:<br>
<br>
... //in init()<br>
map.addLayer(markers);<br>
//add the main select (for regular popups)<br>
select = new OpenLayers.Control.SelectFeature(markers, {toggle:true,<br>
clickout: true});<br>
markers.events.on({ "featureselected": onMarkerSelect,<br>
"featureunselected": onMarkerUnselect});<br>
<br>
//add the second select for tooltips:<br>
var highlightCtrl = new OpenLayers.Control.SelectFeature(markers, {<br>
hover: true, highlightOnly: true, renderIntent: "temporary",<br>
eventListeners: { featurehighlighted: tooltipSelect,<br>
featureunhighlighted: tooltipUnselect } });<br>
<br>
//the order in which you add these lines seems to matter!<br>
map.addControl(highlightCtrl);<br>
map.addControl(select);<br>
highlightCtrl.activate();<br>
select.activate();<br>
<br>
...//support functions<br>
var lastFeature = null;<br>
var tooltipPopup = null;<br>
<br>
function tooltipSelect(event){<br>
var feature = event.feature;<br>
var selectedFeature = feature;<br>
//if there is already an opened details window, don\'t draw the<br>
tooltip<br>
if(feature.popup != null){<br>
return;<br>
}<br>
//if there are other tooltips active, destroy them<br>
if(tooltipPopup != null){<br>
map.removePopup(tooltipPopup);<br>
tooltipPopup.destroy();<br>
if(lastFeature != null){<br>
delete lastFeature.popup;<br>
tooltipPopup = null;<br>
}<br>
}<br>
lastFeature = feature;<br>
var tooltipPopup = new OpenLayers.Popup("activetooltip",<br>
feature.geometry.getBounds().getCenterLonLat(),<br>
new OpenLayers.Size(80,12),<br>
"&nbsp;"+<a href="http://feature.attributes.name" target="_blank">feature.attributes.name</a>,<br>
true );<br>
//this is messy, but I'm not a CSS guru<br>
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';<br>
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';<br>
tooltipPopup.contentDiv.style.overflow='hidden';<br>
tooltipPopup.contentDiv.style.padding='3px';<br>
tooltipPopup.contentDiv.style.margin='0';<br>
tooltipPopup.closeOnMove = true;<br>
tooltipPopup.autoSize = true;<br>
feature.popup = tooltipPopup;<br>
map.addPopup(tooltipPopup);<br>
}<br>
function tooltipUnselect(event){<br>
var feature = event.feature;<br>
if(feature != null && feature.popup != null){<br>
map.removePopup(feature.popup);<br>
feature.popup.destroy();<br>
delete feature.popup;<br>
tooltipPopup = null;<br>
lastFeature = null;<br>
}<br>
}<br>
<br>
function onMarkerSelect(event) {<br>
//unselect any previous selections<br>
tooltipUnselect(event);<br>
var feature = event.feature;<br>
var selectedFeature = feature;<br>
var popup = new OpenLayers.Popup.FramedCloud("activeAlarm",<br>
feature.geometry.getBounds().getCenterLonLat(),<br>
new OpenLayers.Size(100,100),<br>
"Loading...<img<br>
src='http://$server/map/symbols/ajax-loader.gif' border=0>",<br>
null, true, onMarkerPopupClose );<br>
feature.popup = popup;<br>
popup.setOpacity(0.7);<br>
map.addPopup(popup);<br>
//call ajax to get the data<br>
loadDetails(feature.attributes.description);<br>
}<br>
function onMarkerUnselect(event) {<br>
var feature = event.feature;<br>
if(feature.popup) {<br>
map.removePopup(feature.popup);<br>
feature.popup.destroy();<br>
delete feature.popup;<br>
}<br>
}<br>
function onMarkerPopupClose(evt) {<br>
select.unselectAll();<br>
}<br>
I hope this helps others trying to add this feature.<br>
<br>
Thanks again for your help.<br>
<br>
Regards,<br>
Adrian<br>
<br>
Alexandre Dube wrote:<br>
> Hi Adrian,<br>
><br>
> Take a look at this example (1). You can use 2 SelectFeature<br>
> controls for what you need, one with hover:true and<br>
> highlightOnly:true, the other with hover false. The first one won't<br>
> actually select the feature and you can register 3 kinds of<br>
> "highlight" events (see the source) to display your small div/popup.<br>
><br>
> Hope this helps,<br>
><br>
> Alexandre<br>
><br>
> (1) <a href="http://openlayers.org/dev/examples/highlight-feature.html" target="_blank">http://openlayers.org/dev/examples/highlight-feature.html</a><br>
><br>
> Adrian Popa wrote:<br>
>> Hello everyone,<br>
>><br>
>> This is sort of a repeat message of "Re: [OpenLayers-Users]<br>
>> Labels/Tooltips on mouse over a Vector layer" - but with a slightly<br>
>> different idea.<br>
>><br>
>> Problem: I want to display a small div/popup with the marker's name<br>
>> when the user hovers his mouse over the location, and I want to<br>
>> display a bigger popup when the user actually clicks on the location.<br>
>><br>
>> Current status:<br>
>> * I can use {hover: true} to register<br>
>> featureselected/featureunselected when I hover over a marker instead<br>
>> on when I click on the maker.<br>
>> * I haven't found any events that could differentiate between hover<br>
>> and click<br>
>><br>
>> I'm thinking I could register my select control with hover: true and<br>
>> allow featureselected to execute the same function for both when I<br>
>> click on the makrer as well as when I hover over the marker. I would<br>
>> like to know if there's any way to find out in the event inside the<br>
>> function if the user clicked or not his mouse. Depending on this, I<br>
>> would show one popup or the other.<br>
>><br>
>> Something like:<br>
>><br>
>> select = new OpenLayers.Control.SelectFeature(markers,<br>
>> {clickout:true, hover:true});<br>
>> markers.events.on({ "featureselected": onMarkerSelect,<br>
>> "featureunselected": onMarkerUnselect, "visibilitychanged":<br>
>> onMarkerToggle });<br>
>> map.addControl(select);<br>
>> select.activate();<br>
>><br>
>> function onMarkerSelect(event){<br>
>> var feature = event.feature;<br>
>> //find out if the user clicked or not<br>
>> var clicked = event.*findAWayToSeeIfTheUserClicked()*;<br>
>> if(clicked){<br>
>> //show larger popup<br>
>> }<br>
>> else{<br>
>> //show smaller popup<br>
>> }<br>
>> }<br>
>><br>
>> Suggestions are welcome.<br>
>><br>
>> Thanks,<br>
>> Adrian<br>
>> ------------------------------------------------------------------------<br>
>><br>
>> _______________________________________________<br>
>> Users mailing list<br>
>> <a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
>> <a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
>><br>
><br>
><br>
<br>
<br>
--<br>
---<br>
Adrian Popa<br>
NOC Division<br>
Network Engineer<br>
Divizia Centrul National de Operare Retea<br>
Departament Transport IP & Metro<br>
Compartiment IP Core & Backbone<br>
Phone: +40 21 400 3099<br>
<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@openlayers.org">Users@openlayers.org</a><br>
<a href="http://openlayers.org/mailman/listinfo/users" target="_blank">http://openlayers.org/mailman/listinfo/users</a><br>
</blockquote></div><br>