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.


Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls