MarkerCollection

The MarkerCollection object provides methods to manage Marker instances on the associated Level. The API is accessed via the Level.markers() method on a Level instance.

You can also view a code example on codesandbox.io.

map.on("ready", function() {
  // Create a MarkerCollection instance via `level.markers()`, which can only be
  // called once a unit map has loaded. In this example, we add a marker to the
  // map's last level.

  var markers = map.levels().last().markers();  
  var myMarker = markers.add({
    id: "my-marker",
    translate: [200, 200],
    cursor: "pointer",
    draggable: false,
    size: [64, 64],
    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],
    },
    hitarea: null,
  });
});

MarkerCollection.add(marker)

Adds a Marker instance to the Level. The marker object is defined below.

Marker Object

Key

Required

Type

Default Value

Description

icon

Yes

Object

undefined

The marker's icon.

See Marker.icon() for further details and usage examples.

id

No

String

undefined

An identifier for the marker instance.
Example: 1 or my-marker.

translate

No

Array

[0, 0]

The marker's initial position in map space. Example: [20, 20].

size

No

Array

undefined

The marker's initial size in map space: Example: [200, 150].

When no value is provided, the size will be set based on the icon size.

draggable

No

Boolean

false

Determines whether or not the marker can be dragged by the user.
Example: false.

hitarea

No

Object

undefined

Defines the interactive region of the marker.

When no value is provided, the icon size will determine this region.

See Marker.hitarea() for further details and usage examples.

Returns

The created Marker instance.

MarkerCollection.removeAll()

Removes all Marker instances from the Level.

📘

Removing a single marker

To remove a single marker, call the remove() method on a given Marker instance.

Returns

The object chain.


What’s Next