ObjectManager

Extends ICustomizable, IEventEmitter, IGeoObject, IParentOnMap.

Object manager. Allows optimally displaying, clustering, and managing visibility for objects. Note that objects drawn on the map via this manager can't have editing and dragging modes enabled.

Constructor | Fields | Events | Methods

Constructor

ObjectManager([options])

Parameters:

Parameter

Default value

Description

options

Type: Object

Options.

  • You can set all the options specified in the Clusterer description, except for hasBalloon and hasHint options.
  • Cluster options are set with the "cluster" prefix. The list of options is specified in the description of ClusterPlacemark;
  • Options for singular objects should be specified with the geoObject prefix. The list of options is specified in GeoObject. Note that the manager ignores the 'visible' option.

options.clusterize

false

Type: Boolean

Flag indicating whether the objects should be clusterized. Note that clusterization only works for point objects at this time. When cluster mode is enabled, all non-point objects are ignored.

options.syncOverlayInit

false

Type: Boolean

A flag that allows creating overlays for objects synchronously. Note that when you create an overlay synchronously, you should ensure that the appropriate class, which implements the IOverlay interface, is loaded. By default, the overlays are created asynchronously, and the overlay class is loaded on demand.

options.viewportMargin

128

Type: Number|Number[]

Offset for the area where the objects are shown. Use this option to expand the view area of objects relative to the visible area of the map.

Example:

var objectManager = new ymaps.ObjectManager({
    // Enabling clustering.
    clusterize: true,
    // Cluster options are set with the "cluster" prefix.
    clusterHasBalloon: false,
    // Geo object options are set with the "geoObject" prefix.
    geoObjectOpenBalloonOnClick: false
});

// You can set options directly for child collections.
objectManager.clusters.options.set({
    preset: 'islands#grayClusterIcons',
    hintContentLayout: ymaps.templateLayoutFactory.createClass('Group of objects')
});
objectManager.objects.options.set('preset', 'islands#grayIcon');

Fields

Name

Type

Description

clusters

objectManager.ClusterCollection

Collection of clusters generated by the manager.

events

IEventManager

Event manager.

Inherited from IDomEventEmitter.

geometry

IGeometry|null

Geo object geometry.

Inherited from IGeoObject.

objects

objectManager.ObjectCollection

Collection of objects added to the layer.

options

IOptionManager

Options manager.

Inherited from ICustomizable.

properties

IDataManager

Geo object data.

Inherited from IGeoObject.

state

IDataManager

State of the geo object.

Inherited from IGeoObject.

Events

Name

Description

click

Single left-click on the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

contextmenu

Calls the element's context menu. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

dblclick

Double left-click on the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

geometrychange

Change to the geo object geometry. Instance of the Event class. Names of fields that are available via the Event.get method:

  • originalEvent: IEvent - Original event of the geometry.

Inherited from IGeoObject.

mapchange

Map reference changed. Data fields:

  • oldMap - Old map.
  • newMap - New map.

Inherited from IParentOnMap.

mousedown

Pressing the mouse button over the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

mouseenter

Pointing the cursor at the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

mouseleave

Moving the cursor off of the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

mousemove

Moving the cursor over the object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

mouseup

Letting go of the mouse button over an object. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

multitouchend

End of multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface.

Inherited from IDomEventEmitter.

multitouchmove

Repeating event during multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface with information about touches. Defines the touches property, which contains a list of touches. Every touch is described by an object that contains the following fields:

  • clientX - X coordinate of the touch relative to the viewable area of the browser.
  • clientY - Y coordinate of the touch relative to the viewable area of the browser.
  • pageX - X coordinate of the touch relative to the beginning of the document.
  • pageY - Y coordinate of the touch relative to the beginning of the document.

Inherited from IDomEventEmitter.

multitouchstart

Start of multitouch. This event is only available on devices that support multitouch. Returns an implementation of the IMultiTouchEvent interface with information about touches. Defines the touches property, which contains a list of touches. Every touch is described by an object that contains the following fields:

  • clientX - X coordinate of the touch relative to the viewable area of the browser.
  • clientY - Y coordinate of the touch relative to the viewable area of the browser.
  • pageX - X coordinate of the touch relative to the beginning of the document.
  • pageY - Y coordinate of the touch relative to the beginning of the document.

Inherited from IDomEventEmitter.

optionschange

Change to the object options.

Inherited from ICustomizable.

overlaychange

Change to the geo object overlay. Instance of the Event class. Names of fields that are available via the Event.get method:

  • overlay: IOverlay|null - Reference to the overlay.
  • oldOverlay: IOverlay|null - Previous overlay of the geo object.

Inherited from IGeoObject.

parentchange

The parent object reference changed.

Data fields:

  • oldParent - Old parent.
  • newParent - New parent.

Inherited from IChild.

propertieschange

Change to the geo object data. Instance of the Event class. Names of fields that are available via the Event.get method:

  • originalEvent: IEvent - Original event of the data manager.

