Leaflet.pattern
Provides the ability to use SVG patterns as backgrounds for Leaflet Paths.
Requires Leaflet 0.7.0 or newer.
Usage Examples
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);