Битрикс: Филиалы организации на карте России

При создании сайтов государственных или коммерческих организаций, нередко появляется необходимость отобразить подразделение организации на карте. Как правило это не обычная карта от Яндекс или Google с начертанием улиц, а карта разбитая на субъекты РФ. В интернете есть некоторые готовы решения, но они платные, а не готовые слишком сложные в использовании.

Недавно у меня появилась задача, сделать такую карту для сайта на Битриксе. Принцип примерно такой: есть инфоблок филиалы, у филиалов есть названия, телефоны, адреса и т.д., необходимо при добавлении нового филиала выводить метку на карту России. Поехали!

1. Создаем необходимые свойства

Для того, что бы мы могли добавлять метку в нужном месте карты, необходимо всего 2 параметра: широта и долгота. Создадим эти свойства:

2. Редактируем или создаем шаблон вывода

В моём случае я использую компонент news для вывода списка филиалов, по-этому я правлю шаблон по адресу: /templates/my_template/components/bitrix/news/branches/bitrix/news.list/.default. Надеюсь не нужно объяснять как создать свой шаблон вывода, что это такое и т.д. Уверен, Вы уже знаете это!

В нужное место, там где мы планируем отобразить карту филиалов, вставляем следующий код:

<div id="map"></div>
 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
<script>
ymaps.ready(init);

function init() {

    var map = new ymaps.Map('map', {
        center: [60, 100],
        zoom: 3,
        type: null,
        controls: ['zoomControl']
    },{
        //restrictMapArea: [[10, 10], [85,-160]]
    });
	map.behaviors.disable('scrollZoom'); 
    map.controls.get('zoomControl').options.set({size: 'small'});
    // Добавим заливку цветом.
    var pane = new ymaps.pane.StaticPane(map, {
        zIndex: 100, css: {
            width: '100%', height: '100%', backgroundColor: '#ffffff'
        }
    });
    map.panes.append('white', pane);
    // Зададим цвета федеральных округов.
    var districtColors = {
        cfo: '#ffff6f',
        szfo: '#54cbba',
        yfo: '#f9768e',
        skfo: '#9a5597',
        pfo: '#30cb05',
        urfo: '#bac1cc',
        sfo: '#16acdb',
        dfo: '#fbc520'
    };

		
    // Создадим балун.
    var districtBalloon = new ymaps.Balloon(map);
    districtBalloon.options.setParent(map.options);
	
 <? foreach ($arResult['ITEMS'] as $coordinateItem): ?>
 
 <? 
 $ID_ITEM = $coordinateItem['ID'];
 $LATITUDE = $coordinateItem['DISPLAY_PROPERTIES']['LATITUDE']['DISPLAY_VALUE'];
 $LONGITUDE = $coordinateItem['DISPLAY_PROPERTIES']['LONGITUDE']['DISPLAY_VALUE'];
 $NAME_BRANCHE = $coordinateItem['NAME'];
 $ADRESS_BRANCHE = $coordinateItem['DISPLAY_PROPERTIES']['ADDRESS']['DISPLAY_VALUE'];
 $EMAIL_BRANCHE = $coordinateItem['DISPLAY_PROPERTIES']['EMAIL']['DISPLAY_VALUE'];
 $PHONES_BRANCHE = $coordinateItem['DISPLAY_PROPERTIES']['PHONES']['DISPLAY_VALUE'];
//Внимание! Здесь я добавил некоторые нужные мне поля, 
//возможно их у Вас не будет. 
//Затем, эти данные выводятся при клике на метку, код которой описан ниже.
 ?>
 

 	var myPlacemark<? echo $ID_ITEM; ?> = new ymaps.Placemark([<? echo $LATITUDE; ?>, <? echo $LONGITUDE; ?>], {
        balloonContentHeader: "<? echo $NAME_BRANCHE; ?>",
        balloonContentBody: [
            '<address>',
            '<? echo $ADRESS_BRANCHE; ?>',
            '<br/>',
            '<? echo $EMAIL_BRANCHE ?>',
			'<br/>',
			 '<? echo $PHONES_BRANCHE ?>',
            '</address>'
        ].join('')
    }, {
        preset: 'islands#redDotIcon'
    });
	map.geoObjects.add(myPlacemark<? echo $ID_ITEM; ?>);



  <? endforeach; ?>
	
	
    // Загрузим регионы.
    ymaps.borders.load('RU', {
        lang: 'ru',
        quality: 2
    }).then(function (result) {
        // Создадим объект, в котором будут храниться коллекции с нашими регионами.
        var districtCollections = {};
        // Для каждого федерального округа создадим коллекцию.
        for (var district in districtColors) {
            districtCollections[district] = new ymaps.GeoObjectCollection(null, {
                fillColor: districtColors[district],
                strokeColor: districtColors[district],
                strokeOpacity: 0.3,
                fillOpacity: 0.3,
                hintCloseTimeout: 0,
                hintOpenTimeout: 0
            });
            // Создадим свойство в коллекции, которое позже наполним названиями субъектов РФ.
            districtCollections[district].properties.districts = [];
        }

        result.features.forEach(function (feature) {
            var iso = feature.properties.iso3166;
            var name = feature.properties.name;
            var district = districtByIso[iso];
            // Для каждого субъекта РФ зададим подсказку с названием федерального округа, которому он принадлежит.
           // feature.properties.hintContent = districtsHints[district];
            // Добавим субъект РФ в соответствующую коллекцию.
            districtCollections[district].add(new ymaps.GeoObject(feature));
            // Добавим имя субъекта РФ в массив.
            districtCollections[district].properties.districts.push(name);

        });
        // Создадим переменную, в которую будем сохранять выделенный в данный момент федеральный округ.
        var highlightedDistrict;
        for (var districtName in districtCollections) {
            // Добавим коллекцию на карту.
            map.geoObjects.add(districtCollections[districtName]);

            // При выводе курсора за пределы объекта вернем опции по умолчанию.
            districtCollections[districtName].events.add('mouseleave', function (event) {
                var district = event.get('target').getParent();
                if (district !== highlightedDistrict) {
                    district.options.set({fillOpacity: 0.3});
                }
            });

        }
		
		    
    })
}
</script>

Обращаю Ваше внимание на то, что в настройках компонента в разделе "Настройка списка новостей" должны быть указаны созданные нами свойства LATITUDE и LONGITUDE.