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

# Unit

A Unit is represented as a single shape object.

> 📘 Working with units on a Unit Map®.
>
> See the [UnitSelection API](https://developers.unitmap.com/docs/js-api-unit-selection) on how to select and manipulate units.

## Unit.color(color)

Set the fill color for the Unit.

```javascript Usage Example
// Color all units:
map.units().color("#ff00ff");

// Color units with an ID of `1`, `2`, or `3`:
map.units().find([1, 2, 3]).color("#ff00ff");

// Color a unit when moused over:
map.on("unit:mouseover", function (unit) {
  unit.color("rgb(255, 0, 0)");
});
```

#### Arguments

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

      <th>
        Required
      </th>

      <th>
        Type
      </th>

      <th>
        Default Value
      </th>

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

  <tbody>
    <tr>
      <td>
        color
      </td>

      <td>
        Yes
      </td>

      <td>
        String
      </td>

      <td>
        undefined
      </td>

      <td>
        A valid CSS color value.
      </td>
    </tr>
  </tbody>
</Table>

#### Returns

The object chain.

## Unit.center()

Returns the position in map space which will center the Unit within the viewport (screen space).

```javascript Usage Example
// Translate the map to center over the unit with an ID of `1`.

map.panTo(map.units().find("1").center());
```

#### Returns

An `[x, y]` coordinates Array.

## Unit.bounds()

Get the bounding box of the Unit in map space.

```javascript Usage Example
// Zoom and pan the map to fit the unit with an ID of `1`.

map.fitBounds(map.units().find("1").bounds(), { padding: 100 });
```

#### Returns

A bounding box as a nested Array of the form `[[minX, minY], [maxX, maxY]]`, suitable for passing to [UnitMap.fitBounds](https://developers.unitmap.com/docs/js-api-unitmap#unitmapfitboundsbounds-options).