Registering onclick handler for *all* KML features in OpenLayers

Question

I am new to using OpenLayers with JQuery to display vector data from KML files. I'm creating the layer like this:

newlayer = new OpenLayers.Layer.Vector( layerid, {
    projection: MAPVAR.displayProjection,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: layerurl,
        format: new OpenLayers.Format.KML({
            extractStyles: true, 
            extractAttributes: true,
            maxDepth: 2
        })
      }) 
    });

I want to avoid using these vector features with the OpenLayers.Control.SelectFeature control. Instead i would like to have each svg feature respond to a click event and pop open their own individual windows with the attributes.

I'm having trouble figuring out how to add the onclick function to ALL the vector features loaded.

For example, I can attach a function to the KML layer's "loadend" event and add the onclick function doing the following:

$('g[id$=vroot] > *').css("cursor", "pointer")
$('g[id$=vroot] > *').click(function(evt){ $w = $.WM_open(); $w.find('.windowcontent').append("SUCKER"); });

But this will only apply the handler to those vector elements in the view extent and not the ones that are waiting to be rendered in the HTML. I'm not sure how to access the unrendered ones -- they are in the DOM.

I've come up with a poor workaround to this problem, but I know there has to be a better way.

Is there some way I can dynamically create the "onclick" handler for each svg feature when they are getting parsed?

Would that require me to subclass OpenLayers.Layers.Vector or OpenLayers.Formats.KML?

Does anyone have an example or recommendation on other ways?

---

I still have not solved adding the onclick handler to the features. But i was able to override OpenLayers.Format.KML parseData() to add a pointer cursor to the feature styles before the loadend runs on the KML layer (additions demarcated with *** EDITS ***).

var FormatErmaKml = OpenLayers.Class(OpenLayers.Format.KML, { 
parseData: function (data, b) { 
    typeof data == "string" && (data = OpenLayers.Format.XML.prototype.read.apply(this, [data]));
    for (var c = ["Link", "NetworkLink", "Style", "StyleMap", "Placemark"], d = 0, e = c.length; d < e; ++d) {
        var f = c[d];
        var g = this.getElementsByTagNameNS(data, "*", f);  
        if (g.length != 0) switch (f.toLowerCase()) {
        case "link":
        case "networklink":
            this.parseLinks(g, b);  
            break;
        case "style":
            this.extractStyles && this.parseStyles(g, b);  
            break;
        case "stylemap":
            this.extractStyles && this.parseStyleMaps(g, b);  
            break;
        case "placemark":
            this.parseFeatures(g, b)
        }    
  
    }    
    **** EDITS BEGIN ****
    for(var count = 0; count < this.features.length; ++count){
            f = this.features[count];
            f.style.cursor = "pointer";
    }
    **** END EDITS ****
    return this.features
},});

Answer 1

I believe i found the solution.

SOLUTION DEMONSTRATION

It will:

1. change the cursor for your feature to cursor:wait using jquery.
2. It will change the svg fill color of the feature using jquery.
3. And best of all it's efficient and will NOT trigger anything or disrupt anything else as far as my tests have shown.

Use a regular click Handler (EXAMPLE1, EXAMPLE2) and use the e.target to get the object on the map. If it returns a vector feature great, if not, ignore. It can work for all your layers or you can check the returned feature to see if it belongs to a layer you want it to trigger on.

I used Example #1 and replaced the latlon alert for this:

    if (e.target._featureId) {
        var feature = vectorLayer.getFeatureById(e.target._featureId);
        $(e.target).css('fill', '#000000');
        $(e.target).css('cursor', 'wait');
        $("div#info").append("<span>You just clicked on " + feature.id + "<span><br />");
    }

Answer 2

This is not an answer to your original question but show you how to define a cursor on all the features on a layer:

newlayer = new OpenLayers.Layer.Vector(layerid, {
    projection: MAPVAR.displayProjection,
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            strokeColor: '#000000',
            strokeOpacity: .3,
            strokeWidth: 2,
            fillColor: '#000000',
            fillOpacity: 0,
            cursor: "pointer"
        })
    }),
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: layerurl,
        format: new OpenLayers.Format.KML({
            extractStyles: true,
            extractAttributes: true,
            maxDepth: 2
        })
    })
});

---

Here's an EXAMPLE

Answer 3

-- edited 1/19 9:45am per @capdragon's comment

Why add on-click to each feature? That is far too expensive. Why not add it to the layer?

Then the 2nd question is, how to add same handler to multiple layers.

1. Create one click handler
2. Keep an in-memory array of layers that you pass to this handler
3. Update click handler whenever a new layer is added or removed
4. Create all your handler functions, and inside the on-click you can find out easily what feature was clicked on

1)

var hoverAndClickControl = new OpenLayers.Control.SelectFeature(
                mylayers // this is the array of layers you're keeping in memory
                ,{
                    callbacks:
                    {
                          click: onFeatureSelect
                        , clickout: onFeatureUnselect
                        , over:  onFeatureHover
                        , out: onFeatureUnhover
                    }
                }
            );

3)

function addLayerToHandler(p_layer)
{
   // add layer to array
   // e.g. mylayers.push(p_layer);

   // update click handler
   // handler.setLayers(mylayers);  // since OL 2.9

}

4)

function onFeatureSelect(p_feature)
{
  // hey, feature you want is the parameter.  do whatever you need to do 

  // create a pop-up balloon, or send data to server, alert user, write out data, etc
}