Hovering of a shape with OpenLayers doesn't un-highlight the shape

Question

So I've got a list of shapes (zipcodes) which I'm trying to display on an OpenLayers Google map.

They render fine. When I hover over them, the shape colour changes. Great! when i -leave- the shape, the colour doesn't revert back the original shape colour. Can someone help me out?

Here's my code..

1. Render each shape to the map.

// NOTE: shapeData is an array of objects.
function renderShapes(shapeData) {
    for (var i = 0; i <= shapeData.length; i++) {
        addShape(shapeData[i]);
    }
}

2. Add the shape.

function addShape(data) {
    if (!data) return;

    if (shapeLayer == null) {
        setupShapeLayer();
    }

    // Reference: http://dev.openlayers.org/docs/files/OpenLayers/Format-js.html#OpenLayers.Format.externalProjection
    // This reprojects the WKT from GPS to Google Maps format. Yes, external == the source.
    var format = new OpenLayers.Format.WKT({
        'externalProjection': new OpenLayers.Projection('EPSG:4326'),
        'internalProjection': map.baseLayer.projection
    });

    var feature = format.read(data.WellKnownText);
    shapeLayer.addFeatures(feature);

    var highlightControl = new OpenLayers.Control.SelectFeature(shapeLayer, {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary"
    });

    map.addControl(highlightControl);
    highlightControl.activate();
}

3. Create the layer where all the shapes will exist, in.

function setupShapeLayer() {
    shapeLayer = new OpenLayers.Layer.Vector(shapeLayerName, {
        styleMap: new OpenLayers.StyleMap({
            "deafult" : new OpenLayers.Style({
                strokeColor: '#999999',
                strokeOpacity: 1,
                strokeWidth: 1,
                fillColor: '#46461F',
                fillOpacity: 0.10
            }),
            "temporary" : new OpenLayers.Style({
                strokeColor: '#2d9908',
                strokeOpacity: 1,
                strokeWidth: 1,
                fillColor: '#3eb216',
                fillOpacity: 0.60
            })
        }),
        rendererOptions: { zIndexing: true }
    });

    map.addLayer(shapeLayer);
    shapeLayer.setZIndex(1);
}

As I said, the highlight works .. it goes from yellowish to green. but it doesn't revert back to the original default style. :(

Answer 1

You mispelled default:

"deafult" : new OpenLayers.Style({
                    strokeColor: '#999999',
                    strokeOpacity: 1,
                    strokeWidth: 1,
                    fillColor: '#46461F',
                    fillOpacity: 0.10
                }),

Answer 2

If you want to use, and this is an alternative method:

var changeColor = function(e) {
                e.feature.style.fillColor = '#2d9908';
                vectors.redraw();
            };

var revertColor= function(e) {
                e.feature.style.fillColor = '#46461F';
                vectors.redraw();
            };

var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
                hover: true,
                highlightOnly: true,                
                eventListeners: {                   
                    featurehighlighted: changeColor,
                    featureunhighlighted: revertColor
                }
            });


map.addControl(highlightControl);
highlightControl.activate();

i hope it helps you...