leaflet.pattern

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.

• Using a pre-defined provided pattern.
• Creating a custom pattern.

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

var pattern = new L.Pattern({options});

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

var stripes = new L.StripePattern({options}); stripes.addTo(map);

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.

var circle = new L.Circle({LatLng}, {radius}, { fillPattern: stripes, fillOpacity: 1.0}); circle.addTo(_map);

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

var shape = new L.PatternPath({ d: 'M10 0 L7 20 L25 20 Z', fill: true });

Options

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

Circle

var shape = new L.PatternCircle({ x: 12, y: 12, radius: 10, fill: true });

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

var shape = new L.PatternRect({ x: 5, y: 5, width: 40, height: 40, rx: 10, ry: 10, fill: true });

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.

var pattern = new L.Pattern({options}); pattern.addShape(shape); pattern.addTo(map);

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

var circle = new L.Circle({LatLng}, {radius}, { fillPattern: pattern, fillOpacity: 1.0}); circle.addTo(_map);