JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="panel" id="panel">
  <div class="panel__group">
    <div class="panel__checkers">
      <label class="panel__checker"><input class="js-checker" type="checkbox" name="Пони" checked> Пони</label>
      <label class="panel__checker"><input class="js-checker" type="checkbox" name="СПСР" checked> СПСР</label>
    </div>
    <div class="panel__searcher">
      <input class="js-search-input" type="text" name="search"><button class="js-search-submit">найти</button>
    </div>
  </div>  
  <div class="panel__group">
    <div class="panel__menu js-menu"></div>    
  </div>  
</div>
<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.min.js"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
        
        body {
          display: flex;
        }
        #map {
          height: 100%;
        }
        
        #panel {
          background: #fff;
        }
        
        .panel__menu {
          height:100%;
          overflow-y: auto;
        }
        .panel__menu-item {
          display: block;
        }
        .panel__menu-item:hover {
          color: blue;
          cursor: pointer;
        }
        .panel__checker {
             display: block;
        }

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 7,
            controls: []
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 64,
            // Макет метки кластера pieChart.
            clusterIconLayout: "default#pieChart"
        });
    	myMap.geoObjects.add(objectManager);
      
      var $menu = $('.js-menu');
      var $checkers = $('.js-checker').on('change', filterObjects);
      var $searchInput = $('.js-search-input');
      var $searchSubmit = $('.js-search-submit').on('click', filterObjects);
      
      $searchSubmit.trigger('click', filterObjects);
      
      function filterObjects() {
      	var checkList = {};
      	$checkers.each(function(){
      		var $checker = $(this);
        	checkList[$checker.attr('name')] = $checker.is(':checked');        
      	});
        var searchText = $searchInput.val();
        var renderObjects = [];
      	objectManager.setFilter(function(object){    				
        	var itemText = object.properties.myComp;
          var itemTown = object.properties.myTown;
        	var isCheckList = checkList[itemText];
          var isSearchText = (searchText == '') || (itemTown.toLowerCase().indexOf(searchText.toLowerCase()) >= 0)
          var isFiltered = isCheckList && isSearchText;
          if (isFiltered)
          	renderObjects.push(object)
					return isFiltered;
				});
        $menu.empty();   
        $.each(renderObjects, function(index, object) {
        	var $menuItem = $('<div"></div>');
          $menuItem.addClass('panel__menu-item');
          $menuItem.text(object.properties.balloonContent);
          $menuItem.on('click', function() {
         ...