Карта субъектов РФ в 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:

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

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

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

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

  • Антон:

    Здравствуйте. Подскажите куда в 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

      Ответить