yandex

MapGeo: автоматическое выделение страны на карте по роли пользователя

Плагины

Настройка автоматического выделения страны на карте MapGeo при загрузке страницы в зависимости от роли пользователя с использованием PHP и JavaScript

Задача:

При загрузке страницы требуется выделить регион (страну) пользователя на основании его роли.

Решение:

region_cod — это код страны, задаётся в настройках карты MapGeo при добавлении регионов.
region_id — это ID SVG-элемента, который соответствует стране. Он находится внутри тега <g> и определяется через инструменты разработчика (DevTools), при наведении на нужный регион.

HTML код:


<g class="imapsSprite-group imapsContainer-group imapsMapObject-group imapsMapPolygon-group active-region"
   fill="#ffed00" stroke="#f9f9f9" stroke-opacity="1" stroke-width="1.1646772973640331"
   data-listener-attached="true" id="id-156">
  <g class="imapsContainer imapsMapObject imapsMapPolygon">
    <g class="imapsSprite-group imapsPolygon-group" shape-rendering="auto">
      <path class="imapsPolygon" d="M367.73494917069854,...."></path>
    </g>
  </g>
</g>

PHP код (в файл functions.php):


// Подключаем скрипт и передаём регион пользователя в JavaScript
function theme_scripts_styles()
{
  wp_enqueue_script('app', get_stylesheet_directory_uri() . '/assets/dist/js/app.min.js', [], false, true);

  // Если пользователь авторизован
  if (is_user_logged_in()) {
    $current_user = wp_get_current_user();

    // Сопоставление ролей с кодами и ID регионов
    $regions = [
      'kazakhstan_customer'    => ['region_cod' => 'KZ', 'region_id' => 'id-156'],
      'turkmenistan_customer'  => ['region_cod' => 'TM', 'region_id' => 'id-171'],
      'mongolia_customer'      => ['region_cod' => 'MN', 'region_id' => 'id-176'],
      'tajikistan_customer'    => ['region_cod' => 'TJ', 'region_id' => 'id-166'],
      'kyrgyzstan_customer'    => ['region_cod' => 'KG', 'region_id' => 'id-161'],
    ];

    // Если роль пользователя найдена — передаём данные в JS
    foreach ($regions as $role => $region_data) {
      if (in_array($role, $current_user->roles)) {
        wp_localize_script('app', 'userRegion', $region_data);
        break;
      }
    }
  }
}

add_action('wp_enqueue_scripts', 'theme_scripts_styles', PHP_INT_MAX);

mapUID — числовой ID карты. Его можно узнать из тега <div id="map_9976220"> через инструменты разработчика.

CSS код:


/* FOR MAP ON MAIN PAGE */
.active-user-region {
  fill: #ffcc00 !important; /* Цвет выделенного региона */
  cursor: pointer;          /* Курсор при наведении */
}
/* } FOR MAP ON MAIN PAGE */

JavaScript код:


// Ждём полной загрузки DOM
document.addEventListener("DOMContentLoaded", function () {
  // Проверяем наличие данных о регионе
  if (window.userRegion && window.userRegion.region_cod) {
    highlightUserRegionOnMap(9976220, window.userRegion.region_cod, window.userRegion.region_id);
  }
});

// Функция выделения региона
function highlightUserRegionOnMap(mapUID, regionCod, region_id) {
  const mapContainer = document.getElementById('map_' + mapUID);
  if (!mapContainer) return;

  // Ждём, пока карта будет готова к взаимодействию
  mapContainer.addEventListener('mapready', function () {
    const urlParams = new URLSearchParams(window.location.search);

    // Если нет параметра mregion в URL — выделяем регион пользователя
    if (!urlParams.get('mregion')) {
      setTimeout(() => {
        // Выделяем регион с помощью MapGeo API
        iMapsManager.select(mapUID, regionCod);
        // console.log('region_id', region_id); // Раскомментируйте для отладки
      }, 500);

      setTimeout(() => {
        if (region_id) {
          const region_map = document.getElementById(region_id);
          // console.log('region_map', region_map); // Раскомментируйте для отладки
          region_map.classList.add('active-user-region'); // Добавляем CSS-класс для подсветки
        }
      }, 1000);
    }
  });
}

1