1

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

3

You mispelled default:

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

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

  • When I try this, e.feature.style == null. e.feature is an object, though. – Pure.Krome Nov 9 '12 at 1:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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