JSFiddle - React, Tailwind, and code Playground

by RDmitriev

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<div class="rd-box-3">
<div id="map">
<div class="line-7">
<div class="line-10">
		<div class="line-11">Найдено <span><span class="contNot">0</span> результата</span></div>
	</div>
	</div>
</div>
</div>

CSS

#map {
    min-height: 622px;
}
.rd-box-3{
	padding: 0;
}
.rd-box-3 .line-1{
	padding: 25px;
	background: #fff;
	box-shadow: 0px 0px 58px -1px rgba(0,0,0,0.07);
}
.rd-box-3 .line-2{
	color: #000000;
	font-size: 17px;
	font-weight: 700;
	padding-bottom: 20px;
}
.rd-box-3 .line-3{
	color: #666666;
	font-size: 14px;
	font-weight: 300;
	background: url(img/4.jpg) left top no-repeat;
	padding-left: 28px;
	padding-bottom: 8px;
}
.rd-box-3 .line-4{
	color: #666666;
	font-size: 14px;
	font-weight: 300;
	background: url(img/5.jpg) left top no-repeat;
	padding-bottom: 30px;
	padding-left: 28px;
}
.rd-box-3 .line-8:last-child .rd-box-3 .line-4{
	padding-bottom: 0;
}
.rd-box-3 .line-5 a{
	
	font-size: 14px;
}
.rd-box-3 .line-6 a{
	background:url(img/6.jpg);
	height: 15px;
	width: 15px;
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	transition:1s all;
}
.rd-box-3 .line-6 a:hover{
	transform: rotate( 180deg );
}
.button1 {
    background: #3498db;
    color: #fff;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    border: 2px solid transparent;
    transition: 1s all;
    letter-spacing: 1px;
	text-decoration:none;
}
.rd-box-3 .line-7{
	position: absolute;
	top: 82px;
	right: 100px;
	background: #fff;
	z-index:1;
}
.rd-box-3 .line-8{
	padding: 25px;
	background: #fff;
	overflow-y: auto;
    height: 366px;
}
.rd-box-3 .line-8 a:hover{
	text-decoration:none;
}
.rd-box-3 .line-10{
	background: #01467d;
	padding: 30px;
	text-align: center;
}
.rd-box-3 .line-11{
	color: #ffffff;
	font-size: 17px;
	padding-bottom: 13px;
}
.rd-box-3 .line-11 span{
	font-weight: 700;
}
.rd-box-3 .line-12 a{
	color: #ecc37e;
	font-size: 15px;
	border-bottom: 1px dashed #ecc37e;
}
.rd-box-3 .line-14{
	padding: 25px;
	background: #3498db;
}
.rd-box-3 .line-20{
	color: #fff;
	font-size: 18px;
}

JavaScript

ymaps.ready(function (){
	var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64], // Москва
        zoom: 10,
		controls: []
    }, {
        searchControlProvider: 'yandex#search'
    });
	
	var objectManager = new ymaps.ObjectManager(
	{
		clusterize: true,
		gridSize: 32,
	});
	
	myMap.geoObjects.add(objectManager);
	

objectManager.add('{"type":"FeatureCollection","features":[{"id":1,"type":"Feature","geometry":{"type":"Point","coordinates":["55.746593417733","37.536248211638"]},"properties":[]},{"id":2,"type":"Feature","geometry":{"type":"Point","coordinates":["55.746593417733","37.536248211638"]},"properties":[]},{"id":3,"type":"Feature","geometry":{"type":"Point","coordinates":["55.747221197249","37.679288997649"]},"properties":[]},{"id":4,"type":"Feature","geometry":{"type":"Point","coordinates":["55.748221197249","37.679288997649"]},"properties":[]},{"id":5,"type":"Feature","geometry":{"type":"Point","coordinates":["55.63259987899074","37.57923444468948"]},"properties":[]}]}');
	
	myMap.events.add('boundschange', function () {
		count = 0;
		
		objectManager.objects.each(function (obj) {
			var objectState = objectManager.getObjectState(obj.id);
			
			if (objectState.found && objectState.isShown) {
				count++;
				console.log(obj.properties)
			}
		});
		
		$('.contNot').text(count);
	});
});