---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_list.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/object_list.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Getting the list of map objects
Open in CodeSandbox
The example demonstrates how to create a menu to display collections of geo objects on the map.
To create such a menu, you must create two representations of a geo object: its API-representation (in the form of placemarks on the map)
and its DOM representation (i.e. the menu item).
These representations can be linked inside the event handler for the DOM representation (click on menu item)
by calling specific methods in the API representation of the geo object (adding/removing placemarks on the map).
In this example, the menu is based on the data array that is defined in the file groups.js.
The example is discussed more in the developers' club.
{% list tabs %}
- index.html
```html
Examples. A list of map objects.
```
- groups.js
```js
// Groups of objects
var groups = [
{
name: "Famous monuments",
style: "islands#redIcon",
items: [
{
center: [50.426472, 30.563022],
name: "Monument "Motherland"",
},
{
center: [50.45351, 30.516489],
name: "Monument "Bogdan Khmelnitsky"",
},
{
center: [50.454433, 30.529874],
name: "Druzhby Narodov Arch",
},
],
},
{
name: "Pokushaiki",
style: "islands#greenIcon",
items: [
{
center: [50.50955, 30.60791],
name: "Restaurant "Kalinka-Malinka"",
},
{
center: [50.429083, 30.521708],
name: "Bar "Salo-bar"",
},
{
center: [50.450843, 30.498271],
name: "Absinthe bar "Palata No. 6"",
},
{
center: [50.454834, 30.516498],
name: "Restaraunt "Spotykach"",
},
],
},
{
name: "Original museums",
style: "islands#orangeIcon",
items: [
{
center: [50.443334, 30.520163],
name: "The Museum of gramophones and vintage musical instruments",
},
{
center: [50.446977, 30.505269],
name: "Museum of the history of medicine or Anatomical theater",
},
{
center: [50.452512, 30.530889],
name: "The Museum of water. Water information center",
},
],
},
{
name: "Goodies",
style: "islands#blueIcon",
items: [
{
center: [50.45987, 30.516174],
name: "The castle of Richard the Lion-heart",
},
{
center: [50.445049, 30.528598],
name: ""House with chimeras"",
},
{
center: [50.449156, 30.511809],
name: "The House Of Knight",
},
],
},
];
```
- object_list.js
```js
ymaps.ready(init);
function init() {
// Creating an instance of the map.
var myMap = new ymaps.Map(
"map",
{
center: [50.443705, 30.530946],
zoom: 14,
},
{
searchControlProvider: "yandex#search",
}
),
// The container for the menu.
menu = $('');
for (var i = 0, l = groups.length; i < l; i++) {
createMenuGroup(groups[i]);
}
function createMenuGroup(group) {
// A menu item.
var menuItem = $('' + group.name + ""),
// Collection for geo objects in a group.
collection = new ymaps.GeoObjectCollection(null, {
preset: group.style,
}),
// The container for the submenu.
submenu = $('');
// Adding a collection to the map.
myMap.geoObjects.add(collection);
// Adding a submenu.
menuItem
.append(submenu)
// Adding a menu item.
.appendTo(menu)
// On click, removing/adding the collection to the map and hiding/displaying the submenu.
.find("a")
.bind("click", function () {
if (collection.getParent()) {
myMap.geoObjects.remove(collection);
submenu.hide();
} else {
myMap.geoObjects.add(collection);
submenu.show();
}
});
for (var j = 0, m = group.items.length; j < m; j++) {
createSubMenu(group.items[j], collection, submenu);
}
}
function createSubMenu(item, collection, submenu) {
// A submenu item.
var submenuItem = $('' + item.name + ""),
// Creating a placemark.
placemark = new ymaps.Placemark(item.center, {
balloonContent: item.name,
});
// Adding a placemark to the collection.
collection.add(placemark);
// Adding an item to the submenu.
submenuItem
.appendTo(submenu)
// When an item in the submenu is clicked, we open/close the placemark balloon.
.find("a")
.bind("click", function () {
if (!placemark.balloon.isOpen()) {
placemark.balloon.open();
} else {
placemark.balloon.close();
}
return false;
});
}
// Adding the menu to the BODY tag.
menu.appendTo($("body"));
// Setting the map zoom so all groups are visible.
myMap.setBounds(myMap.geoObjects.getBounds());
}
```
{% endlist %}