CODEWITHSUNDEEP
popupopenlayers
Question Overflow
Question Overflow

Reputation: 11275

How to show different popups on click and on mouseover?

The SelectFeature method in Control class provides a way of adding and removing popups on the Vector layer by listening to events featureselected and featureunselected respectively. Below shows a sample code that I obtained from an example in the openlayers website:

// create the layer with listeners to create and destroy popups
var vector = new OpenLayers.Layer.Vector("Points",{
 eventListeners:{
  'featureselected':function(evt){
   var feature = evt.feature;
   var popup = new OpenLayers.Popup.FramedCloud("popup",
    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
    null,
    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: </div>",
    null,
    true
   );
   feature.popup = popup;
   map.addPopup(popup);
  },
  'featureunselected':function(evt){
   var feature = evt.feature;
   map.removePopup(feature.popup);
   feature.popup.destroy();
   feature.popup = null;
  }
 }
});

vector.addFeatures(features);

// create the select feature control
var selector = new OpenLayers.Control.SelectFeature(vector,{
 hover:true, # this line
 autoActivate:true
});

The code above will allow a popup to be shown upon mouseover on the Geometry object (icon or marker on the map). If the line hover:true is removed, the popup will be shown only upon a mouse click on the Geometry object.

What I want, is to be able to display one type of popup (example, an image plus a title) upon mouseover and another type (example, detailed description) upon a mouse click. I am not sure how this could be done. Some help would be much appreciated. Thanks.

Upvotes: 2

Views: 4439

Answers (1)

user1702401
user1702401

Reputation: 1658

Also, there another way, it's rather hack than correct usage of API, but seems to work. You can overwrite over and out callbacks. 

var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, {

    callbacks: {
        over: function(feat) {
            console.log('Show popup type 1');
        },
        out: function(feat) {
            console.log('Hide popup type 1');
        }
    },

    eventListeners: {
        featurehighlighted: function(feat) {
            console.log('Show popup type 2');
        },
        featureunhighlighted: function(feat) {
            console.log('Hide popup type 2');
        }
    }    
});

Here's working example: http://jsfiddle.net/eW8DV/1/

Take a look on select control's source to understand details.

Upvotes: 3

Related Questions