Following Alexandre's suggestion, here's what I did:
... //in init()
map.addLayer(markers);
//add the main select (for regular popups)
select = new OpenLayers.Control.SelectFeature(markers, {toggle:true,
clickout: true});
markers.events.on({ "featureselected": onMarkerSelect,
"featureunselected": onMarkerUnselect});
//add the second select for tooltips:
var highlightCtrl = new OpenLayers.Control.SelectFeature(markers, {
hover: true, highlightOnly: true, renderIntent: "temporary",
eventListeners: { featurehighlighted: tooltipSelect,
featureunhighlighted: tooltipUnselect } });
//the order in which you add these lines seems to matter!
map.addControl(highlightCtrl);
map.addControl(select);
highlightCtrl.activate();
select.activate();
...//support functions
var lastFeature = null;
var tooltipPopup = null;
function tooltipSelect(event){
var feature = event.feature;
var selectedFeature = feature;
//if there is already an opened details window, don\'t draw the
tooltip
if(feature.popup != null){
return;
}
//if there are other tooltips active, destroy them
if(tooltipPopup != null){
map.removePopup(tooltipPopup);
tooltipPopup.destroy();
if(lastFeature != null){
delete lastFeature.popup;
tooltipPopup = null;
}
}
lastFeature = feature;
var tooltipPopup = new OpenLayers.Popup("activetooltip",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(80,12),
" "+feature.attributes.name,
true );
//this is messy, but I'm not a CSS guru
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
tooltipPopup.contentDiv.style.overflow='hidden';
tooltipPopup.contentDiv.style.padding='3px';
tooltipPopup.contentDiv.style.margin='0';
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
feature.popup = tooltipPopup;
map.addPopup(tooltipPopup);
}
function tooltipUnselect(event){
var feature = event.feature;
if(feature != null && feature.popup != null){
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
tooltipPopup = null;
lastFeature = null;
}
}
function onMarkerSelect(event) {
//unselect any previous selections
tooltipUnselect(event);
var feature = event.feature;
var selectedFeature = feature;
var popup = new OpenLayers.Popup.FramedCloud("activeAlarm",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"Loading...<img
src='http://$server/map/symbols/ajax-loader.gif' border=0>",
null, true, onMarkerPopupClose );
feature.popup = popup;
popup.setOpacity(0.7);
map.addPopup(popup);
//call ajax to get the data
loadDetails(feature.attributes.description);
}
function onMarkerUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
function onMarkerPopupClose(evt) {
select.unselectAll();
}
I hope this helps others trying to add this feature.
Thanks again for your help.
Regards,
Adrian
Alexandre Dube wrote:
> Hi Adrian,
>
> Take a look at this example (1). You can use 2 SelectFeature
> controls for what you need, one with hover:true and
> highlightOnly:true, the other with hover false. The first one won't
> actually select the feature and you can register 3 kinds of
> "highlight" events (see the source) to display your small div/popup.
>
> Hope this helps,
>
> Alexandre
>
> (1) http://openlayers.org/dev/examples/highlight-feature.html
>
> Adrian Popa wrote:
>> Hello everyone,
>>
>> This is sort of a repeat message of "Re: [OpenLayers-Users]
>> Labels/Tooltips on mouse over a Vector layer" - but with a slightly
>> different idea.
>>
>> Problem: I want to display a small div/popup with the marker's name
>> when the user hovers his mouse over the location, and I want to
>> display a bigger popup when the user actually clicks on the location.
>>
>> Current status:
>> * I can use {hover: true} to register
>> featureselected/featureunselected when I hover over a marker instead
>> on when I click on the maker.
>> * I haven't found any events that could differentiate between hover
>> and click
>>
>> I'm thinking I could register my select control with hover: true and
>> allow featureselected to execute the same function for both when I
>> click on the makrer as well as when I hover over the marker. I would
>> like to know if there's any way to find out in the event inside the
>> function if the user clicked or not his mouse. Depending on this, I
>> would show one popup or the other.
>>
>> Something like:
>>
>> select = new OpenLayers.Control.SelectFeature(markers,
>> {clickout:true, hover:true});
>> markers.events.on({ "featureselected": onMarkerSelect,
>> "featureunselected": onMarkerUnselect, "visibilitychanged":
>> onMarkerToggle });
>> map.addControl(select);
>> select.activate();
>>
>> function onMarkerSelect(event){
>> var feature = event.feature;
>> //find out if the user clicked or not
>> var clicked = event.*findAWayToSeeIfTheUserClicked()*;
>> if(clicked){
>> //show larger popup
>> }
>> else{
>> //show smaller popup
>> }
>> }
>>
>> Suggestions are welcome.
>>
>> Thanks,
>> Adrian
>> ------------------------------------------------------------------------
>>
>> _______________________________________________
>> Users mailing list
>> Users@openlayers.org
>> http://openlayers.org/mailman/listinfo/users
>>
>
>
--
---
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
Users@openlayers.org
http://openlayers.org/mailman/listinfo/users
