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 133
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 path tag.
opacity number

Opacity
loadedIconImage string

Icon image already loaded on maplibre.

Methods

getAnchor(){string}

Icon.js, line 319

Get anchor icon

Returns:
Anchor

getFilename(){string|undefined}

Icon.js, line 355

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

Returns:
Filename

getHeight(){number}

Icon.js, line 281

Get height

Returns:
Height

getOffset(){Array.<number>}

Icon.js, line 328

Get icon offset.

Returns:
Offset

getOpacity(){number}

Icon.js, line 405

Obtaint opacity

Returns:
Opacity

getPopupAnchor(){string}

Icon.js, line 337

Obtaoin popup anchor

Returns:
PopupAnchor

getPopupOffset(){Array.<number>}

Icon.js, line 346

Obtain popup offset

Returns:
Offset

getRotation(){number}

Icon.js, line 367

Obtaint rotation in degrees

Returns:
Rotation in degrees

getScale(){number}

Icon.js, line 376

Obtaint size multiplier

Returns:
Size multiplier

getSrc(){string}

Icon.js, line 238

Get source url.

Returns:
Source URL

getSVG(){string}

Icon.js, line 255

Get SVG in string format.

getWidth(){number}

Icon.js, line 264

Get width

Returns:
Width

setOffset(offset)

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

Offset

setOpacity(opacity)

Icon.js, line 414

Set opacity.

Name Type Description
opacity number

Opacity.

setRotation(rotation)

Icon.js, line 395

Set rotation in degrees.

Name Type Description
rotation number

Rotation in degrees.

setScale(size)

Icon.js, line 385

Set size multiplier

Name Type Description
size number

Size multiplier

setSrc(src)

Icon.js, line 297
Name Type Description
src string

Src