yandex

MapGeo - Interactive Geo Maps: выделение региона при клике с помощью JavaScript

Плагины

Установка активных регионов на карте страны при клике и выделении их цветом с помощью JavaScript для улучшения взаимодействия с картой

Задача:

При нажатии на карту сделать ее активной, обозначить цветом и зафиксировать это состояние.

Решение:

Для реализации этого функционала используется JavaScript. При клике на карту регион становится активным, его выделяют цветом, и это состояние сохраняется.

CSS код:


/* FOR MAP ON MAIN PAGE { */

.active-region {
  fill: #000000 !important;
  cursor: pointer;
}

/* } FOR MAP ON MAIN PAGE */

JavaScript код:


document.addEventListener("DOMContentLoaded", function () {

  setTimeout(() => {
      document.querySelectorAll('.imapsSprite-group.imapsContainer-group.imapsMapObject-group.imapsMapPolygon-group')
        .forEach((element) => {
          // Проверяем, есть ли нужный атрибут fill
          if (element.getAttribute('fill') === '#ffed00') {

            // Защита от повторного навешивания обработчиков
            if (!element.dataset.listenerAttached) {
              element.dataset.listenerAttached = 'true';

              element.addEventListener('click', function () {
                // Удалим класс у всех
                document.querySelectorAll('.imapsSprite-group.imapsContainer-group.imapsMapObject-group.imapsMapPolygon-group')
                  .forEach((el) => el.classList.remove('active-region'));

                // Добавим класс текущему элементу
                this.classList.add('active-region');

                // Выведем ID (раскомментировать при необходимости)
                // console.log('Clicked region ID:', this.id);
              });
            }
          }
        });
    }, 1500);
});

1