[OpenLayers-Users] Displaying a popup on mouse over AND a different popup on click. [SOLVED]

[Adrian Popa]

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 at 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