Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to add functionality to my WFS layer which will allow me to do:

  1. Hover over a point and display a tooltip with information about the feature
  2. Click on the point to zoom in on it

I have included my code below, which I borrowed from someone with a similar idea and then modified. Both of the controls work great on their own, but when I try to activate both I (usually) receive an error (it appears that sometimes the functionality works just as I would like it to, but sometimes it does not). Specifically, when I hover over a point, the point is highlighted and the tooltip appears, but when I click I get the following error in Firebug :

this.div is null OpenLayers.js (line 786)

Here is the code:

//add the main select for zooming
var select = new OpenLayers.Control.SelectFeature(wfsLayer);{ "featureselected": onMarkerSelect});

//add the second select for tooltips:
var highlightCtrl = new OpenLayers.Control.SelectFeature(wfsLayer, { 
hover: true, 
highlightOnly: true, 
renderIntent: "temporary",
eventListeners: { featurehighlighted: tooltipSelect, 
                  featureunhighlighted: tooltipUnselect } });

//the order in which you add these lines seems to matter!

//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){
    //if there are other tooltips active, destroy them
    if(tooltipPopup != null){
        if(lastFeature != null){
            delete lastFeature.popup;
            tooltipPopup = null;
    lastFeature = feature;
    var tooltipPopup = new OpenLayers.Popup("activetooltip",
                new OpenLayers.Size(80,12),
                " ",
                true );
     //this is messy, but I'm not a CSS guru'ffffcb';'ffffcb';'hidden';'3px';'0';
    tooltipPopup.closeOnMove = true;
    tooltipPopup.autoSize = true;
    feature.popup = tooltipPopup;

function tooltipUnselect(event){
    var feature = event.feature;
    if(feature != null && feature.popup != null){
        delete feature.popup;
        tooltipPopup = null;
        lastFeature = null;

function onMarkerSelect (event) {
    map.zoomToExtent(event.feature.geometry.getBounds(), closest=true);

I have tried calling the tooltipUnselect function inside the onMarkerSelect function in order to remove the effects of the hover select, but this was to no avail.

Does anybody have any suggestions?



share|improve this question
up vote 2 down vote accepted

comment out feature.popup.destroy(); on tooltipUnselect:

function tooltipUnselect(event){
    var feature = event.feature;
    if(feature != null && feature.popup != null){
        /*feature.popup.destroy();*/ <-- **** THE CULPRIT ****
        delete feature.popup;
        tooltipPopup = null;
        lastFeature = null;

As you can see here, destroy not only removes the popup, but nullifies references:

this.div = null;

If you hover over your feature carefully without triggering tooltipUnselect your code works fine. And that's where your inconsistencies come from.

share|improve this answer
Awesome, thank you! It works great now. – robc89 Dec 12 '12 at 21:32

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.