https://softline.ru/local/templates/softline/components/bitrix/news.list/map_v3/script.js?17872141584332

1document.addEventListener("DOMContentLoaded", function (event) {
2  initMap();
3
4  // Установка обработчика события на элемент с классом about-contacts-info__close 
5  $('.close__baloon').on('click', (function (e) {
6    var aboutContactsItem = document.querySelector(".map__panel");
7    $(aboutContactsItem).removeClass('open');
8    $('.baloon.open').removeClass('open');
9  }))
10
11  setTimeout(function () {
12    document.getElementById("map").style.display = "block";
13  }, 3000);
14});
15
16async function loadJsonData(url) {
17  try {
18    const response = await fetch(url);
19    if (!response.ok) {
20      throw new Error('Ошибка при получении данных: ' + response.statusText);
21    }
22    const data = await response.json();
23    return data;
24  } catch (error) {
25    console.error('Ошибка при загрузке данных: ', error);
26  }
27}
28
29async function initMap() {
30  await ymaps3.ready;
31
32  const {
33    YMap,
34    YMapDefaultSchemeLayer,
35    YMapTileDataSource,
36    YMapLayer,
37    YMapDefaultFeaturesLayer,
38    YMapMarker
39  } = ymaps3;
40
41  const map = new YMap(document.getElementById('map'), {
42    location: {
43      center: [80.165935, 60.040454],
44      zoom: 4
45    }
46  });
47
48  const layer = new YMapDefaultSchemeLayer({
49    customization: [{
50      tags: {
51        any: ['country']
52      },
53      elements: 'label',
54      stylers: [{
55        color: '#c0e3c3',
56        opacity: 0,
57      }]
58    }]
59  });
60
61  map.addChild(new YMapDefaultSchemeLayer());
62  map.addChild(new YMapDefaultFeaturesLayer());
63  map.addChild(layer);
64
65  // Загружаем данные из JSON-файла 
66  // const data = await loadJsonData('/map-data-json.php');
67  const data = await loadJsonData('/about/map/get-office-coordinates.php');
68  const markers = {};
69  if (data) {
70    console.log("data loaded", data);
71    data.forEach(item => {
72      const markerElement = document.createElement('div');
73      markerElement.className = 'marker-class';
74      markerElement.data = 'marker-class';
75      markerElement.setAttribute('data-reg_id', item.reg_id);
76      markerElement.innerHTML = ' <img src="/local/templates/softline/assets/images/map/Location.svg" alt="map"> ';
77
78      const marker = new YMapMarker({
79        coordinates: item.coordinates,
80        draggable: false,
81        mapFollowsOnDrag: true,
82        stylers: [{
83          cursor: 'pointer',
84        }],
85      },
86        markerElement
87      );
88
89      // Добавляем событие клика на маркер
90      markerElement.addEventListener('click', () => {
91        const cursorPosition = {
92          x: event.clientX,
93          y: event.clientY
94        };
95        showPoint(item.id);
96      });
97
98      // Добавляем маркер на карту
99      map.addChild(marker);
100
101      // Сохраняем маркер в объекте markers
102      markers[item.reg_id] = {
103        marker,
104        coordinates: item.coordinates // сохраняем координаты
105      };  // Сохраняем маркер в словарь
106    });
107  }
108
109  // Обработчик событий для кнопок городов
110  var buttons = document.querySelectorAll('.map__city');
111  buttons.forEach(function (btn) {
112    btn.onclick = function (e) {
113      e.preventDefault();
114      var coord = btn.dataset.coord.split(',');
115      map.update({
116        location: {
117          center: [coord[1], coord[0]], // Center of the map
118          zoom: 11, // Zoom level
119          duration: 200, // Animation of moving map will take 200 milliseconds
120          easing: 'ease-in-out' // Animation easing function
121        }
122      });
123  }});
124  if (buttons.length === 1) {
125    buttons[0].click();
126  }
127}
128
129function showPoint(id) {
130  hidePoint();
131  var aboutContactsItem = document.querySelector(".map__panel");
132  aboutContactsItem.style.display = "block";
133  $(aboutContactsItem).addClass('open');
134  $('.baloon.id'+id).addClass('open');
135}
136
137// Функция, которая будет удалять класс _active
138function hidePoint() {
139  var aboutContactsItem = document.querySelector(".map__panel");
140  $(aboutContactsItem).removeClass('open');
141  $('.baloon.open').removeClass('open');
142}