[OpenLayers-Users] Displaying a popup on mouse over AND a
different popup on click. [SOLVED]
Adrian Popa
adrian_gh.popa at romtelecom.ro
Fri Aug 14 01:32:07 EDT 2009
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.popa at romtelecom.ro
> <mailto: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),
> " "+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 at openlayers.org <mailto: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 <mailto: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/20090814/ba6c580d/attachment.html
More information about the Users
mailing list