Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm experimenting with dynamically setting the color values of a geojson polygon. In my geojson file, there is an attribute for each polygon called pop_den. I am trying to update the fillcolor of the polygon base on the value of an attribute in the geojson file. I have a function getColor() that returns a color, based on the input value.

getColor = function (d) {

    return d > 35000 ? '#800026' :
           d > 30000 ? '#BD0026' :
           d > 25000 ? '#E31A1C' :
           d > 20000 ? '#FC4E2A' :
           d > 15000 ? '#FD8D3C' :
           d > 10000 ? '#FEB24C' :
           d > 5000  ? '#FED976' :
                       '#FFEDA0' ;
} 

When I define my StyleMap I am attempting to call this function, so that the appropriate color is set, based on the value of this attribute for each polygon:

var myStyles = new OpenLayers.StyleMap({ 
     "default": new OpenLayers.Style({ 
                        fillColor: "${getColor(pop_den)}",                         
                        strokeColor: "#00FF01", 
                        fillOpacity: 0.5, 
                        graphicZIndex: 1 
                    })
               });               

var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {styleMap: myStyles});

This does not work, and I am not sure if it is possible to call a function from with the style file using ${getColor(pop_den)}. I also tried fillColor: getColor(pop_den) but I get an error that pop_den is not defined. Can this approach work? I'm not clear on how the StyleMap works exactly when an argument is passed in using ${}.

I am aware of more sophisticated ways of doing this using MapServer, but I am curious to test this approach using small amounts of data to understand what the pros/cons of this approach are.

share|improve this question
    
crschmidt.net/mapping/choropleth.html is using rules based on attribution in the GeoJSON file. –  Mapperz Nov 9 '12 at 19:55
    
I was also curious if there was a more concise way of achieving this, other than the rule definition as the code becomes extremely long, quickly. –  djq Nov 9 '12 at 20:06
    
I found a useful example here also that uses the approach that @Captdragon suggested: openlayers.org/dev/examples/styles-context.html –  djq Nov 9 '12 at 22:32

1 Answer 1

up vote 6 down vote accepted

Placing it within a context should work. Something like this:

var myStyles = new OpenLayers.StyleMap({ 
     "default": new OpenLayers.Style({ 
                fillColor: "${getColor}",                         
                strokeColor: "#00FF01", 
                fillOpacity: 0.5, 
                graphicZIndex: 1 

            },
            {
                context: {
                    getColor : function (feature) {
                        return feature.attributes.pop_den > 35000 ? '#800026' :
                               feature.attributes.pop_den > 30000 ? '#BD0026' :
                               feature.attributes.pop_den > 25000 ? '#E31A1C' :
                               feature.attributes.pop_den > 20000 ? '#FC4E2A' :
                               feature.attributes.pop_den > 15000 ? '#FD8D3C' :
                               feature.attributes.pop_den > 10000 ? '#FEB24C' :
                               feature.attributes.pop_den > 5000  ? '#FED976' :
                                                                    '#FFEDA0' ;
                    }
                } 
            })
       });               

var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {styleMap: myStyles});
share|improve this answer
    
Thanks for the context suggestion. I tried getColor: function (d) {return ...} and although it is error free it does not change the fillColor. –  djq Nov 9 '12 at 20:03
    
Okay, I updated the code to work. What you need to do is store pop_den in a property of the feature like feature.attribute.prop_den (must be within feature.attributes to be read) so the context can see it. Also notice how I had the position of context wrong.. it needs to be in it's own object after the style attributes. –  CaptDragon Nov 9 '12 at 20:18
    
Thanks, that works and is very elegant. I suppose it is obvious, but the getColor() function can just call another external function too so long as it is returning a color. –  djq Nov 9 '12 at 20:32
    
That's correct. –  CaptDragon Nov 9 '12 at 20:43
    
This works sweet! Is there also a way I could add a simple info window? –  Stefan Nov 27 '12 at 16:08

Your Answer

 
discard

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.