Class: Icon

cercaliagl.Icon


Javascript ES5

const icon = new cercaliagl.Icon();

Class Icon is used to provide an icon to a Marker. The icon has meny attributes such as src, anchor, offset, popupAnchor, rotation, size, svg. The normal use case is to create an icon specifying the src attribute, but it is possible to create an icon specifying SVG, in this last case size must be [24, 24].

Example use case using an URL src image.

const icon = new cercaliagl.Icon({
  src: 'https://maps.cercalia.com/gl/v1.0/img/marker.png'
});
const marker = new cercaliagl.Marker({
  icon: icon,
  position: new cercaliagl.LonLat(1.431, 42.1431),
});
map.addMarker(marker);
map.setCenter(marker.getPosition());


Example use case creating an SVG: 
const icon =  new cercaliagl.Icon({
  svg: `<svg id="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <path fill="#99ff00" d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"></path>
     </svg>`,
  size: [24, 24],
});
const marker = new cercaliagl.Marker({
  icon: icon,
  position: new cercaliagl.LonLat(1.431, 42.1431),
});
map.addMarker(marker);
map.setCenter(marker.getPosition());

new Icon(options)

Icon.js, line 120
Name Type Description
options

Icon options

Name Type Description
src string | undefined

Source URL
anchor string

Anchor 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'. Default bottom.
offset Array.<number> | undefined

Offset
popupAnchor string | undefined

Anchor 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'. Default bottom.
popupOffset Array.<number> | undefined

Popup offset
rotation number

Rotation
scale number

Size multiplier. Default 1.
size Array.<number>

Only for SVG icons. Format value [width, height]. For example: [32, 32]. If not specified, it will use size from viewBox attribute from , else it will use [24, 24].
svg string

SVG in string format, only those with tag.
opacity number

Opacity

Methods

getAnchor(){string}

Icon.js, line 285

Get anchor icon

Returns:
Anchor

getFilename(){string}

Icon.js, line 321

Get filename. In SVG case it returns an unique hash (for internal purposes)

Returns:
Filename

getHeight(){number}

Icon.js, line 258

Get height

Returns:
Height

getOffset(){Array.<number>}

Icon.js, line 294

Get icon offset.

Returns:
Offset

getOpacity(){number}

Icon.js, line 371

Obtaint opacity

Returns:
Opacity

getPopupAnchor(){string}

Icon.js, line 303

Obtaoin popup anchor

Returns:
PopupAnchor

getPopupOffset(){Array.<number>}

Icon.js, line 312

Obtain popup offset

Returns:
Offset

getRotation(){number}

Icon.js, line 333

Obtaint rotation in degrees

Returns:
Rotation in degrees

getScale(){number}

Icon.js, line 342

Obtaint size multiplier

Returns:
Size multiplier

getSrc(){string}

Icon.js, line 223

Get source url.

Returns:
Source URL

getSVG(){string}

Icon.js, line 232

Get SVG in string format.

getWidth(){number}

Icon.js, line 241

Get width

Returns:
Width

setOffset(offset)

Icon.js, line 389
Name Type Description
offset Array.<number>

Offset

setOpacity(opacity)

Icon.js, line 380

Set opacity.

Name Type Description
opacity number

Opacity.

setRotation(rotation)

Icon.js, line 361

Set rotation in degrees.

Name Type Description
rotation number

Rotation in degrees.

setScale(size)

Icon.js, line 351

Set size multiplier

Name Type Description
size number

Size multiplier

setSrc(url)

Icon.js, line 274
Name Type Description
url string

Url