deepblack

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.75985606898725,37.61054750000002],
            zoom: 12
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark([55.75985606898725,37.61054750000002], {
            // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
            balloonContentHeader: "Балун метки",
            balloonContentBody: "Содержимое <em>балуна</em> метки",
            balloonContentFooter: "Подвал",
            hintContent: "Хинт метки"
        });

    myMap.geoObjects.add(myPlacemark);

    // Открываем балун на карте (без привязки к геообъекту).
    myMap.balloon.open([55.7591,37.61053], "Содержимое балуна", {
        // Опция: не показываем кнопку закрытия.
        closeButton: false
    });

    // Показываем хинт на карте (без привязки к геообъекту).
    myMap.hint.open(myMap.getCenter(), "Одинокий хинт без метки", {
        // Опция: задержка перед открытием.
        openTimeout: 1500
    });
}

ymaps.ready(init);

function init() {
  let myMap = new ymaps.Map('map', {
    center: [55.755814, 37.617635],
    zoom: 14,
    controls: ['routeButtonControl', 'typeSelector', 'fullscreenControl'],
  }, {
    searchControlProvider: 'yandex#search'
  }),
      objectManager = new ymaps.ObjectManager({
        clusterize: true,
        gridSize: 64,
        clusterIconLayout: "default#pieChart"
      });
  myMap.geoObjects.add(objectManager);
  
  let listBoxItems = ['2G', '3G', '4G'].map(function(title) {
    return new ymaps.control.ListBoxItem({
      data: {
        content: title
      },
      state: {
        selected: true
      }
    })
  }),
      listBoxControl = new ymaps.control.ListBox({
        data: {
          content: 'Filter',
          title: 'Filter'
        },
        items: listBoxItems,
        state: {
          expanded: true,
          filters: listBoxItems.reduce(function(filters, filter) {
            filters[filter.data.get('content')] = filter.isSelected();
            return filters;
          }, {})
        }
      });
  myMap.controls.add(listBoxControl);
  
  listBoxControl.events.add(['select', 'deselect'], function(e) {
    let listBoxItem = e.get('target');
    let filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
    filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
    listBoxControl.state.set('filters', filters);
  });
  
  let filterMonitor = new ymaps.Monitor(listBoxControl.state);
  filterMonitor.add('filters', function(filters) {
    objectManager.setFilter(getFilterFunction(filters));
  });

  function getBand(e, i, a){
    let Band = this.valueOf();
    return e === Band;
  }
  
  function getFilterFunction(categories){
    return function(obj){
      let bsBands = obj.has_bands;
      let has2G = bsBands.find(getBand, '2G');
      let has3G = bsBands.find(getBand, '3G');
      let has4G = bsBands.find(getBand, '4G');
      return (categories['2G'] && has2G) || (categories['3G'] && has3G) || (categories['4G'] && has4G);
    }
  }
  
  let data = {
    "count": 4,
    "next": null,
    "previous": null,
    "type": "FeatureCollection",
    "features": [
        {
            "id": 1,
            "region_prefix": "97",
            "cell_site_number": 1,
            "description": "",
            "address": "",
            "commissioning": "",
            "bs_id": "",
            "height_asl": 0,
            "bands": [
                {
                    "name": "2G",
                    "frequency": "900"
                },
                {
                    "name": "2G",
                    "frequency": "1800"
                }
            ],
            "status": true,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [55.755815, 37.613]
            },
            "properties": {
                "balloonContentHeader": "balloonContentHeader",
                "balloonContentBody": "balloonContentBody",
                "balloonContentFooter": "balloonContentFooter",
                "clusterCaption": "clusterCaption",
                "hintContent": "hintContent",
                "iconCaption": "2G"
            },
            "has_bands": [
                "2G"
            ]
        },
        {
            "id": 2,
            "region_prefix": "97",
            "cell_site_number": 2,
            "description": "",
            "address": "",
            "commissioning": "",
            "bs_id": "",
            "height_asl": 0,
            "bands": [
                {
                    "name": "2G",
                    "frequency": "900"
                },
                {
                    "name": "2G",
                    "frequency": "1800"
                },
                {
                    "name": "3G",
                    "frequency": "2100"
                },
                {
                    "name": "4G",
                    "frequency": "1800"
                },
                {
                    "name": "4G TDD",
                    "frequency": "2600"
                }
            ],
            "status": true,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [55.759, 37.613]
            },
            "properties": {
                "balloonContentHeader": "balloonContentHeader",
                "balloonContentBody": "balloonContentBody",
                "balloonContentFooter": "balloonContentFooter",
                "clusterCaption": "clusterCaption",
                "hintContent": "hintContent",
                "iconCaption": "2G 3G 4G"
            },
            "has_bands": [
                "3G",
                "2G",
                "4G"
            ]
        },
        {
            "id": 3,
            "region_prefix": "97",
            "cell_site_number": 3,
            "description": "",
            "address": "",
            "commissioning": "",
            "bs_id": "",
            "height_asl": 0,
            "bands": [
                {
                    "name": "3G",
                    "frequency": "2100"
                }
            ],
            "status": true,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [55.7204, 37.6167]
            },
            "properties": {
                "balloonContentHeader": "balloonContentHeader",
                "balloonContentBody": "balloonContentBody",
                "balloonContentFooter": "balloonContentFooter",
                "clusterCaption": "clusterCaption",
                "hintContent": "hintContent",
                "iconCaption": "3G"
            },
            "has_bands": [
                "3G",
            ]
        },
        {
            "id": 4,
            "region_prefix": "97",
            "cell_site_number": 4,
            "description": "",
            "address": "",
            "commissioning": "",
            "bs_id": "",
            "height_asl": 0,
            "bands": [
                {
                    "name": "4G",
                    "frequency": "1800"
                },
                {
                    "name": "4G TDD",
                    "frequency": "2600"
                }
            ],
            "status": true,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [55.7704, 37.6119]
            },
            "properties": {
                "balloonContentHeader": "balloonContentHeader",
                "balloonContentBody": "balloonContentBody",
                "balloonContentFooter": "balloonContentFooter",
                "clusterCaption": "clusterCaption",
                "hintContent": "hintContent",
                "iconCaption": "4G"
            },
            "has_bands": [
                "4G"
            ]
        }]}
        objectManager.add(data);
}