---
updatedAt: 2026-06-02T20:09:36.000Z
agentTools:
  projectIndex: https://developers.unitmap.com/llms.txt
---

# Marker

The Marker instance represents a single marker on a given floor.

> 📘 Adding a Marker to a Unit Map®.
>
> See the [MarkerCollection API](https://developers.unitmap.com/docs/js-api-marker-collection) 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.

```javascript Usage Example
marker.translate([20, 20]);
```

#### Arguments

<Table align={["left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Argument
      </th>

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        point
      </td>

      <td>
        No
      </td>

      <td>
        Array
      </td>

      <td>
        undefined
      </td>

      <td>
        An array representing an x and y coordinate pair of a position in map space.\
        Example: `[1, 5]`.
      </td>
    </tr>
  </tbody>
</Table>

#### Returns

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

## Marker.size(\[size])

Sets the marker size.

```javascript Usage Example
// Size the marker to be 200 by 150 pixels.

marker.size([200, 150]);
```

#### Arguments

<Table align={["left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Argument
      </th>

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        size
      </td>

      <td>
        No
      </td>

      <td>
        Array
      </td>

      <td>
        undefined
      </td>

      <td>
        An array representing the width and height dimension values in map space.\
        Example: `[200, 150]`.
      </td>
    </tr>
  </tbody>
</Table>

#### 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.

```javascript Usage Example
// Make the marker draggable.

marker.draggable(true);
```

#### Arguments

<Table align={["left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Argument
      </th>

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        draggable
      </td>

      <td>
        No
      </td>

      <td>
        Boolean
      </td>

      <td>
        undefined
      </td>

      <td>
        Determines whether or not the marker can be dragged by the user.\
        Example: `false`.
      </td>
    </tr>
  </tbody>
</Table>

#### 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.

```javascript Usage Example
// 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

<Table align={["left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Key
      </th>

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        url
      </td>

      <td>
        Yes
      </td>

      <td>
        String
      </td>

      <td>
        undefined
      </td>

      <td>
        A URL to the icon's image. Valid image formats are: `png`, `jpeg`, `gif`, or `svg`.
      </td>
    </tr>

    <tr>
      <td>
        size
      </td>

      <td>
        No
      </td>

      <td>
        Array
      </td>

      <td>
        undefined
      </td>

      <td>
        An array representing the width and height dimension values in marker space.\
        Example: `[512, 512]`.
      </td>
    </tr>

    <tr>
      <td>
        anchor
      </td>

      <td>
        No
      </td>

      <td>
        Array
      </td>

      <td>
        undefined
      </td>

      <td>
        An array representing the x and y coordinate pair of the icon's  transform origin in marker space.\
        Example: `[256, 512]`.
      </td>
    </tr>
  </tbody>
</Table>

#### 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](https://www.w3.org/TR/SVG11/shapes.html) for  additional attributes to provide for each type.

```javascript Usage Example
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

<Table align={["left","left","left","left","left"]}>
  <thead>
    <tr>
      <th>
        Key
      </th>

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        type
      </td>

      <td>
        Yes
      </td>

      <td>
        String
      </td>

      <td>
        undefined
      </td>

      <td>
        One of: `Circle`, `Ellipse`,  `Line`, `Path`, `Polygon`, `Polyline`, or `Rect`.
      </td>
    </tr>

    <tr>
      <td>
        key/value
      </td>

      <td>
        undefined
      </td>

      <td>
        undefined
      </td>

      <td>
        undefined
      </td>

      <td>
        The remaining key value pairs become attributes set on the SVG shape element.
      </td>
    </tr>
  </tbody>
</Table>

#### Returns

Either the current hitarea value or the object chain.

## Marker.remove()

Removes the marker from the map.

#### Returns

undefined