Answer the question
In order to leave comments, you need to log in
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>"
}
},
...
}
]
<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 questionAsk a Question
731 491 924 answers to any question