MapGeo: Automatically Highlight a Country on the Map Based on User Role

Goal:

On page load, highlight the user's country based on their WordPress user role.

Solution:

region_cod — the country code, set in MapGeo map settings when adding regions.
region_id — the ID of the corresponding SVG element inside the <g> tag, which can be found using browser Developer Tools when hovering over the desired region.

HTML example:

<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 code (inside functions.php):

// Enqueue script and pass the user's region to JavaScript
function theme_scripts_styles()
{
  wp_enqueue_script('app', get_stylesheet_directory_uri() . '/assets/dist/js/app.min.js', [], false, true);

  // If the user is logged in
  if (is_user_logged_in()) {
    $current_user = wp_get_current_user();

    // Map user roles to region codes and IDs
    $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'],
    ];

    // If user role matches, pass region data to JavaScript
    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 — the numeric map ID. You can find it by inspecting the <div id="map_9976220"> element in browser Developer Tools.

CSS code:

/* FOR MAP ON MAIN PAGE */
.active-user-region {
  fill: #ffcc00 !important; /* Highlight color */
  cursor: pointer;          /* Pointer on hover */
}
/* } FOR MAP ON MAIN PAGE */

JavaScript code:

// Wait for the DOM to fully load
document.addEventListener("DOMContentLoaded", function () {
  // Check if userRegion is available
  if (window.userRegion && window.userRegion.region_cod) {
    highlightUserRegionOnMap(9976220, window.userRegion.region_cod, window.userRegion.region_id);
  }
});

// Function to highlight region on map
function highlightUserRegionOnMap(mapUID, regionCod, region_id) {
  const mapContainer = document.getElementById('map_' + mapUID);
  if (!mapContainer) return;

  // Wait until the map is ready
  mapContainer.addEventListener('mapready', function () {
    const urlParams = new URLSearchParams(window.location.search);

    // If "mregion" is not in the URL, highlight the user's region
    if (!urlParams.get('mregion')) {
      setTimeout(() => {
        // Use MapGeo API to select the region
        iMapsManager.select(mapUID, regionCod);
        // console.log('region_id', region_id); // Uncomment for debugging
      }, 500);

      setTimeout(() => {
        if (region_id) {
          const region_map = document.getElementById(region_id);
          // console.log('region_map', region_map); // Uncomment for debugging
          region_map.classList.add('active-user-region'); // Apply highlighting class
        }
      }, 1000);
    }
  });
}