1

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

| improve this question | | | | |
1

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

/*svg*/
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
| 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 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.