JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1.14/?lang=ru_RU"></script>
<div id=map></div>
CSS
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.list {
list-style-position: outside;
margin: 0;
padding: 0;
height: 100%;
}
.list li a {
color: red;
}
.list li a:hover {
color: blue;
}
JavaScript
ymaps.ready(function () {
var mapCenter = [55.755381, 37.619044],
map = new ymaps.Map('map', {
center: mapCenter,
zoom: 9,
controls: []
});
// Создаем собственный макет с информацией о выбранном геообъекте.
var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
// Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
'<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
'<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
'<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
);
var LeftColumnLayout = ymaps.templateLayoutFactory.createClass(
['<ul class=list>',
// Выводим в цикле список всех геообъектов.
'{% for geoObject in properties.geoObjects %}',
'<li><a href=# data-placemarkid="{{ geoObject.properties.placemarkId }}" class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
'{% endfor %}',
'</ul>'
].join(''), {
build: function () {
LeftColumnLayout.superclass.build.call(this);
var state = this.getData().state;
this._clickHandler = function () {
state.set('activeObject', placemarks[jQuery(this).data().placemarkid]);
};
jQuery(this.getElement()).on( "click", "a.list_item", this._clickHandler);
},
clear: function () {
jQuery(this.getElement()).off( "click", "a.list_item", this._clickHandler);
LeftColumnLayout.superclass.clear.call(this);
}
});
var clusterer = new ymaps.Clusterer({
...