Карта субъектов РФ в SVG

Карта реализована на основе векторной графики SVG, а вывод дополнительной информации по субъектам на JS с использованием библиотеки jQuery

Пример:

Саратовская область (зеленая) и Якутия (оранжевая) кликабельные. По клику открывается всплывающее окно

На экранах менее 768 пикселей, ниже карты появляются ссылки с названиями субъектов для дублирования клика по области

×

HTML:

Для того, чтобы сделать область кликабельной и открывать дополнительную информацию по региону, нужно добавить элемент <div id="RU-SAR" class="district-text"> ... </div> по аналогии с примером ниже, где RU-SAR - код субъекта РФ.

Открыть список всех значений
SVG-код карты взят с github.com

CSS:

Для того, чтобы добавить цвет нужному субъекту, следует прописать класс .rf-map [data-code="RU-SAR"] { ... }, где RU-SAR - код региона.

Открыть список всех значений

Классы dropfill и mainfill служат для изменения цвета нажатой области и сброса всех остальных. При желании их можно удалить из CSS и JS.

jQuery:

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.
Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона
Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки
Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Смотрите также:

Геолокация на PHP

Определение координат и другой информации по IP адресу, реализованное на PHP

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Олег:

    Офигенно, спасибо, компактно, красиво и без зависимостей!

    Спасибо и чатугпт, который переписал JS на vanilla-JS без всяких jquery 🙂 Вот, надеюсь, парсер пропустит и поможет кому:

    document.addEventListener("DOMContentLoaded", function () {
    const dataCodeElements = document.querySelectorAll('[data-code]');
    const district = document.querySelector('.district');
    const districtSpan = district.querySelector('span');
    const rfMap = document.querySelector('.rf-map');
    const districtLinks = document.querySelector('.district-links');

    dataCodeElements.forEach(el => {
        el.addEventListener('mouseenter', () => {
            districtSpan.textContent = el.getAttribute('data-title');
            district.style.display = 'block';
        });

        el.addEventListener('mouseleave', () => {
            if (!rfMap.classList.contains('open')) {
                district.style.display = 'none';
            }
        });
    });

    rfMap.addEventListener('click', function (event) {
        const target = event.target.closest('[data-code], .district-links div');
        if (!target) return;

        const id = target.getAttribute('data-code');
        const title = target.getAttribute('data-title');
        const targetTextEl = document.getElementById(id);

        if (targetTextEl && targetTextEl.textContent.trim() !== '') {
            district.style.display = 'block';
            districtSpan.textContent = title;

            dataCodeElements.forEach(el => el.classList.add('dropfill'));
            target.classList.add('mainfill');
            rfMap.classList.add('open');
            targetTextEl.style.display = 'block';
            targetTextEl.classList.add('fade-in');
        }
    });

    const closeBtn = document.querySelector('.close-district');
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            rfMap.classList.remove('open');
            dataCodeElements.forEach(el => {
                el.classList.remove('dropfill', 'mainfill');
            });
            document.querySelectorAll('.district-text').forEach(el => {
                el.style.display = 'none';
            });
            district.style.display = 'none';
        });
    }

    dataCodeElements.forEach(el => {
        const id = el.getAttribute('data-code');
        const title = el.getAttribute('data-title');
        const targetTextEl = document.getElementById(id);
        if (targetTextEl && targetTextEl.textContent.trim() !== '') {
            const div = document.createElement('div');
            div.setAttribute('data-code', id);
            div.setAttribute('data-title', title);
            div.textContent = title;
            districtLinks.appendChild(div);
        }
    });
});
    Ответить
    • Alexander:

      Спасибо за код!
      Проверил, все работает.

      Ответить
  • Илья:

    Подскажите, какая проекция использовалась для создания карты? И очень нужны географические координаты крайних точек карты (север / юг / запад / восток).

    Ответить
    • Илья:

      Визуально похоже на проекцию Альберса. Но географические координаты границ карты все еще не понятны...

      Ответить
    • Alexander:

      SVG код карты с github, я добавил только новые регионы.

      Ответить
  • Юрий:

    Можно все файлы скачать. А то что-то не работает при копирование кодов со страницы.

    Ответить
    • Alexander:

      Я изначально ставил цель показать, как тот или иной код работает на сайте, а не в вакууме.
      Соотв. не делаю архивов для скачивания и т.д.

      Что вы видите на этой странице - так должно быть и у вас (исключения составляют шрифты и другие моменты вашего сайта, которые могут менять вид или мешать его работе, хотя именно это я и стараюсь минимизировать.)

      Если это не так, то вы что то делаете не так

      Ответить
  • sergey:

    что вы все ноете за СВо не за СВО, обновить карту
    вам пример дали КАК можно сделать, а там сами добавляетй чего хотите, хоть Марс добавте на свою карту.
    Чел старался запили крутой сайт с примерами для ленивых, а его тут обсирают

    Ответить
  • Вячесла:

    Отличная карта! Единственное пожелание - в дату можно было бы еще код субъекта добавить для большего удобства. А наименования субъектов привести в соответствие с ФИАС

    Ответить
  • Виктор:

    А есть ли возможность на этой карте привязать реальные координаты по широте и долготе различных точек, городов?

    Ответить
    • Alexander:

      Нет конечно, это же не карта, а векторная картинка

      Ответить
      • Александр:

        А вообще есть ли возможность внутри регионов добавлять точки видимые?
        И подскажите, вроде у Вас еще недавно висела карта с новыми (присоединенными регонами Херсон, Запророжье, Донецк, Луганск) ?

        Ответить
        • Alexander:

          Я карту поменял на другую, с Севастополем, никак не доберусь добавить регионы.
          А точки можно добавить, открываете любой онлайн редактор SVG, закидываете туда карту эту, и далее добавляете / меняете что нужно.
          При сохранении она скорее всего удалит все дата атрибуты, поэтому потом нужно будет взять код только этих точек и добавить в исходный код карты, добавив атрибуты.

          Ответить
          • Эщкерекович:

            А зачем убрали новые регионы? Нормальная карта была.
            Причем совсем недавно. Где можно предыдущую версию с новыми регионами найти?

            Ответить
          • SHAMAN:

            А где новые регионы? Вы против СВО?

            Ответить
            • Alexander:

              В процессе.
              У старой карты непонятно с лицензией было, о которой многие спрашивали.
              А эта по MIT из открытого источника

              Ответить
  • Александр:

    Здравствуйте! скопировал код, но почему-то не отображаются регионы, не всплывает окно при клике на кликабельные регионы и не отображаются совсем несколько регионов.. Не подскажите, что может быть?

    Ответить
    • Александр:

      https://ibb.co/hfsFFbg - скриншот

      Ответить
    • Alexander:

      Вы дайте лучше ссылку на страницу, где это расположено, т.к. вы точно что то не так скопировали

      Ответить
  • Денис:

    На реакте это сильно сложно будет реализовать ? SVG придется в компоненту запихивать ?

    Ответить
  • Ольга:

    Не хватает Севастополя на карте, как добавить?

    Ответить
    • Захар:

      Очень нужен Севастополь! это отдельный субъект

      Ответить
  • Александр:

    Здравствуйте. Вставил код, карта появилась, но почему-то не работает "кликабельность" -> district не получает show. При этом js добавил ...
    Возможен ли какой-то конфликт js? Вообще понять не могу 🙁

    Ответить
    • Alexander:

      Смотреть нужно ошибки в консоли

      Ответить
      • Александр:

        так нет ошибок ... сломал я уже голову 🙂 на сайте у вас работает и добавляется при наведении display: none; ... а у меня на сайте буд-то конфликт с jquery. Ладно, буду искать 🙂 Спасибо за карту!

        Ответить
      • Александр:

        Разобрался ... с jquery-3.7.0.min.js не работает, а с jquery-3.7.1.min.js работает.

        Ответить
  • Андрей:

    Спасибо большое, Отличная работа, только думал, как я буду все это отрисовывать в incscape и готовиться тратить время.
    И вот вуаля, просто подарок.

    Ответить
  • Константин:

    А как добавить новые области к уже имеющейся карте, проблема в том что когда я копирую код (новые регионы) встают выше, двигать каждую точку это очень долго, что делать подскажите?

    Ответить
    • Alexander:

      Не совсем понял... Я их так и добавлял тут: <path .... </path> в самый низ svg

      Ответить
  • Алексей:

    Спасибо!
    Отличная работа!

    Ответить
  • евгений:

    У кого-то есть есть файл карты?

    Ответить
  • СЕРГЕЙ:

    Можно ли такую карту переделать на один регион по районам?

    Ответить
    • Alexander:

      Лишнее удалите и останется 1 регион 🙂

      Ответить
      • Сергей:

        Нет! Имею ввиду, что бы в карте региона кликались отдельно районы области.

        Ответить
        • Alexander:

          С регионами это другая карта, попадалась где то на гитхабе

          Ответить
  • Максим:

    Здравствуйте, подскажите, а где саму карту в SVG скачать, я не программист, дизайнер

    Ответить
    • Alexander:

      Карта тут есть в HTML коде
      + можно в интернете поискать файлом

      Ответить
  • Антон:

    Большое спасибо за такой классный инструмент! +1 вам к карме!

    Ответить
  • Антон:

    Здравствуйте. Подскажите куда в css нужно обратиться, чтобы убрать точку при наведение на определённых регионах?

    Ответить
    • Антон:

      Все разобрался.
      Может кому поможет, добавил атрибут - [data-null] и в js прописал

         $('[data-null]').mouseenter(function() {    
        $('.district').hide();
    });
      Ответить
  • Андрей:

    А как наименование субъекта вывести на элемент карты?

    Ответить
    • Alexander:

      Подсказкой на самой карте вывести?
      Это CSS и JS нужно править

      Ответить
  • G13:

    Куда и как нужно вставлять JQuery ?
    Вставил через script не работает

    Ответить
  • Сергей:

    Сделаю маленькую рекламу сервису, делающую svg по маске для картинки. Я недвижимостью занимаюсь, так вот - сильно облегчает жизнь: https://ru.crazysquirrel.ru/
    Уж что-что, а черные области с белыми границами по картинке, из которой надо сделать интерактивную карту, можно сделать в любом графическом редакторе. Загружаете по ссылке картинку и маску - и вуаля - svg готов. Я только его немного дорабатываю руками, удаляя лишнее (стили, например) и прамо вставляю в html. Всё великолепно работает и адаптивно.

    Ответить
  • GS:

    ссылки с названиями субъектов не появляются, что может быть ?

    Ответить
    • Alexander:

      Мне нужно видеть результат, чтобы понять, что не так

      Ответить
  • Anna:

    Здравствуйте, можно как-то заказать установку этой карты на сайт, сделанный на Tilda, через зероблок?

    Ответить
    • Alexander:

      Напишите в ВК или Телеграм, попробуем завтра 🙂

      Ответить
  • Александр:

    Уважаемый разработчик, подскажите, пожалуйста, в чем можно отрисовать карту в формате svg если требуется сделать план помещения.

    Ответить
    • Alexander:

      Тут я не подскажу, саму карту отрисосывал не я

      Ответить
    • Александр:

      Можно попробовать через Illustartor или Inkscape

      Ответить
Разделы:
  • Установка этих и любых других решений с учетом Ваших предпочтений и под дизайн Вашего сайта
    Обращайтесь:
    от 900 ₽