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

# Developing the frontend

## Creating a manager {#create}

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

- [urlTemplate](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.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`.

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

```javascript
var loadingObjectManager = new ymaps.LoadingObjectManager('http://myServer.com/tile?bbox=%b',
      {   
        // Enabling clusterization.
        clusterize: true,
        // 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(loadingObjectManager);
```

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 [objectManager.ObjectCollection](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md) collection, which is linked to from `loadingObjectManager.objects`.

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

Most of the manager options define its behavior on the client side. For example, whether clusterization will be used, and 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.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.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.tr/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 manager supports two modes for loading data:

- 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 loads data immediately for the entire map viewport.

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.tr/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/loading-object-manager/backend.md).

## Object clustering {#clusterize}

If clustering is necessary for objects being added to the map via the manager, when creating it, the constructor should be given the `clusterize: true` option.

Cluster objects are placed in the [objectManager.ClusterCollection](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ClusterCollection.md) collection. The link to this collection is in `objectManager.clusters`.

IDs for clusters are generated automatically when creating them.

## Setting object options {#set-properties}

Objects added to the manager are put in the [objectManager.ObjectCollection](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md) collection. The link to this collection is in `loadingObjectManager.objects`. If clusterization is used when displaying objects, the cluster objects are placed in the [objectManager.ClusterCollection](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ClusterCollection.md) collection. The link to this collection is in `loadingObjectManager.clusters`.

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.options.set('preset', 'islands#greenDotIcon');

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

You can set the same options for manager objects as for geo objects. The list of cluster options is given in the description of the [ClusterPlacemark](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ClusterPlacemark.md) class.

## Filtering objects when displaying {#filter}

`LoadingObjectManager` allows filtering objects by attributes. For example, you can display only red objects, or only objects with IDs higher than 10.

Use the [setFilter()](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/LoadingObjectManager.md#setFilter) method for filtering objects. As a parameter, pass a string containing the condition for selecting objects, or a filter function that must return `true` or `false`.

```javascript
// Skip objects with an ID lower than 100.
loadingObjectManager.setFilter('id > 100');

// The map will only display objects with the specified types.
loadingObjectManager.setFilter('properties.type == "cafe" || properties.type == "pharmacy"');

// A filter function can be set.
loadingObjectManager.setFilter(function (object) {
  return object.properties.name != 'The one that can't be displayed.';
});
```

## Overlays {#overlays}

Placemarks and clusters are represented as [overlay.Placemark](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/overlay.Placemark.md) objects, which implement the [IOverlay](https://yandex.com.tr/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.tr/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.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection.md#overlays) and [objectManager.clusters.overlays](https://yandex.com.tr/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 must be tracked, an event handler should be assigned for the `loadingObjectManager.objects` collection. 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".
    loadingObjectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#yellowIcon'
    });
  } else {
    loadingObjectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#blueIcon'
    });
  }
}

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

```

For clusters, an event handler is assigned for the `loadingObjectManager.objects.clusters` collection.

```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".
    loadingObjectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#yellowIcon'
    });
  } else {
    objectManager.objects.setObjectOptions(objectId, {
      preset: 'islands#blueIcon'
    });
  }  
}

// Assigning the event handler for the manager's collection of cluster objects.   
loadingObjectManager.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 = loadingObjectManager.objects.overlays.getById(100);
overlay.events.add('click', onOverlayEvent);
```