JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://yandex.github.io/ymaps-pie-chart-clusterer/build/pie-chart-clusterer.min.js"></script>
<div class="well well-lg"><div id="FogMap"></div></div>

CSS

html, body, #FogMap {
    width: 100%; 
    min-height: 650px; 
    padding: 0; 
    margin: 0;
}

ul.nav.nav-pills {
    text-align: right;
}

.nav-pills>li {
    float: none;
    display: inline-block;
}

.alert{
    margin-top: 3px;
    margin-bottom: 0px;
}

/* Simple message styles customization */
#errorMessages {
    border-left: 5px solid #a94442;
    padding-left: 15px;
}
#errorMessages li {
    list-style-type: none;
}
#errorMessages li:before {
    content: '\b7\a0';
}

.form-control-feedback{
    right: 15px;
}

.table > thead > tr > td.critical,
.table > tbody > tr > td.critical,
.table > tfoot > tr > td.critical,
.table > thead > tr > th.critical,
.table > tbody > tr > th.critical,
.table > tfoot > tr > th.critical,
.table > thead > tr.critical > td,
.table > tbody > tr.critical > td,
.table > tfoot > tr.critical > td,
.table > thead > tr.critical > th,
.table > tbody > tr.critical > th,
.table > tfoot > tr.critical > th {
  background-color: #F9D391;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #FF7E7E;
}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #C2D1F4;
}

JavaScript

ymaps.ready(function () {
                var fogMapObj = new ymaps.Map('FogMap', {
                center: [55.75297465912611,37.61803561040902],
                zoom: 16
            });
                ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
                    var clusterer = new PieChartClusterer();
                    var points = [
                        new ymaps.Placemark(
                    [55.754652958805444,37.62159018255285],
                    {hintContent: '56405c4f51737',
                    balloonContent: '<b>ГУМ</b><br />'},
                    {preset: 'islands#greyIcon'}
                        ),
                        new ymaps.Placemark(
                    [55.75553288033185,37.61732143695668],
                    {hintContent: '5640634f73440',
                    balloonContent: '<b>Исторический музей</b><br />Описание'},
                    {preset: 'islands#redIcon'}
                        )                   
                        ];
                    clusterer.add(points);
                    fogMapObj.geoObjects.add(clusterer);
                    fogMapObj.controls.remove('searchControl');
                    fogMapObj.controls.remove('mapTools');
                    fogMapObj.controls.remove('typeSelector');
                    fogMapObj.controls.remove('trafficControl');

                });
            });