Inherited from IGeoObject.

wheel

Mouse wheel scrolling. When using, keep in mind that mouse events are emulated when a touch screen is used. Instance of the MapEvent class. More information is available in domEvent.manager.

Inherited from IDomEventEmitter.

Methods

Name

Returns

Description

add(objects)

ObjectManager

Adding objects to the manager.

getBounds()

Number[][]|null

Calculates the boundaries in geo coordinates for an area that covers all the objects in the manager.

getFilter()

String|Function

null

Returns the set filter function.

getMap()

Map

Returns reference to the map.

Inherited from IParentOnMap.

getObjectState(id)

Object

Getting information about the current state of an object added to the manager.

getOverlay()

vow.Promise

Returns the promise object, which is confirmed by the overlay object at the time it is actually created, or is rejected with an appropriate error message.

Inherited from IGeoObject.

getOverlaySync()

IOverlay|null

The method provides synchronous access to the overlay.

Inherited from IGeoObject.

getParent()

IParentOnMap|null

Returns link to the parent object, or null if the parent element was not set.

Inherited from IChildOnMap.

getPixelBounds()

Number[][]|null

Calculates the boundaries in global pixel coordinates for an area that covers all the objects in the manager.

remove(objects)

ObjectManager

Deleting objects from the manager.

removeAll()

ObjectManager

Deleting all objects from the manager.

setFilter(filterFunction)

Sets a filter function for objects.

setParent(parent)

IChildOnMap

Sets the parent object. If the null value is passed, the manager element will only be deleted from the current parent object.

Inherited from IChildOnMap.

Fields details

clusters

{objectManager.ClusterCollection} clusters

Collection of clusters generated by the manager.

Example:

objectManager.clusters.events.add('click', function (e) {
    var objectId = e.get('objectId');
    objectManager.clusters.balloon.open(objectId);
});

objects

{objectManager.ObjectCollection} objects

Collection of objects added to the layer.

Example:

objectManager.objects.events.add('click', function (e) {
    var objectId = e.get('objectId');
    objectManager.objects.balloon.open(objectId);
});

Methods details

add

{ObjectManager} add(objects)

Adding objects to the manager.

Returns reference to the object manager.

Parameters:

Parameter

Default value

Description

objects*

Type: Object

Object[]|String

String or object with a JSON description of the objects. JSON object descriptions are formed using the following approach (see the example below). An object may be an entity or a collection of entities. A collection of entities is made up of an object with the following fields:

  • type - Type of object. The value of the field must be "FeatureCollection".
  • features - Array of child entities in the collection. Child objects may be entities or nested collections of entities.
    An entity is made up of an object with the following fields:
  • id - Unique object ID. Mandatory field.
  • type - Type of object. The value of the field must be "Feature".
  • geometry - Object geometry. Contains the "type" and "coordinates" fields. The value corresponds to the GeoObject passed to the constructor.
  • options - Options for the geo object.
  • properties - Geo object data.

* Mandatory parameter/option.

Examples:

1.

var objectManager = new ymaps.ObjectManager({ clusterize: true });
var currentId = 0;

// Adding a single object.
objectManager.add({
    type: 'Feature',
    id: currentId++,
    geometry: {
        type: 'Point',
        coordinates: [56.23, 34.79]
    },
    properties: {
        hintContent: 'Popup hint text',
        balloonContent: 'Balloon content'
    }
});
map.geoObjects.add(objectManager);

2.

// Adding an array of point objects.
var objects = [];
for (var i = 0, l = coordinates.length; i < l; i++) {
    objects.push({
        type: 'Feature',
        id: currentId++,
        geometry: {
            type: 'Point',
            coordinates: coordinates[i]
        }
    });
}
objectManager.add(objects);
map.geoObjects.add(objectManager);

3.

// Adding collections of objects.
var collection = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        id: currentId++,
        geometry: {
            type: 'Point',
            coordinates: [24.34, 65.24]
        }
    }, {
        type: 'Feature',
        id: currentId++,
        geometry: {
            type: 'Point',
            coordinates: [25.34, 63.24]
        }
    }
]}
objectManager.add(collection);
map.geoObjects.add(objectManager);

4.

// Adding non-point objects
var objects = [];

// Adding a circle
objects.push({
    type: 'Feature',
    id: 1,
    geometry: {
        type: 'Circle',
        coordinates: [55.755381, 37.619044],
        radius: 300
    }
});

// Adding a rectangle
objects.push({
    type: 'Feature',
    id: 2,
    geometry: {
        type: 'Rectangle',
        coordinates: [
            [55.764286, 37.606169],
            [55.759688, 37.620588]
        ]
    },
    options: {
        fillColor: '#FFFFFF',
        opacity: 0.8
    }
});

