4. Basic Enhancements

Two new optional properties have been added to the basic L.Path properties to enable for a gradient fill and drop shadow. For now, the drop shadow property supports only a boolean value, but in the future, support might be added for fine-grained control over the appearance of drop shadows.

Usage

// Basic
var layer = new <Leaflet Path-based Layer (e.g. L.Polygon)>(<Constructor inputs>, {
	// L.Path style options
	...
	gradient: true,
	dropShadow: true
});

// Linear gradient
var layer = new <Leaflet Path-based Layer (e.g. L.Polygon)>(<Constructor inputs>, {
	gradient: {
		vector: [['0%', '50%'], ['100%', '50%']],
		stops: [{
			offset: '0%',
			style: {
				color: '#ffffff',
				opacity: 1
			}
		}, {
			offset: '50%',
			style: {
				color: '#ff0000',
				opacity: 1
			}
		}]
	}
});

// Radial gradient
var layer = new <Leaflet Path-based Layer (e.g. L.Polygon)>(<Constructor inputs>, {
	gradient: {
		gradientType: 'radial',
		radial: { cx: '50%', cy: '50%', r: '75%', fx: '50%', fy: '50%' },
		stops: [{
			offset: '0%',
			style: {
				color: '#000000',
				opacity: 1
			}
		}, {
			offset: '50%',
			style: {
				color: '#ff0000',
				opacity: 1
			}
		}]
	}
});				

Options

gradient

Type: Boolean OR Object

Default: differs depending on the layer class (most new marker types use a gradient by default)

Specifying a value of true will fill the path with a gradient from white to the specified fillColor (top left - bottom right)

dropShadow

Type: Boolean

Default: false

Specifying a value of true will add a dropShadow to the path

gradient Property Options

vector

Type: Array

Default:

[['0%', '0%'], ['100%', '100%']]

an array consisting of a start and end point that defines the direction of the gradient. Each start and end point is an array of x and y values. Where x and y values can be percentage strings (e.g. '100%') or numbers defining an absolute position

stops

Type: Array

Default:

an array of stop objects defining the colors to be used in the gradient. Each stop object has offset and style properties. See below.

stop Options

offset

Type: String OR Number

Default:

The position along the gradient at which to apply the given color/opacity

style

Type: Object

Default:

{ 
     opacity: 1, 
     color: <fillColor OR color>
}

an object with color and opacity properties defining the color and opacity to be used in the given stop. If you omit the color, the Path's fillColor or color will be used automatically.

You can also add text to any Path based item by passing in the a text option as part of the normal style options

Usage

var layer = new <Leaflet Path-based Layer (e.g. L.Polygon)>(<Constructor inputs>, {
	// L.Path style options
	...
	text: {
		text: <Text to display>,
		attr: {<Object of key/value pairs defining SVG element attributes to apply to the text element>},
		style: {<Object of key/value pairs defining style properties to apply to the text element},
		path: {
			startOffset: <percentage or absolute position along the path where text should start>,
			attr: {},
			style: {}
		}
	}
});

Text Options

text

Type: String

Default: null

The text to display

attr

Type: Object

Default: null

A set of key/value pairs that will be added as attributes to the created SVG text element (see the SVG spec for specifics)

style

Type: Object

Default: null

A set of key/value pairs that will be added to the style attribute for the created SVG text element (see the SVG spec for specific styles)

path

Type: Object

Default: null

This will cause the specified text to be displayed along the path (see options below)

Path Options

startOffset

Type: String

Default: null

Percentage or absolute position along the path where text should start

attr

Type: Object

Default: null

A set of key/value pairs that will be added as attributes to the created SVG textPath element (see the SVG spec for specifics)

style

Type: Object

Default: null

A set of key/value pairs that will be added to the style attribute for the created SVG textPath element (see the SVG spec for specific styles)