OpenLayers KML – OpenLayers 2.12: How to Load KML from String and Change Marker Icons

kmlopenlayers-2

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!

Best Answer

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.

Related Question