
При создании сайтов государственных или коммерческих организаций, нередко появляется необходимость отобразить подразделение организации на карте. Как правило это не обычная карта от Яндекс или 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.