// Adding a polyline
objects.push({
    type: 'Feature',
    id: 3,
    geometry: {
        type: 'LineString',
        coordinates: [
            [55.75901100, 37.6308886],
            [55.7516538, 37.6299444],
            [55.74603822, 37.6380125]
        ]
    },
    options: {
        strokeColor: "#FF0000",
        strokeWidth: 5
    }
});

// Adding a polygon
objects.push({
    type: 'Feature',
    id: 4,
    geometry: {
        type: 'Polygon',
        coordinates: [[
            [55.75175065, 37.6041094],
            [55.75005637, 37.6137224],
            [55.742891186, 37.6166407],
            [55.74153546, 37.60342281],
            [55.74700649, 37.59775798]
        ]]
    },
    options: {
        opacity: 0.2,
        strokeWidth: 2,
        fillColor: '#00FF00'
    }
});

objectManager.add(objects);

getBounds

{Number[][]|null} getBounds()

Calculates the boundaries in geo coordinates for an area that covers all the objects in the manager.

Returns array of the area's coordinates, or null if the manager has not been added to the map.

getFilter

{String|Function|null} getFilter()

Returns the set filter function.

getObjectState

{Object} getObjectState(id)

Getting information about the current state of an object added to the manager.

Returns object with following fields:

  • found - Attribute that indicates whether an object with the passed ID exists. Type: Boolean.
  • isShown - Attribute that indicates whether the object is located in the visible area of the map. Type: Boolean.
  • cluster - JSON description of the cluster the object was added to. Besides the required fields, it contains the properties.geoObjects field with an array of objects that are in the cluster. This field is returned only when clusterization is enabled.
  • isClustered - Attribute indicating whether an object is in the cluster. This field is returned only when clusterization is enabled. Type: Boolean.
  • isFilteredOut - Attribute indicating whether an object passed through filtration. If the filter is not set or the object passed through filtration, the value of the field is "false". Type: Boolean.

Parameters:

Parameter

Default value

Description

id*

Type: Object

ID of the object to get the state for.

* Mandatory parameter/option.

Example:

// Opening the cluster balloon with the selected object.
// Getting data about the state of an object inside the cluster.
var objectState = objectManager.getObjectState(objects[1].id);
// Checking whether the object is located in the visible area of the map.
if (objectState.found && objectState.isShown) {
    // If the object is in a cluster, we open the cluster balloon with the appropriate object selected.
    if (objectState.isClustered) {
        objectManager.clusters.state.set('activeObject', objects[1]);
        objectManager.clusters.balloon.open(objectState.cluster.id);
    } else {
        // If the object isn't in a cluster, we open its own balloon.
        objectManager.objects.balloon.open(objects[i].id);
    }
}

getPixelBounds

{Number[][]|null} getPixelBounds()

Calculates the boundaries in global pixel coordinates for an area that covers all the objects in the manager.

Returns array of the area's coordinates, or null if the manager has not been added to the map.

remove

{ObjectManager} remove(objects)

Deleting objects from the manager.

Returns reference to the object manager.

Parameters:

Parameter

Default value

Description

objects*

Type: Object

Object[]|String

A string object with a JSON description of objects or an array of IDs of the objects being deleted. For the object description format, see the description of the method ObjectManager.add

* Mandatory parameter/option.

Examples:

1.

// Removing objects with IDs 0 and 56.
objectManager.remove([0, 56]);

2.

// Deleting an array of objects
objectManager.remove([
    {
        type: 'Feature',
        id: 23,
        geometry: {
            type: 'Point',
            coordinates: [45.33, 24.33]
        }
    },
    {
        type: 'Feature',
        id: 52,
        geometry: {
            type: 'Point',
            coordinates: [45.23, 24.34]
        }
    },
]);

3.

// Deleting a collection of objects.
objectManager.remove({
    type: 'FeatureCollection',
    features: [
         // Describing objects in the collection
        // ...
    ]
});

removeAll

{ObjectManager} removeAll()

Deleting all objects from the manager.

Returns self-reference.

Example:

objectManager.removeAll();

setFilter

{} setFilter(filterFunction)

Sets a filter function for objects.

Parameters:

Parameter

Default value

Description

filterFunction*

Type: Function|String

Filter function. Takes a single object added to ObjectManager. If the function returns true, the object will be processed. If false, the object will be excluded from further processing. A string can also be passed as a filter. The following keywords are available in the string filter:

  • options - Accessing the object's options.
  • properties - Accessing the object's data.
  • geometry - Accessing the object's geometry.
  • id - Accessing the object's identifier.
    For a filter, you can specify an expression that returns true or false.

* Mandatory parameter/option.

Examples:

1.

// Skipping objects with an ID under 100.
objectManager.setFilter('id > 100');

2.

// Only objects of the specified types will be displayed on the map.
objectManager.setFilter('properties.type == "cafe" || properties.type == "pharmacy"');

3.

// You can define a filter function.
objectManager.setFilter(function (object) {
    return object.properties.name != 'The one who cannot be shown.';
});