Cercalia API GL

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 `[24, 24]`.
`svg`	string	SVG in string format, only those with tag.
`opacity`	number	Opacity

Methods

getAnchor(){string} Icon.js, line 239

Get anchor icon

Returns:

Anchor

getFilename(){string} Icon.js, line 275

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

Returns:

Filename

getOffset(){Array.<number>} Icon.js, line 248

Get icon offset.

Returns:

Offset

getOpacity(){number} Icon.js, line 325

Obtaint opacity

Returns:

Opacity

getPopupAnchor(){string} Icon.js, line 257

Obtaoin popup anchor

Returns:

PopupAnchor

getPopupOffset(){Array.<number>} Icon.js, line 266

Obtain popup offset

Returns:

Offset

getRotation(){number} Icon.js, line 287

Obtaint rotation in degrees

Returns:

Rotation in degrees

getScale(){number} Icon.js, line 296

Obtaint size multiplier

Returns:

Size multiplier

getSrc(){string} Icon.js, line 211

Get source url.

Returns:

Source URL

getSVG(){string} Icon.js, line 220

Get SVG in string format.

setOffset(offset) Icon.js, line 343

Name	Type	Description
`offset`	Array.<number>	Offset

setOpacity(opacity) Icon.js, line 334

Set opacity.

Name	Type	Description
`opacity`	number	Opacity.

setRotation(rotation) Icon.js, line 315

Set rotation in degrees.

Name	Type	Description
`rotation`	number	Rotation in degrees.

setScale(size) Icon.js, line 305

Set size multiplier

Name	Type	Description
`size`	number	Size multiplier

setSrc(url) Icon.js, line 228

Name	Type	Description
`url`	string	Url