OpenLayers polygon fill not working with GeoJSON file as source

Question

I'm trying to visualise some data in a custom shape on a map, and I'm stuck with styling it. I'm currently using the openlayers framework in combination with a geoJSON file that I generate in code. I've spent a whole day trying to get a fill or stroke on the shapes I have made,but without success.

An example of my problem can be found here It would be great if anybody could spot what I am clearly doing wrong.

Here's how I define a style: I want to fill the shapes with a color depending on their value. I've set their value as an attribute, as needed.

var myStyles = new OpenLayers.StyleMap({ 
"default": new OpenLayers.Style({ 
            strokeDashstyle: "dash",
            fill:true,
            fillColor: "${getColor}",                         
            strokeColor: "${getColor}", 
            strokeWidth: 2,
            fillOpacity: 1, 
            graphicZIndex: 1 
        },
        {
            context: {
                getColor : function (feature) {
                    var value = parseFloat(feature.attributes.value)

                    return value > 3100 ? '#FFFF00' :
                           value > 3000 ? '#BD0026' :
                           value > 2900 ? '#E31A1C' :
                           value > 2800 ? '#FC4E2A' :
                                          '#FFEDA0' ;
                }
            } 
        })
   }); 

After defining a style, I'm adding a layer to the map that's coupled with that styleMap and my GeoJson data

//add collection of features to the map
var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {styleMap:             myStyles,rendererOptions: {zIndexing: true}});

geojson_layer.addFeatures(geojson_format.read(collection));
map.addLayers([geojson_layer,layer]);

Although I'm a newbie in this area, I'm quite sure my geoJSON file is well-formatted.

I basically want to have a different fillColor for the shapes that I defined in the geoJSON file according to their value. At this moment I can't event get a regular fillColor for any of them. Any help will be greatly appreciated.

Pepijn

Answer 1

Presentig root of evil (that overwrites styleMap's style), remove this css:

/*svg*/
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}