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

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

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

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

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