Skip to content

Latest commit

 

History

History
160 lines (120 loc) · 5.19 KB

README.md

File metadata and controls

160 lines (120 loc) · 5.19 KB
Raw

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.

  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.

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}); stipes.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);