---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/remote-object-manager/frontend.md
  - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/remote-object-manager/frontend.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt

# Developing the frontend

## Creating a manager {#create}

The object manager is created using the [RemoteObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md) class. Its constructor can be passed the following parameters:

- [urlTemplate](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md#param-urlTemplate) — Template for the data URL (mandatory parameter).
    
    {% cut "More about templates" %}
    
    Using templates lets the manager automatically generate the appropriate URL for each tile (or for a particular area). For example, let's assume the template for the data URL looks like this:
    
    `http://server.domain/?tileNumber=%t`
    
    When forming a request, the manager performs substitution: in place of %t it substitutes the numbers of the upper-left and lower-right tiles of the requested area. So, for example, an area with the corner tiles [1,1] and [5,5] will have a data URL that looks like this:
    
    `http://server.domain/?tileNumber=1,1,5,5&callback=....`

    {% endcut %}
    
- Manager [options](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md#param-options).

```javascript
var remoteObjectManager = new ymaps.RemoteObjectManager('**http://myServer.com/tile?bbox=%b**',
      { 
        // Cluster options are set with the 'cluster' prefix.
        clusterHasBalloon: false,
        // Object options are set with the geoObject prefix.
        geoObjectOpenBalloonOnClick: false
      });
```

In order for the manager to start loading objects from the server, it must be added to the collection of map objects.

```javascript
myMap.geoObjects.add(remoteObjectManager);
```

After being added to the map, the manager starts sending requests for data for the visible map area.

The manager puts loaded objects in the [{#T}objectManager.ObjectCollection.md]](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md) collection, which is linked to from [objectManager.objects](../../../ref/reference/objectManager.ObjectCollection.md).

## Setting up interaction between the manager and server {#options}

Most of the manager options define its behavior on the client side. For example, whether overlays will be created synchronously. However, certain options affect how the manager interacts with the server. These options are covered in detail below.

**paddingTemplate**

You can use the [paddingTemplate](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md#param-options.paddingTemplate) option to set a template for the callback function that the server will wrap the response in. Using templates allows the manager to specify the appropriate callback function for each request.

The manager passes the server the name of the callback function in the 'callback' parameter.

If the name of the callback function is not set when creating the manager, the manager will automatically generate new names for these functions each time before sending a request.

`'{data URL}?callback=id_1234567'`.

**splitRequests**

The [splitRequests](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md#param-options.paddingTemplate) option allows you to set the mode in which the manager will load data from the server. The same as [LoadingObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.md), [RemoteObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md) supports two data loading modes:

- Data is loaded for the entire viewport simultaneously (`splitRequests = false`).
- Data is loaded for the viewport by tile (`splitRequests = true`).

By default, `splitRequests = false`, meaning the manager requests data for the entire map viewport at once.

The choice of data loading mode depends on how interaction between the frontend and backend is organized. For more information about these modes, see the section [Developing the backend](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/loading-object-manager/backend.md) (since `RemoteObjectManager` and `LoadingObjectManager` work in the same way, the description of modes is only given in the section for `LoadingObjectManager`).

## Object clustering {#clusterize}

[RemoteObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/RemoteObjectManager.md) does not clusterize objects on the client side, but it can display results of server clusterization of data. In contrast to [LoadingObjectManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.md), it does not support the [clusterize](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.md#param-options.clusterize) option. In order to place cluster objects on the map, the server must return a JSON description to the manager that contains information about both placemarks and clusters. For more information about the data format, see the section [Developing the backend](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/remote-object-manager/backend.md#format).

Cluster objects are placed in the [{#T}objectManager.ClusterCollection.md]](../../../ref/reference/objectManager.ClusterCollection.md) collection. The link to this collection is in `remoteObjectManager.clusters`.

## Setting object options {#set-properties}

The manager implements hierarchical inheritance for options. This means that object options are inherited from their parent collections. To set options for all manager objects, you only need to set the appropriate option for the entire collection of objects.

```javascript
// Setting icon style for separate placemarks.
loadingObjectManager.objects.**setObjectOptions**('preset', 'islands#greenDotIcon');

// Icon style for clusters.
loadingObjectManager.clusters.options.**setClusterOptions**('preset', 'islands#greenClusterIcons');
```

The [setObjectOptions](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md#setObjectOptions) and [setClusterOptions](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ClusterCollection.md#setClusterOptions) methods allow setting object options «on the fly». This means that when setting object options, the object's overlay is reconstructed, meaning the changes are immediately reflected on the map.

Object options can also be set using the set() method:

```javascript
objectManager.objects.getById(1).**set**('preset', 'islands#greenDotIcon');
```

When setting options this way, their overlays will not be reconstructed. So in order for changes to be reflected on the map, you must use the `set()` method before the manager is added to the map.

Manager objects can be given the same options as geo objects that are instances of [Placemark](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Placemark.md). The list of cluster options is given in the description of the [ClusterPlacemark](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ClusterPlacemark.md) class.

## Overlays {#overlays}

Placemarks and clusters are represented as [overlay.Placemark](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/overlay.Placemark.md) objects, which implement the [IOverlay](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOverlay.md) interface.

By default, the visual representation of manager objects is created asynchronously on request. You can use the [syncOverlayInit](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ObjectManager.md#param-options.syncOverlayInit) option to set the manager to create object overlays in synchronous mode.

Links to overlays for placemarks and clusters are in [objectManager.objects.overlays](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md#overlays) and [objectManager.clusters.overlays](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ClusterCollection.md#overlays), respectively.

## Processing events on objects {#events}

Events on the manager's objects are propagated to the parent collections. This means that if events on the manager's placemarks or clusters must be tracked, an event handler should be assigned for the `remoteObjectManager.objects` and `remoteObjectManager.clusters` collections, respectively. The unique ID of the object where the event occurred is passed in the `objectID` attribute of the event.

```javascript
// When pointing the mouse at placemarks, their icons turn yellow
// When the pointer moves away, the icon color turns blue.
function onObjectEvent (e) {
  var obj = e.get('target');
  if (obj.properties. == 'islands#redDotIcon') {
    // The setObjectOptions method allows setting options for an object "on the fly".
    objectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#yellowIcon'
    });
  } else {
    objectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#blueIcon'
    });
  }
}

// Assigning the event handler for the manager's collection of objects.   
remoteObjectManager.objects.events.add(['click'], onObjectEvent);
```

Assigning the event handler for a collection of clusters:

```javascript
// When pointing the mouse at placemarks, their icons turn yellow.
// When the pointer moves away, the icon color turns blue.
function onClusterEvent (e) {
  var objectId = e.get('objectId');
  if (e.get('type') == 'mouseenter') {
    //  The setObjectOptions method allows setting options for an object "on the fly".
    remoteObjectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#yellowIcon'
    });
  } else {
    remoteObjectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#blueIcon'
    });
  }  
}

// Assigning the event handler for the manager's collection of cluster objects.   
remoteObjectManager.clusters.events.add(['mouseenter', 'mouseleave'], onClusterEvent);
```

Sometimes events need to be tracked on a particular object of the manager. In this case, the event handler should be assigned for this object's overlay.

```javascript
// When pointing the mouse at clusters, their icons turn yellow.
// When the pointer moves away, the icon color turns blue.
function onClusterEvent (e) {
  e.balloon.open('');
}

var overlay = remoteObjectManager.objects.overlays.getById(100);
overlay.events.add**('click', onOverlayEvent);
```