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

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

Пример:

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

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

×

HTML:

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

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

CSS:

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

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

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

jQuery:

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

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

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

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

  • Андрей:

    Спасибо большое, Отличная работа, только думал, как я буду все это отрисовывать в 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

      Ответить