const clusterer = new YMapClusterer({
method: clusterByGrid({gridSize: 64}),
features: getRandomPoints(100, BOUNDS),
marker,
cluster
});

const reactRoot = ReactDOM.createRoot(document.getElementById('app'));
reactRoot.render(



);
}
`

More about working with the package

$3

We declare a variable for the map, load the ymaps3 library, extract the necessary classes.

`javascript
window.map = null;
async function main() {
await ymaps3.ready;

const {YMap, YMapDefaultSchemeLayer, YMapMarker, YMapLayer, YMapFeatureDataSource} = ymaps3;
//...
}
`

We load the package with the clusterer, extract the classes for creating clusterer objects and the clustering method.

`javascript
const {YMapClusterer, clusterByGrid} = await ymaps3.import('@yandex/ymaps3-clusterer');
`

Create and add to the map a layer with a default schema, data sources, a layer of markers.

`javascript
const map = new YMap(document.getElementById('app'), {location: LOCATION});
map
.addChild(new YMapDefaultSchemeLayer())
.addChild(new YMapFeatureDataSource({id: 'my-source'}))
.addChild(new YMapLayer({source: 'my-source', type: 'markers', zIndex: 1800}));
`

You can set any markup for the marker and for the cluster.

`javascript
const contentPin = document.createElement('div');
contentPin.innerHTML = '';
`

We declare the function for rendering ordinary markers, we will submit it to the clusterer settings.
Note that the function must return any Entity element. In the example, this is ymaps3.YMapMarker.

`javascript
const marker = (feature) =>
new ymaps3.YMapMarker(
{
coordinates: feature.geometry.coordinates,
source: 'my-source'
},
contentPin.cloneNode(true)
);
`

As for ordinary markers, we declare a cluster rendering function that also returns an Entity element.

`javascript
const cluster = (coordinates, features) =>
new ymaps3.YMapMarker(
{
coordinates,
source: 'my-source'
},
circle(features.length).cloneNode(true)
);

function circle(count) {
const circle = document.createElement('div');
circle.classList.add('circle');
circle.innerHTML =

`javascript
const coordinates = [
[54.64, 25.76],
[54.63, 25.7],
[54.43, 25.69],
[54.42, 25.127],
[54.12, 25.437]
];

const points = coordinates.map((lnglat, i) => ({
type: 'Feature',
id: i,
geometry: {coordinates: lnglat},
properties: {name: 'Point of issue of orders'}
}));
`

We create a clusterer object and add it to the map object.
As parameters, we pass the clustering method, an array of features, the functions for rendering markers and clusters.
For the clustering method, we will pass the size of the grid division in pixels.

`javascript
const clusterer = new YMapClusterer({
method: clusterByGrid({gridSize: 64}),
features: points,
marker,
cluster
});

map.addChild(clusterer);
`

$3

We declare a variable for the map, load the ymaps3 library, extract the necessary classes.

`jsx
window.map = null;
main();
async function main() {
await ymaps3.ready;
const ymaps3React = await ymaps3.import('@yandex/ymaps3-reactify');
const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
const {YMap, YMapDefaultSchemeLayer, YMapLayer, YMapFeatureDataSource, YMapMarker} = reactify.module(ymaps3);
// ...
}
`

We connect the package with the clusterer, extract the classes for creating clusterer objects and the clustering method.

`jsx
const {YMapClusterer, clusterByGrid} = reactify.module(await ymaps3.import('@yandex/ymaps3-clusterer'));
`

We extract the necessary hooks. Let's declare an array with marker coordinates, then create an array of features with the appropriate interface.
We will pass it to the clusterer settings.

`jsx
const {useCallback, useMemo} = React;

const coordinates = [
[54.64, 25.76],
[54.63, 25.7],
[54.43, 25.69],
[54.47, 25.68],
[54.53, 25.6],
[54.59, 25.71],
[54.5, 25.63],
[54.42, 25.57],
[54.12, 25.57],
[54.32, 25.57]
];

const points = coordinates.map((lnglat, i) => ({
type: 'Feature',
id: i,
geometry: {coordinates: lnglat},
properties: {name: 'Point of issue of orders'}
}));
`

We declare a render function. For the clustering method, we pass and store the size of one grid division in pixels.

`jsx
function App() {
const gridSizedMethod = useMemo(() => clusterByGrid({gridSize: 64}), []);
// ...
}
`

We declare a function for rendering ordinary markers. Note that the function must return any Entity element. In the example, this is ymaps3.YMapMarker.

`jsx
const marker = useCallback(
(feature) => (



),
[]
);
`

We declare a cluster rendering function that also returns an Entity element. We will transfer the marker and cluster rendering functions to the clusterer settings.

`jsx
const cluster = useCallback(
(coordinates, features) => (



`jsx
function App() {
// ...
return (
<>
(map = x)}>






);
}
// ...
ReactDOM.render(, document.getElementById('app'));
``