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
Updated over 4 years ago