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
Post a Comment
Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.