mtrd map

<style>
  #legend {
    margin-top: 295px;
    height: 650px;
    overflow: auto;
  }
  #map {
    width: 100%;
    height: 600px;
  }
  .legend-item {
    cursor: pointer;
  }
  .legend-item.active {
    font-weight: bold;
  }
  .place-header {
    padding-left: 15px;
  }
  .place-header.collapsed {
    background: url("/bitrix/templates/main/components/bitrix/catalog.section.list/tree/images/plus.gif") no-repeat scroll 0 7px;
  }
  .place-header.expanded {
    background: url("/bitrix/templates/main/components/bitrix/catalog.section.list/tree/images/minus.gif") no-repeat scroll 0 7px;
  }
</style>

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

<div>
  <p>Уважаемые посетители сайта министерства!</p>

  <p>Для повышения удобства в получении информации об учреждениях, находящихся в ведении министерства, а также филиалов, отделов и отделений данных учреждений (всего более 300 объектов), направленности их деятельности, местоположении, схемы проезда, контактных данных вам предлагается ресурс: Карта учреждений социальной защиты Республики Башкортостан.</p>

  <p>Все учреждения выстроены в разрезе административного деления республики и нанесены на карту.</p>

  <p>Выбрав интересующий вас район из списка справа, кликните на него мышью. В открывшемся списке объектов, находящихся на данной территории, выберите нужный &mdash; на карте отобразится его местоположение, адрес и телефон. Также существует возможность перехода на сайт учреждения (или страницу филиала, отдела, отделения).</p>

  <p>Карта реализована на основе поисково-информационного сервиса Яндекс.Карты.</p>
 </div>

<div id="map"></div>

<script type="text/javascript">
  ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
      center: [54.734721, 55.957829],
      zoom: 7
    });

    var clusterer = new ymaps.Clusterer({
      hasHint: false,
      maxZoom: 12
    });

    var addPoints = function(data) {
      var geoObjects = [];
      var places = {};
      var aaa = {};
      var placeNames = [];

      var getPointData = function(item) {
        var html = '<a id="bxid_683599" href="' + item.site + '" target="_blank" >' + item.short_name + '</a><br />' + item.address + '<br />' + item.phone;
        if (item.parent) {
          html = '<strong>' + item.parent.short_name + '</strong><br />' + html;
        }
        return {
          balloonContentBody: html,
          clusterCaption: item.short_name,
          data: item
        }
      }

      var addCoords = function(item) {
        if (item.coords) {
          var coords = [item.coords.lat, item.coords.lng];
          geoObjects.push(new ymaps.Placemark(coords, getPointData(item), {preset: 'islands#blueCircleDotIcon', hideIconOnBalloonOpen: false}));
          item['geoIndex'] = geoObjects.length - 1;

          if (item.place_name) {
			if(item.place_name != 'г. Уфа') {
				if (!!places[item.place_name]) { places[item.place_name].push(item); }
			} else {
				places['г. Уфа и Уфимский район'].push(item);
			}
          }
        }
      }

      for (var i = 0, len = data.length; i < len; i++) {
        var item = data[i];
        if (item.place_name) {
          var placeName = item.place_name;
          if (!places[placeName]) {
            places[placeName] = [];
            placeNames.push(placeName);
          }
        }
      }

      for (var i = 0, len = data.length; i < len; i++) {
        var item = data[i];
        addCoords(item);
        if (item.offices) {
          for (var j = 0, oLen = item.offices.length; j < oLen; j++) {
            var office = item.offices[j];
            office['parent'] = item;
            addCoords(office);
          }
        }
      }

      var html = '<div id="legend">';
      for (var i = 0, len = placeNames.length; i < len; i++) {
        var placeName = placeNames[i];
        html += '<h4 class="place-header collapsed">' + placeName + '</h4><ol class="place-content" style="display: none;">';
        var items = places[placeName];
        for (var j = 0, len2 = items.length; j < len2; j++) {
          var item = items[j];
          var name = item.parent ? item.name : item.short_name;
          var title = item.parent ? item.parent.name + '. ' + item.short_name : item.name;
          html += '<li class="legend-item" title="' + title + '" data-geo-index="' + item.geoIndex + '" id="legendItem' + item.geoIndex + '">' + name + '</li>';
        }
        html += '</ol>';
      }
      html += '</div>';
      $('#side-column').html(html);

      var collapsePlaceHeader = function($header) {
        $header.removeClass('expanded').addClass('collapsed').next().hide();
      }

      var expandPlaceHeader = function($header) {
        $header.removeClass('collapsed').addClass('expanded').next().show();
      }

      var makeLegendItemActive = function($item) {
        $('.legend-item.active').removeClass('active');
        expandPlaceHeader($item.addClass('active').parent().prev());
      }

      $('.place-header').click(function(){
        var $this = $(this);
        if ($this.hasClass('collapsed')) {
          expandPlaceHeader($this)
        }
        else {
          collapsePlaceHeader($this);
        }
      });

      $('.legend-item').click(function() {
        var $this = $(this);
        makeLegendItemActive($this);
        var geoIndex = parseInt($(this).attr('data-geo-index'));
        var placemark = geoObjects[geoIndex];
        var zoom = myMap.getZoom();
        if (zoom < 13) {
          zoom = 13;
        }
        myMap.setCenter(placemark.geometry.getCoordinates(), zoom);
        placemark.balloon.open();
        return false;
      });

      clusterer.add(geoObjects);

      myMap.geoObjects.add(clusterer);

      myMap.geoObjects.events.add('click', function (e) {
        var object = e.get('target');
        var item = object.properties.get('data');
        if (item && item.geoIndex != null) {
          var $legendItem = $('#legendItem' + item.geoIndex);
          makeLegendItemActive($legendItem);
          var $legend =  $('#legend');
          var top = $legend.scrollTop() - $legend.offset().top + $legendItem.offset().top - 100;
          $('#legend').animate({
            scrollTop: top
          }, 400);
        }
      });
    }

    $.ajax({
      type: 'GET',
      url: 'http://api.mintrudrb.ru/institutions_with_offices?callback=?',
      jsonpCallback: 'jsonCallback',
      dataType: 'jsonp',
      success: function(data) {
        addPoints(data);
      }
    });
  });
</script>