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

Auto-calculate your Splinterlands Assets/Income

Creating a Simple Button for Demo

Splinterlands: Water Deck for Beginners