Creating a clusterer
The clusterer is used for combining closely positioned placemarks in a group (cluster).
The clusterer is implemented by the Clusterer class. The clusterer options can be passed to the constructor as parameters: the style of the cluster icon, the size of its cell, and so on. For the list of available options, see the corresponding section in the reference guide.
To add geo objects to the clusterer, use the add method. Either a separate geo object or an array of geo objects can be passed as the parameter.
index.html
clusterer_create.js
<!DOCTYPE html>
<html>
<head>
<title>Examples. Adding a placemark clusterer to the map</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<!--
Set your own API-key. Testing key is not valid for other web-sites and services.
Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
-->
<script
src="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>"
type="text/javascript"
></script>
<script src="clusterer_create.js" type="text/javascript"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
a {
color: #04b; /* Link color */
text-decoration: none; /* Removing underline from the links */
}
a:visited {
color: #04b; /* Visited link color */
}
a:hover {
color: #f50000; /* Link color when hovering */
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
ymaps.ready(function () {
var myMap = new ymaps.Map(
"map",
{
center: [55.751574, 37.573856],
zoom: 9,
behaviors: ["default", "scrollZoom"],
},
{
searchControlProvider: "yandex#search",
}
),
/**
* Creating a clusterer by calling a constructor function.
* A list of all options is available in the documentation.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
*/
clusterer = new ymaps.Clusterer({
/**
* Only cluster styles can be specified via the clusterer;
* for placemark styles, each placemark must be set separately.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
*/
preset: "islands#invertedVioletClusterIcons",
/**
* Setting to "true" if we want to cluster only points with the same coordinates.
*/
groupByCoordinates: false,
/**
* Setting cluster options in the clusterer with the "cluster" prefix.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
*/
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false,
}),
/**
* The function returns an object containing the placemark data.
* The clusterCaption data field will appear in the list of geo objects in the cluster balloon.
* The balloonContentBody field is the data source for the balloon content.
* Both fields support HTML markup.
* For a list of data fields that are used by the standard content layouts for
* geo objects' placemark icons and balloons, see the documentation.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointData = function (index) {
return {
balloonContentHeader:
'<font size=3><b><a target="_blank" href="https://yandex.com">Your link can be here</a></b></font>',
balloonContentBody:
'<p>Your name: <input name="login"></p><p>The phone in the format 2xxx-xxx: <input></p><p><input type="submit" value="Send"></p>',
balloonContentFooter:
"<font size=1>Information provided by: placemark </font> balloon <strong> " +
index +
"</strong>",
clusterCaption: "placemark <strong>" + index + "</strong>",
};
},
/**
* The function returns an object containing the placemark options.
* All options that are supported by the geo objects can be found in the documentation.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointOptions = function () {
return {
preset: "islands#violetIcon",
};
},
points = [
[55.831903, 37.411961],
[55.763338, 37.565466],
[55.763338, 37.565466],
[55.744522, 37.616378],
[55.780898, 37.642889],
[55.793559, 37.435983],
[55.800584, 37.675638],
[55.716733, 37.589988],
[55.775724, 37.56084],
[55.822144, 37.433781],
[55.87417, 37.669838],
[55.71677, 37.482338],
[55.78085, 37.75021],
[55.810906, 37.654142],
[55.865386, 37.713329],
[55.847121, 37.525797],
[55.778655, 37.710743],
[55.623415, 37.717934],
[55.863193, 37.737],
[55.86677, 37.760113],
[55.698261, 37.730838],
[55.6338, 37.564769],
[55.639996, 37.5394],
[55.69023, 37.405853],
[55.77597, 37.5129],
[55.775777, 37.44218],
[55.811814, 37.440448],
[55.751841, 37.404853],
[55.627303, 37.728976],
[55.816515, 37.597163],
[55.664352, 37.689397],
[55.679195, 37.600961],
[55.673873, 37.658425],
[55.681006, 37.605126],
[55.876327, 37.431744],
[55.843363, 37.778445],
[55.875445, 37.549348],
[55.662903, 37.702087],
[55.746099, 37.434113],
[55.83866, 37.712326],
[55.774838, 37.415725],
[55.871539, 37.630223],
[55.657037, 37.571271],
[55.691046, 37.711026],
[55.803972, 37.65961],
[55.616448, 37.452759],
[55.781329, 37.442781],
[55.844708, 37.74887],
[55.723123, 37.406067],
[55.858585, 37.48498],
],
geoObjects = [];
/**
* Data is passed to the placemark constructor as the second parameter, and options are third.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
*/
for (var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(
points[i],
getPointData(i),
getPointOptions()
);
}
/**
* You can change clusterer options after creation.
*/
clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true,
});
/**
* You can add a JavaScript array of placemarks (not a geo collection) or a single placemark to the clusterer.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
*/
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
/**
* Positioning the map so that all objects become visible.
*/
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true,
});
});