I am creating a vector layer prised of polygons from a KML file using Openlayers and I need to apply a "hash" pattern (diagonal striping) to the polygons. I know Openlayers doesn't natively support adding a background image to a polygon in a vector layer but I'm wondering if anyone has any ideas on how to acplish this? The styling of a vector polygon appears to be limited to solid colors and opacity. If need be I'll extend OpenLayers to add this functionality in by manually drawing the hash lines within the polygon boundaries but I'm hoping someone has a simpler suggestion before I head down that road.

I am creating a vector layer prised of polygons from a KML file using Openlayers and I need to apply a "hash" pattern (diagonal striping) to the polygons. I know Openlayers doesn't natively support adding a background image to a polygon in a vector layer but I'm wondering if anyone has any ideas on how to acplish this? The styling of a vector polygon appears to be limited to solid colors and opacity. If need be I'll extend OpenLayers to add this functionality in by manually drawing the hash lines within the polygon boundaries but I'm hoping someone has a simpler suggestion before I head down that road.

• javascript
• openlayers
• polygon

• Do you mean styling polygon borders (exterior) or internal polygon ? – Myra Commented Feb 23, 2012 at 13:56
• @Myra - internal polygon – TheOx Commented Feb 23, 2012 at 16:37
• I was going to say,polygon has only outer boundary stroke style as hash,but currently no support for internal style except for color & opacity – Myra Commented Feb 24, 2012 at 6:03

2 Answers 2

Using SLD this can now be done. Not sure if it's in version 2.11 or the trunk development but i saw the addition was mitted about 6 months ago.

It uses an ExternalGraphic so you can set an image of whatever pattern or color you want.

Here's the Example

I have not try this yet, but I have similar problem.
The solution I will try is svg pattern.
OpenLayers has SVG.js which is used to draw polygons. I will modify that to support patterns.
Look Image -->
http://i2.aijaa./b/00653/9707550.jpg
In this example i have modified http://openlayers/dev/examples/behavior-fixed-http-gml.html example to demonstrate pattern usage. --> Could this be good solution?