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

[Adrian Popa]

Hello Esteban,

Most likely after the popup closes there is a javascript error in your 
page and navigation breaks (zooming in/out shouldn't work at this 
point). Use firebug to see if you get an error in the console.

Esteban olm wrote:
Hi,

I'm sorry, but I have a problem.

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.

That's ok, but after the popup has appear an disappear, now I can not 
"pan" the map.
Maybe the popup has deactivated something.
Can anyone help me?
Thanks
  Esteban Olm


after a popup is how

2009/8/5 Adrian Popa <adrian_gh.p...@romtelecom.ro 
<mailto:adrian_gh.p...@romtelecom.ro>>

    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),
                       "&nbsp;"+feature.attributes.name
    <http://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 <mailto: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 <mailto:Users@openlayers.org>
    http://openlayers.org/mailman/listinfo/users



_______________________________________________
Users mailing list
Users@openlayers.org
http://openlayers.org/mailman/listinfo/users