Leaflet.pattern

Provides the ability to use SVG patterns as backgrounds for Leaflet Paths.

Requires Leaflet 0.7.0 or newer.

Usage Examples

• Circle Pattern
• Rectangular Pattern
• Stripe Pattern
• Path Pattern
• GeoJson Pattern

You can define a pattern in 2 ways.

1. Using a pre-defined provided pattern.
2. Creating a custom pattern.

In either case the Pattern object needs to be initialized. This can be done as follows.

Options All custom and pre-defined patterns can make use of the following options.

• patternUnits: {userSpaceOnUse | objectBoundingBox} (default: userSpaceOnUse) - Defines if the x, y, width, and height values are measured against the current user coordinate system, or are in the range of 0.0 - 1.0 as a percentage of the bounding box of their parent element.
• patternContentUnits: {userSpaceOnUse | objectBoundingBox} (default: userSpaceOnUse) - Similar to patternUnits but applies to the shapes within the pattern.
• x: {number} (default: 0) - The x offset of the pattern starting position.
• y: {number} (default: 0) - The y offset of the pattern starting position.
• width: {number} (default: 8) - The width of the pattern.
• height: {number} (default: 8) - The height of the pattern.
• patternTransform: {string} (default: null) - see http://www.w3.org/TR/SVG/coords.html#TransformAttribute.
• angle: {number} (default: null) - a quick way to add rotate(angle) to the patternTransform.

Pre-Built Patterns

Pre-Built patterns are just an easier way to use some common patterns. Pre-Built patterns typically have their own special options, but all can use the base options mentioned above.

Stripes

Options

• weight: {number} (default: 4) - The width of the primary stripe.
• spaceWeight: {number} (default: 4) - The width of the secondaty stripe, typically an empty space.
• color: {color} (default: #000000) - The color of the primary stripe.
• spaceColor: {color} (default: #ffffff) - The color of the secondary stripe.
• opacity: {0.0 - 1.0} (default: 1.0) - The opacity of the primary stripe.
• spaceOpacity: {0.0 - 1.0} (default: 0.0) - The opacity of the secondary stripe.

Usage

Once the pre-built patterns are defined you can use them by adding them as the fill pattern property of any Path in leaflet.

Custom Patterns

To create custom patterns you must first create some shapes to define what the pattern looks like.

Shapes

Options

All shapes have the following options.

• stroke: {boolean} (default: true) - Whether to draw along the path or not.
• color: {color} (default: 3388ff) - Color of the stroke.
• weight: {number} (default: 3) - Width of the stroke.
• opacity: {0.0 - 1.0} (default: 1.0) - Opacity of the stroke.
• lineCap: {butt | round | square | inherit} (default: round) - Defines how the stroke looks at its ends
• lineJoin: {butt | round | square | inherit} (default: round) - Defines how the stroke looks at its corners.
• dashArray: {dashArray} (default: null) - Defines the strokes dash pattern. ex: '5, 5'
• dashOffset: {number} (default: null) -
• fill: {boolean} (default: false) - Should the shape be filled.
• fillColor: {color} (default: same as color) - Color of the fill.
• fillOpacity: {0.0 - 1.0} (default: 0.2) - Opacity of the fill.
• fillRule: {nonzero | evenodd | inherit} (default: evenodd) -
• fillPattern: {L.Pattern} (default: null) - The pattern to fill the Shape with.

Path

Options

• d: {path} (default: null) - The SVG path definition.

Circle

Options

• x: {number} (default: 0) - x offset of the circle.
• y: {number} (default: 0) - y offset of the circle.
• radius: {number} (default: 0) - radius of the circle.

Rectangle

Options

• x: {number} (default: 0) - x offset of the rectangle.
• y: {number} (default: 0) - y offset of the rectangle.
• width: {number} (default: 10) - width of the rectangle.
• height: {number} (default: 10) - height of the rectangle.
• rx: {number} (default: null) - x radius for rounded corners
• ry: {number} (default: null) - y radius for rounded corners

Usage

Once the paths are defined you can use them by adding them to a Pattern.

Finally you can now use the pattern in the fill pattern property of any Path in leaflet.