Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

However, you can see an example of my problem at . If you go to the developer console then you will see this geoJSON file logged there.

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.


share|improve this question
up vote 1 down vote accepted

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

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
share|improve this answer
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./ – Pepijn Olivier Dec 19 '12 at 8:33

Your Answer


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.