OpenLayers 2.12 + KML from String + Change markers'icons

Question

Reading this post How to add KML data but from variable - not from url? I changed the way of reading KML files (from HTTP to a string loaded using jQuery)

/**
 * The OpenLayers object
 * @type {OpenLayers.Projection}
 * @var
 */
var geographic = new OpenLayers.Projection('EPSG:4326');

/**
 * The OpenLayers object
 * @type {OpenLayers.Projection}
 * @var
 */
var mercator = new OpenLayers.Projection('EPSG:900913');

****
success: function(data) {
    if (data != '') {
        var format = new OpenLayers.Format.KML({
            'internalProjection': mercator, //EPSG:3785/900913
            'externalProjection': geographic, //EPSG:4326
            extractStyles: true,
            extractAttributes: true
        });
        sFeatures = format.read(data);
    }
}

I would like to use the icons that come from the KML string, but when I click on a feature I would like to increase the size of the icon or even change it.

My Layer definition:

var hydrographsLayerVector = new OpenLayers.Layer.Vector('hydrographs', {
    //renderers: renderer,
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
            externalGraphic: "http://openlayers.org/dev/img/marker-green.png",
            graphicOpacity: 1,
            rotation: -45,
            pointRadius: 10
        }, OpenLayers.Feature.Vector.style["default"])),
        "select": new OpenLayers.Style({
            externalGraphic: "http://openlayers.org/dev/img/marker-blue.png"
        })
    })
});

If I remove the lines extractStyles and extractAttributes = true I see the effect using the styleMap defined in the new OpenLayers.Layer.Vector('hydrographs'*.

How can I use the styleMap:"select": if I use extractStyles and extractAttributes = true? Ideally, I would like to increase the size of the feature onmouseover and if the user clicks on it I want to keep the bigger size until the "unFeatureUnSelected".

Thanks!

Answer 1

Check my answer on stackoverflow on this subject. You have to switch extractStyles to false and work with the extracted attributes. Also, you need to map styles on a stylemap, I've put a lengthy answer in there with rules.

Answer 2

this codes can help you.

    var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
            {clickout: true}
        );

    map.addControl(selectCtrl);            
    selectCtrl.activate();

    vectors.events.on({
        featureselected: function (e) {
            console.log(e.feature.id);
            e.feature.style.pointRadius = 10;
            //or do what you want
            vectors.redraw();               
        },
        featureunselected: function (e) {
            console.log(e.feature.id);
            e.feature.style.pointRadius = 3;
            //or do what you want
            vectors.redraw();               
        }      
    });

i hope it helps you...