R
R
RomyGalaxy2021-11-17 16:32:25
JavaScript
RomyGalaxy, 2021-11-17 16:32:25

How to display subcategories of Yandex map API objects?

Good afternoon. There is an example from the sandbox, I remade it a little for myself so that the data is taken from the json file. The code generates labels and categorizes them. For example:

Famous monuments:
-Monument "Motherland"
-Monument "Bogdan Khmelnitsky"
-Arch of Friendship of Peoples

ymaps.ready(init);
function init() {
    $.getJSON( "objects.json", function( data ) {
        var groups = data.mapObjects;
        // Создание экземпляра карты.
        var myMap = new ymaps.Map('map', {
                center: [50.443705, 30.530946],
                zoom: 10
            }, {
                searchControlProvider: 'yandex#search'
            }),
        // Контейнер для меню.
        menu = $('<ul class="menu"/>');
        
        for (var i = 0, l = groups.length; i < l; i++) {
            createMenuGroup(groups[i]);
        }
        
        function createMenuGroup (group) {
            var menuItem = $('<li><a href="#">' + group.name + '</a></li>'),
            collection = new ymaps.GeoObjectCollection(null, { preset: group.style }),
            submenu = $('<ul class="submenu" style="display:none"/>');
            //myMap.geoObjects.add(collection);
            menuItem
                .append(submenu)
                // Добавляем пункт в меню.
                .appendTo(menu)
                // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
                .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) {
            // Пункт подменю.
            var submenuItem = $('<li><a href="#">' + item.name + '</a></li>'),
            // Создаем метку.
            placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });

            // Добавляем метку в коллекцию.
            collection.add(placemark);
            // Добавляем пункт в подменю.
            submenuItem
                .appendTo(submenu)
                // При клике по пункту подменю открываем/закрываем баллун у метки.
                .find('a')
                .bind('click', function () {
                    if (!placemark.balloon.isOpen()) {
                        placemark.balloon.open();
                    } else {
                        placemark.balloon.close();
                    }
                    return false;
                });
        }

        // Добавляем меню в тэг BODY.
        menu.appendTo($('body'));
        // Выставляем масштаб карты чтобы были видны все группы.
        myMap.setBounds(myMap.geoObjects.getBounds());
        }); 
}


json file:
{
    "mapObjects": [
        {
            "name": "Известные памятники",
            "style": "islands#redIcon",
            "subcategory": [
                {
                    "name": "Подкатегория",
                    "items": [
                        {
                            "center": [50.426472, 30.563022],
                            "name": "Монумент1"
                        },
                        {
                            "center": [50.426472, 30.563022],
                            "name": "Монумент 2"
                        }
                    ]
                }
            ],
            "items": [
                {
                    "center": [50.426472, 30.563022],
                    "name": "Монумент &quot;Родина-Мать&quot;"
                },
                {
                    "center": [50.45351, 30.516489],
                    "name": "Памятник &quot;Богдану Хмельницкому&quot;"
                },
                {
                    "center": [50.454433, 30.529874],
                    "name": "Арка Дружбы народов"
                }
            ]
        },
        {
            "name": "Покушайки",
            "style": "islands#greenIcon",
            "items": [
                {
                    "center": [50.50955, 30.60791],
                    "name": "Ресторан &quot;Калинка-Малинка&quot;"
                },
                {
                    "center": [50.429083, 30.521708],
                    "name": "Бар &quot;Сало-бар&quot;"
                },
                {
                    "center": [50.450843, 30.498271],
                    "name": "Абсент-бар &quot;Палата №6&quot;"
                },
                {
                    "center": [50.454834, 30.516498],
                    "name": "Ресторан &quot;Спотыкач&quot;"
                }
            ]},
        {
            "name": "Оригинальные музейчики",
            "style": "islands#orangeIcon",
            "items": [
                {
                    "center": [50.443334, 30.520163],
                    "name": "Музей грамзаписи и старинных музыкальных инструментов"
                },
                {
                    "center": [50.446977, 30.505269],
                    "name": "Музей истории медицины или Анатомический театр"
                },
                {
                    "center": [50.452512, 30.530889],
                    "name": "Музей воды. Водно-информационный центр"
                }
            ]},
        {
            "name": "Красивости",
            "style": "islands#blueIcon",
            "items": [
                {
                    "center": [50.45987, 30.516174],
                    "name": "Замок Ричарда-Львиное сердце"
                },
                {
                    "center": [50.445049, 30.528598],
                    "name": "&quot;Дом с химерами&quot;"
                },
                {
                    "center": [50.449156, 30.511809],
                    "name": "Дом Рыцаря"
                }
            ]}
        ]
}


Actually the question is how to display subcategories? To get something like this:

Famous monuments:
Russian writers:
- Monument to A.S. Pushkin
-Monument "Motherland"
-Monument "Bogdan Khmelnitsky"
-Arch of Friendship of Peoples

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question