J
J
Junior Development2020-12-22 18:48:33
JavaScript
Junior Development, 2020-12-22 18:48:33

How to use a template for a balloon in Yandex map when adding many labels with Json?

To add a lot of labels, I used the office. documentation.
https://yandex.ru/dev/maps/jsbox/2.1/object_manager

Everything works fine, but I need to style the label balloon.
To do this, I changed the json structure and it turned out to be something terrible.

This is the structure of my json file now

"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 0,
      "geometry": {
        "type": "Point",
        "coordinates": [ 55.74064738, 37.53815889 ]
      },
      "properties": {
        "balloonContentBody": "<div class='map-popup'> <div class= 'map-popup__block-title'>
            <p class='map-popup__block-title__title'>Заголовок</p><p class='map-popup__block-title__subtitle'>
            Подзаголовок</p></div> <div class='map-popup__block-contacts'><a class='map-popup__block-contacts__phone' 
                href='tel:+79009101815'>+7 (900) 9910-18-18</a><p class='map-popup__block-contacts__email'>
                [email protected]</p></div><div class='map-popup__block-address'>122365, г. Москва, Московский пр-т, д. 50/50
                </div><div class='map-popup__block-icons'><img src='./assets/images/icons/icon-categories/icon-6.svg' 
                    alt='1'> <img src='./assets/images/icons/icon-categories/icon-7.svg' alt='2'>
                    <img src='./assets/images/icons/icon-categories/icon-8.svg' alt='2'></div>
                    <div class='map-popup__block-button'><a href='#'>Как проехать</a></div></div>",
        "clusterCaption": "<div class='map-another-label'>Описание</div>",
        "hintContent": "<div class='map-info'>Описание</div>"
      }
    },
    ...
    }
    ]


I'm talking about the content of "balloonContentBody".

Now I need to apply the template to the labels and make friends with the values.
I found the documentation
https://yandex.ru/dev/maps/jsapi/doc/2.1/dg/concept...
But due to little experience I can't figure out how to apply it correctly.

Here is my script.
<script>
    ymaps.ready(init);

    function init() {

        var myMap         = new ymaps.Map('map', {
                center: [ 55.76, 37.64 ],
                zoom: 10
            },
            {
                searchControlProvider: 'yandex#search'
            }),
            objectManager = new ymaps.ObjectManager({
                clusterize: true,
                gridSize: 32,
                clusterDisableClickZoom: true,
            });

        objectManager.objects.options.set('preset', 'islands#greenDotIcon');
        objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
        myMap.geoObjects.add(objectManager);

        fetch('map-base.json')
        .then(response => {
            if (response.status >= 400) {
                return Promise.reject()
            }
            return response.json();
        })
        .then(data => {
            /*Тут размещен скрипт для реализации фильтра и вывода меток*/
        })
        .catch(() => console.log('error'))

    }
</script>

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