[GIS] How to highlight kml features in openlayers

kmlopenlayers-2

I'm trying to make the features from a kml layer highlight on hover, but it doesn't seem to work for me. On the other hand, if i create a vector layer with a polygon feature it works just fine. I made an example with kml and polygon feature just to try to figure out what the difference is. Does anyone know what I am missing?
This is the .js code:

var map;

function init(){
        map = new OpenLayers.Map('map');

        var kml = new OpenLayers.Layer.Vector ('Australia Boundaries',{isBaseLayer:true, protocol: new OpenLayers.Protocol.HTTP ({url: 'kml/australia.kml', format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true})}),projection: new OpenLayers.Projection("EPSG:4326"), strategies: [new OpenLayers.Strategy.Fixed()]});
        map.addLayers([kml]);

    //create vector layer with a polygon feature

        var vector = new OpenLayers.Layer.Vector('Vector', {projection: new OpenLayers.Projection("EPSG:4326") });

        var point = new OpenLayers.Geometry.Point(90.752725,10.475584);
        var pointList = [];
        for(var p=0; p<6; ++p) {
            var a = p * (2 * Math.PI) / 7;
            var r = Math.random(1) + 20;
            var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
                                                         point.y + (r * Math.sin(a)));
            pointList.push(newPoint);
        }
        pointList.push(pointList[0]);

        var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
        var polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linearRing]));
        vector.addFeatures([polygonFeature]);
        map.addLayer(vector);

   //create highlight and select controls for the vector and kml layers

        var highlightCtrlVector = new OpenLayers.Control.SelectFeature(vector, {
            hover: true,
            highlightOnly: true, 
            renderIntent: 'temporary'});

        var selectCtrlVector = new OpenLayers.Control.SelectFeature(vector,
            {clickout: true}
        );
        var highlightCtrlKml = new OpenLayers.Control.SelectFeature(kml, {
            hover: true,
            highlightOnly: true,
            renderIntent:'temporary'});

        var selectCtrlKml = new OpenLayers.Control.SelectFeature(kml,
            {clickout: true}
        );
        map.addControl(highlightCtrlVector);
        map.addControl(selectCtrlVector);
        map.addControl(highlightCtrlKml);
        map.addControl(selectCtrlKml);
        highlightCtrlVector.activate();
        highlightCtrlKml.activate();
        selectCtrlVector.activate();
        selectCtrlKml.activate();

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
    }

And here is the example: http://geoteste.comli.com/app/indexTest.html

Best Answer

Unfortunately, you can have only one SelectFeature control on your map (or one normal and one for highlighting). For testing purposes, don't activate highlightCtrlVector and selectCtrlVector - can you select from KML layer now?

You can add multiple layers to same select control:

var highlightCtrl = new OpenLayers.Control.SelectFeature([vector, kml], { ...
var selectCtrl = new OpenLayers.Control.SelectFeature([vector, kml], { ...

If you are using callbacks on select events, examine selected feature and you can distinguish, in what layer it is. For example:

selectControl.events.on({
    featurehighlighted: function(evt) {
        if (evt.feature.layer.id == yourKMLlayerID) 
            ...
    }
})
Related Question