Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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. :(

share|improve this question
add comment

2 Answers

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...

share|improve this answer
    
When I try this, e.feature.style == null. e.feature is an object, though. –  Pure.Krome Nov 9 '12 at 1:20
add comment

You mispelled default:

"deafult" : new OpenLayers.Style({
                    strokeColor: '#999999',
                    strokeOpacity: 1,
                    strokeWidth: 1,
                    fillColor: '#46461F',
                    fillOpacity: 0.10
                }),
share|improve this answer
    
I fixed up the typo - still doesn't work :( –  Pure.Krome Nov 8 '12 at 23:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.