onSelect sometimes firing before onUnselect

Question

I have a map that displays satellite coverage zones. Some of these coverages overlap. I am using the SelectFeature functionality to fire off onSelect and onUnselect events.

However, when moving from one feature to another (without moving on the map itself first), the onSelect method sometimes fires before the onUnselect method. As the onUnselect method is being used to clear a popup created as part of the onSelect method, this means that sometimes the popup is created and then destroyed, rather than destroyed and then created.

Any ideas? Below is a snippet of the relevant portion of code (in CoffeeScript):

beams = JSON.parse localStorage.getItem("beams")
$.each beams, (i, item) ->
    beamTrendData = getTrendData4Beam item.ShortName
    beamStatus = getBeamStatus beamTrendData
    switch beamStatus
        when "green"
            style = styleMapGreen
        when "orange"
            style = styleMapOrange
        when "red"
            style = styleMapRed
    #if (item.ShortName is "G17") or (item.ShortName is "T14R") or (item.ShortName is "A5") or (item.ShortName is "YAM") or (item.ShortName is "IS14") or (item.ShortName is "W7")
    #   visible = true
    #else
    visible = true
    coverageLayer = new OpenLayers.Layer.Vector(item.ShortName,
        strategies: [ new OpenLayers.Strategy.Fixed() ]
        visibility: visible
        protocol: new OpenLayers.Protocol.HTTP(
            url: "resources/satelliteFootprints/" + item.OuterBeamEIRPKML
            format: new OpenLayers.Format.KML(
                extractStyles: false
                extractAttributes: false
                maxDepth: 2
            )
        )
        styleMap: style
    )
    Application.map.addLayer coverageLayer
    Application.hoverControl = new OpenLayers.Control.SelectFeature coverageLayer,
        multiple: false
        hover: true
        toggle: true
        clickout: false
        onSelect: beamSelect
        onUnselect: beamUnselect
        callbacks:
            click: (feature) -> beamClick feature
    Application.map.addControl Application.hoverControl
    Application.hoverControl.activate()

I'm basically adding several KML layers, and for each one associating a SelectFeature object that in theory triggers events for both hover over and click (as I want to add different functionality to the hover and click events). In IE9 (other than unselect and select sometimes firing in the wrong order) it all seems to work just fine. Strangely though for any other browser the events only fire on the topmost layer.

EDIT: I fixed the cross browser issue, by taking the adding of the hoverControl out of the loop and simply adding it an array containing the vector layers all at once. So:

beams = JSON.parse localStorage.getItem("beams")
beamFeatures = [];    # <------------
$.each beams, (i, item) ->
    beamTrendData = getTrendData4Beam item.ShortName
    beamStatus = getBeamStatus beamTrendData
    switch beamStatus
        when "green"
            style = styleMapGreen
        when "orange"
            style = styleMapOrange
        when "red"
            style = styleMapRed
    #if (item.ShortName is "G17") or (item.ShortName is "T14R") or (item.ShortName is "A5") or (item.ShortName is "YAM") or (item.ShortName is "IS14") or (item.ShortName is "W7")
    #   visible = true
    #else
    visible = true
    coverageLayer = new OpenLayers.Layer.Vector(item.ShortName,
        strategies: [ new OpenLayers.Strategy.Fixed() ]
        visibility: visible
        protocol: new OpenLayers.Protocol.HTTP(
            url: "resources/satelliteFootprints/" + item.OuterBeamEIRPKML
            format: new OpenLayers.Format.KML(
                extractStyles: false
                extractAttributes: false
                maxDepth: 2
            )
        )
        styleMap: style
    )
    Application.map.addLayer coverageLayer
    beamFeatures.push coverageLayer    # <------------

Application.hoverControl = new OpenLayers.Control.SelectFeature beamFeatures,
    multiple: false
    hover: true
    toggle: true
    clickout: false
    onSelect: beamSelect
    onUnselect: beamUnselect
    callbacks:
        click: (feature) -> beamClick feature
Application.map.addControl Application.hoverControl
Application.hoverControl.activate()

I haven't checked yet whether the select and unselect events fire in the right order all the time yet.

Thanks, Kurt

Answer 1

I can not say anything correctly without seeing the code but d'u use hover in selectFeature? hover: false

and try to add your OpenLayers.Control.SelectFeature code clickout : true to unselect features when clicking outside any feature.

you dont only have to use onSelect and onUnSelect, you can try to use featureselected/featureunselected event too..

       vector.events.on({
            "featureselected": function(e) {
                alert(e.feature.id)
            },
            "featureunselected": function(e) {
                console.log("Feature Unselected")
            }
        });

you can also glance at this for some idea which is the at the bottom of the page.

i can update my answer if a see your code...

i hope it helps you...

Answer 2

I bet that this will influence the rate/occurrence of this behavior:

on your style, try and set this:

  pointerEvents: "all"

instead of

  pointerEvents: "visiblePainted"  /* (= default) */

It will not be totally gone but it will reduce this glitch. See here for more options you can try for the pointerEvents. Try them, some have weird outcomes.