Marker

The Marker object represents a single marker on a given level.

📘

Adding a Marker to a Unit Map

See the MarkerCollection API on how to add a marker to a map.

Marker.translate([point])

Moves the marker to the given position if provided. Otherwise returns the current position value.

marker.translate([20, 20]);

Arguments

Argument

Required

Type

Default Value

Description

point

No

Array

undefined

An array representing an x and y coordinate pair of a position in map space.
Example: [1, 5].

Returns

Either an [x, y] coordinates Array of the current position or the object chain.

Marker.size([size])

Sets the marker size.

// Size the marker to be 200 by 150 pixels.

marker.size([200, 150]);

Arguments

Argument

Required

Type

Default Value

Description

size

No

Array

undefined

An array representing the width and height dimension values in map space.
Example: [200, 150].

Returns

Either a [width, height] dimensions Array of the current size or the object chain.

Marker.draggable([draggable])

Determines whether or not the marker can be dragged by the user.

// Make the marker draggable.

marker.draggable(true);

Arguments

Argument

Required

Type

Default Value

Description

draggable

No

Boolean

undefined

Determines whether or not the marker can be dragged by the user.
Example: false.

Returns

Either the current draggable value or the object chain.

Marker.icon([icon])

Set the icon for the marker. The icon object is defined below.

// Change the marker's icon.

marker.icon({
  url: "https://cdn.sightmap.com/app/icons/markers/pin-star.svg",
  size: [512, 512],
  // Set the anchor point to bottom center of the icon.
  anchor: [256, 512],
});

Icon Object

Key

Required

Type

Default Value

Description

url

Yes

String

undefined

A URL to the icon's image. Valid image formats are: png, jpeg, gif, or svg.

size

No

Array

undefined

An array representing the width and height dimension values in marker space.
Example: [512, 512].

anchor

No

Array

undefined

An array representing the x and y coordinate pair of the icon's transform origin in marker space.
Example: [256, 512].

Returns

Either the current icon value or the object chain.

Marker.hitarea([hitarea])

The hitarea defines the interactive region of the marker. When no hitarea is provided, the icon's size will determine this region.

Reference the SVG specification on Basic Shapes for additional attributes to provide for each type.

marker.hitarea({
    // Must have a `type` attribute which correlates to an SVG shape. Can be one of:   
  // `Circle`, `Ellipse`, `Line`, `Path`, `Polygon`, `Polyline`, or `Rect`.
    type: "Rect",
    // The remaining key/value pairs become attributes set on the SVG shape.
    width: 100,
    height: 100,
});

Hitarea Object

Key

Required

Type

Default Value

Description

type

Yes

String

undefined

One of: Circle, Ellipse, Line, Path, Polygon, Polyline, or Rect.

key/value

undefined

undefined

undefined

The remaining key value pairs become attributes set on the SVG shape element.

Returns

Either the current hitarea value or the object chain.

Marker.remove()

Removes the marker from the map.

Returns

undefined


What’s Next