SvgSymbol

The SvgSymbol object represents an SVG symbol that can be used for a marker's icon or display on a polyline.

SvgSymbol extends Base.

Usage example

 const icon = G.svgSymbol({
    path: 'M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});

Creating the SvgSymbol object

G.svgSymbol(path?: SvgSymbolValue, options?: SvgSymbolOptions): SvgSymbol

There are a few ways to setup the SvgSymbol object.

No parameters.

G.svgSymbol()

const symbol = G.svgSymbol();

Pass the path only.

G.svgSymbol(path: string)

Parameter	Type	Required	Description
path	string	Yes	The SVG path for the icon.

const symbol = G.svgSymbol('M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0');

**Pass the path and the options.**

`G.svgSymbol(path: string, options: SvgSymbolOptions)`

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| path | string | Yes | The SVG path for the icon. |
| options | [SvgSymbolOptions](#svgsymbol-options) | Yes | The options for the SvgSymbol object. |

```js
const symbol = G.svgSymbol('M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0', {
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});

Pass the options only.

G.svgSymbol(options: SvgSymbolOptions)

Parameter	Type	Required	Description
options	SvgSymbolOptions	Yes	The options for the SvgSymbol object.

const symbol = G.svgSymbol({
    path: 'M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});

Pass an existing SvgSymbol object.

G.svgSymbol(object: SvgSymbol): SvgSymbol

In this case the SvgSymbol object is simply returned.

Parameter	Type	Required	Description
object	SvgSymbol	Yes	A SvgSymbol object.

const symbol = G.svgSymbol(symbolObject);

SvgSymbolValue type

When other objects accept a SvgSymbol value the value type that they accept is a SvgSymbolValue.

The SvgSymbolValue can be one of the following values:

An SvgSymbol object.
A string (The SVG path value).
An SvgSymbolOptions object.

SvgSymbol options

Type SvgSymbolOptions.

SvgSymbolOptions is an object containing the configuration options for the SvgSymbol object.

Option	Type	Default	Description
anchor	PointValue	[0, 0]	The position of the symbol relative to the marker or polyline. By default, the anchor is located along the center point of the bottom of the image. This causes the SVG to appear off of the bottom right of the marker. Often you want to adjust the anchor so that the SVG is centered on the marker. The `x` value should be half the SVG width and the `y` value should be half the SVG height.
fillColor	string	#000000	The SVG fill color.
fillOpacity	number	1	The opacity of the fill.
labelOrigin	PointValue	[0, 0]	The origin of the label relative to the origin of the path, if label is supplied by the marker. By default, the origin is located in the center point of the image.
path	string		The SVG path for the icon. You cannot set the entire SVG code. Only use the `path` value of the SVG.
rotation	number	0	The rotation of the icon in degrees clockwise about the anchor point.
scale	number	1	The amount by which the icon is scaled.
strokeColor	string	#000000	The SVG stroke color.
strokeOpacity	number	1	The opacity of the stroke.
strokeWeight	number		The weight of the stroke.

Properties

Property	Type	Description
anchor	Point	The position of the symbol relative to the marker or polyline.
fillColor	string	The SVG fill color.
fillOpacity	number	The opacity of the fill.
labelOrigin	Point	The origin of the label relative to the origin of the path, if label is supplied by the marker.
path	string	The SVG path.
rotation	number	The rotation of the icon in degrees clockwise about the anchor point.
scale	number	The amount by which the icon is scaled.
strokeColor	string	The SVG stroke color.
strokeOpacity	number	The opacity of the stroke.
strokeWeight	number	The weight of the stroke.

Examples:

symbol.anchor = [0, -10];
const anchor = symbol.anchor;

symbol.strokeColor = '#9E008B';

Methods

Methods inherited from Base.

setAnchor

setAnchor(anchor: PointValue): SvgSymbol

Set the position at which to anchor an image in correspondence to the location of the marker on the map.

Option	Type	Required	Description
anchor	PointValue	Yes	The anchor value.

symbol.setAnchor([10, 32]);

setLabelOrigin

setLabelOrigin(labelOrigin: PointValue): SvgSymbol

Set the origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker.

Option	Type	Required	Description
labelOrigin	PointValue	Yes	The label origin value.

symbol.setAnchor([0, -2]);

setOptions

setOptions(options: SvgSymbolOptions): SvgSymbol

An alternate way to set one or more options.

Option	Type	Required	Description
options	SvgSymbolOptions	Yes	The options for the SvgSymbol object.

const symbol = G.svgSymbol('M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0').setOptions({
    path: 'M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});

setPath

setPath(path: string): SvgSymbol

Set the SVG path for the symbol.

Option	Type	Required	Description
path	string	Yes	The SVG path.

symbol.setPath('M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0');

setRotation

setRotation(rotation: number): SvgSymbol

Set the rotation of the icon in degrees clockwise about the anchor point.

Option	Type	Required	Description
rotation	number	Yes	The rotation value.

symbol.setRotation(45);

setScale

setScale(scale: number): SvgSymbol

Set the amount by which the icon is scaled.

Option	Type	Required	Description
scale	number	Yes	The scale value.

symbol.setScale(3);

setStrokeColor

setStrokeColor(strokeColor: string): SvgSymbol

Set the SVG stroke color. All CSS3 colors are supported except for extended named colors.

Option	Type	Required	Description
strokeColor	string	Yes	The color value. All CSS3 colors are supported except for extended named colors.

symbol.setStrokeColor('#ff000');

setStrokeOpacity

setStrokeOpacity(strokeOpacity: number): SvgSymbol

Set the opacity of the stroke.

Option	Type	Required	Description
strokeOpacity	number	Yes	The stroke opacity value.

symbol.setStrokeOpacity(0.5);

setStrokeWeight

setStrokeWeight(strokeWeight: number): SvgSymbol

Set the weight of the stroke.

Option	Type	Required	Description
strokeWeight	number	Yes	The stroke weight value.

symbol.setStrokeWeight(2);

toGoogle

toGoogle(): Promise<google.maps.Symbol>

Get the icons in the format that the Google expects.

symbol.toGoogle().then((symbol) => {
    const gmSymbol = symbol;    
});

Usage example​

Creating the SvgSymbol object​

SvgSymbolValue type​

SvgSymbol options​

Properties​

Methods​

setAnchor​

setLabelOrigin​

setOptions​

setPath​

setRotation​

setScale​

setStrokeColor​

setStrokeOpacity​

setStrokeWeight​

toGoogle​