Styling Vector Layer Based on Attributes

/*START OF STYLING THE VECTOR LAYER*/
var o = {
    getColour: function (e) {
        var t = e.attributes.hazard;
        return "Low" == t ? "#FFFF00" : "Medium" == t ? "#FFA500" : "#ff0000"
    }
};
var c = {
    fillOpacity: .3,
    strokeColor: "${getColour}",
    strokeWidth: 0,
    strokeOpacity: 0,
    fillColor: "${getColour}"
};

var b = new OpenLayers.Style(c, {
    context: o
});

var v = new OpenLayers.StyleMap({
    "default": b
});
/*END OF STYLING THE VECTOR LAYER*/

var GeoJSONLayer = new OpenLayers.Layer.Vector("GeoJSON", {
    styleMap: v,
    strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
    renderers: ['Canvas', 'SVG', 'VML'],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "{% static "js/floodmap.txt" %}",
        format: new OpenLayers.Format.GeoJSON()
    })
});

Change the attribute name based on your layer's attribute. In my case, the styling of my layer is based on "hazard" which is "Low, Medium and High". Then add "styleMap" property in your layer.


#FFFF00, #FFA500, #ff0000 are hex colors representing the type of hazard as shown in the image above.


Comments

Popular posts from this blog

Why I choose her?

Are you an Introvert?

I Am Getting Married!