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

ArgumentRequiredTypeDefault ValueDescription
pointNoArrayundefinedAn 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

ArgumentRequiredTypeDefault ValueDescription
sizeNoArrayundefinedAn 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

ArgumentRequiredTypeDefault ValueDescription
draggableNoBooleanundefinedDetermines 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

KeyRequiredTypeDefault ValueDescription
urlYesStringundefinedA URL to the icon's image. Valid image formats are: png, jpeg, gif, or svg.
sizeNoArrayundefinedAn array representing the width and height dimension values in marker space.
Example: [512, 512].
anchorNoArrayundefinedAn 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

KeyRequiredTypeDefault ValueDescription
typeYesStringundefinedOne of: Circle, Ellipse, Line, Path, Polygon, Polyline, or Rect.
key/valueundefinedundefinedundefinedThe 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