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",
            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}});


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.


1 Answer 1


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

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
  • That is exactly what was wrong! Can't believe I kept on looking over it. Thank you sir, you saved me a lot of hairpulling today./ Commented Dec 19, 2012 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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