Texturing Polygons in 4.x of the JavaScript API

Blog Post created by smcgeeesriuk-esridist Employee on Sep 12, 2017

What exactly is possible in regards to texturing polygons in the current version of the JavaScript API?


TLDR: The world's your canvas - check this sample app out.



This is great for simple symbology: solid colours, general hashes and styles. 

  - backward-diagonal

  - cross

  - diagonal-cross

  - forward-diagonal

  - horizontal

  - verctical

  - solid



The style you want not on the list? - Fear not! There's a symbol type called PictureFillSymbol.

PictureFillSymbol lets you use an image as the fill type. Here's an example of a cat image inside a polygon.


Apart from cute cats, it's best to use seamless textures and images. This means that if an image/pattern is duplicated many times then you can't see the edges of the texture.

This image is from 100 free Monochrome Geometric Patterns


Using seamless textures or patterns with PictureFillSymbol in the ArcGIS API for JavaScript is the best way of customising how your polygons look. With a small bit of image editing, you can easily customise the look at feel to a seamless texture. Adding things like colour and transparency to the image.


For a quick and easy way to see the PictureFillSymbol in action, you can use the ArcGIS API for JavaScript Playground here


I created a module a few weeks back called PictureFillSymbolPro. This basically adds a little more customisation options with PictureFillSymbol. This will allow the texture to snap to the world rather than snapping to the view. 



Lastly it's worth noting that the outer line/stroke for a polygon can be customised. The outer line is styled using the SimpleLineSymbol.


Here's the list of line styles too -

 - dash

 - dash-dot

 - long-dash-dot-dot

 - dot

 - long-dash

 - long-dash-dot

 - short-dash

 - short-dash-dot

 - short-dash-dot-dot

  - short-dot

  - solid

*You can change the colour of these different styles using css colour string, hex or rgba.


Here's a simple example that uses all of the mentioned above.



The legend will keep to the same style as the features by default, including any animated images you use.


You can pretty much do anything you'd like. There's some slight workarounds and tricks to getting better performance as well as better symbology. But generally it's rather simple and easy to use.