---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/ymapsml_menu.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/ymapsml_menu.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Создание меню для отображения групп объектов
Open in CodeSandbox
YMapsML - язык описания географических объектов.
Каждому географическому объекту в YMapsML ставятся в соответствие геометрическая фигура и геообъект, используемый для
отображения этой фигуры на карте. Описание фигур и их привязка к географическим координатам задается
в соответствующих YMapsML-элементах. Для фигуры "точка" предназначен элемент gml:Point.
Внешний вид отображаемых объектов задается в элементе repr:Representation.
В документации можно ознакомиться с подробной инструкцией по
заданию стиля отображаемых объектов.
Для загрузки YMapsML-данных предназначена функция geoXml.load. После того как данные загрузятся, функция преобразует их в
GeoObjectCollection и передает в качестве параметра функции-обработчику.
{% list tabs %}
- index.html
```html
Создание меню для отображения групп объектов
```
- ymapsml_menu.js
```js
ymaps.ready(init);
function init() {
// Создание экземпляра карты.
var myMap = new ymaps.Map("map", {
center: [50.443705, 30.530946],
zoom: 12,
controls: [],
});
// Загрузка YMapsML-файла.
ymaps.geoXml.load("data.xml").then(
function (res) {
res.geoObjects.each(function (item) {
addMenuItem(item, myMap);
});
},
// Вызывается в случае неудачной загрузки YMapsML-файла.
function (error) {
alert("При загрузке YMapsML-файла произошла ошибка: " + error);
}
);
// Добавление элемента в список.
function addMenuItem(group, map) {
// Показать/скрыть группу геообъектов на карте.
$(
'' +
group.properties.get("name") +
""
)
.bind("click", function () {
var link = $(this);
// Если пункт меню "неактивный", то добавляем группу на карту,
// иначе - удаляем с карты.
if (link.hasClass("active")) {
map.geoObjects.remove(group);
} else {
map.geoObjects.add(group);
}
// Меняем "активность" пункта меню.
link.toggleClass("active");
return false;
})
// Добавление нового пункта меню в список.
.appendTo($("").appendTo($("#menu")));
}
}
```
{% endlist %}