Nacho Pizza Marinade

    leaflet.pattern
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/leaflet.pattern package

    0.1.0 • Public • Published

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

    Keywords

    Install

    npm i leaflet.pattern

    DownloadsWeekly Downloads

    2,840

    Version

    0.1.0

    License

    none

    Unpacked Size

    225 kB

    Total Files

    31

    Last publish

    Collaborators

    • pixelized_peanut