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

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

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

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

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

Returns

Either the current hitarea value or the object chain.

Marker.remove()

Removes the marker from the map.

Returns

undefined