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

[Esteban olm]

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.popa at 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,
>                    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
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090813/c337c23a/attachment.html