Skip to content

Работа с аннотациями

Пример получения аннотаций

html
<div id="map" style="height: 600px;"></div>
js
import { UMap } from '@umap/sdk';

const map = new UMap('#map', {
    mapName: 'demo-map',
});

// Получение всех аннотаций
const allAnnotationsResult = await map.getAnnotations();
console.log(
    'Все аннотации',
    allAnnotationsResult.annotations.map(a => a.name),
);

// Получение аннотаций по id
const annotationsByIdResult = await map.getAnnotations({
    ids: [
        'ebbe3884-2afc-4123-ad0e-27472a5bf6f3',
        '4aa6c677-ecae-4ef2-a67f-375a8b84fd0c',
    ],
});
console.log(
    'Аннотации по id',
    annotationsByIdResult.annotations.map(a => a.name),
);

// Получение аннотаций по externalKeys
const annotationsByExternalKeysResult = await map.getAnnotations({
    externalKeys: ['key1', 'key2'],
});
console.log(
    'Аннотации по externalKeys',
    annotationsByExternalKeysResult.annotations.map(a => a.name),
);

Пример фокуса камеры на выбранных аннотациях

html
<div id="map" style="height: 600px;"></div>
js
import { UMap } from '@umap/sdk';

const map = new UMap('#map', {
    mapName: 'demo-map',
});

map.on('annotationsSelected', async ({ annotations }) => {
    const ids = annotations.map(a => a.id);

    await map.focusOnAnnotations({
        ids,
        animated: true,
    });
});