НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Функциональные географические карты с помощью SVG и jQuery

0

Когда мне нужно создать карты, то первым делом, я обращаюсь к Google Charts или любой другой специализированной библиотеке. Но иногда мне могут понадобиться специфические особенности, которые я не могу там найти. В этом случае SVG-изображения оказываются очень ценными (полезными).

Недавно, мне нужно было проектировать страницу отчета, которая могла бы показывать карту Италии, на которой каждый регион имел бы свой цвет, в зависимости от некоторых значений выборки из базы данных. Благодаря SVG, эта задача стала очень простой.

Создаем SVG карту в Illustrator

Первым делом я нарисовал карту Италии в Adobe Illustrator:

140687857901_illustrator

 

Каждый регион рисовался как отдельный объект, который помещался на свой отдельный слой, с названием совпадающим с кодом, используемом в базе данных, чтобы определить соотносимые данные (например, «tos» для Тосканы).

Наконец, карта должна быть сохранена в формате SVG. Вам следует обратить внимание на то, чтобы установить опцию «CSS property» в графе «Элементы стиля» в Иллюстраторе, как показано ниже:

140687857202_illustrator_svg_panel

 

Открыв только что созданный файл, вы увидите, что он содержит набор тегов g, идентификаторы которого совпадают с названиями уровней в Illustrator.

Построение нашего HTML файла

Каждый элемент, содержащийся в тегах  g имеет класс st0, так чтобы обводки и заливки CSSс войства <strong>stroke</strong> и fill:

140687857403_brackets

 

Если вы попытаетесь изменить эти значения, карта изменится тоже:

140687857504_brackets

 

Теперь мы можем использовать этот код, чтобы создать наш HTML файл со встроенным SVG, как показано ниже (код был сокращен для удобства):

Можно заметить, что атрибут style из тега svg был перенесен в секцию head, и все элементы g изначально залиты светло-серым цветом.

Класс st0 уже не используется (его можно удалить из вашего кода), и он был заменен селектором .map g. В любом случае, это не было обязательным действием – вы можете использовать любые CSS селекторы – на ваше усмотрение.

Вторым шагом надо привязать нашу карту к данным, получаемым из внешнего источника. В данном примере мы будет раскрашивать регионы в цвета, зависящие от населенности этих регионов.

Добавляем JSON-данные и JavaScript

Данные мы получаем в формате JSON, и вставляем их в HTML файл напрямую (в реальных условиях, мы, конечно же, будет получать данные по Ajax, или подобным способом).

Теперь наша страница будет содержать JSON внутри нашего файла с JavaScript, который будет выглядеть примерно так:

После этого мы выбираем цвет (в данном случае – #0b68aa), и принимаем его за цвет региона с самым большим населением. Остальные регионы будут раскрашены в тона основного цвета в пропорциях процента населенности (по отношению к максимальному населению).

Далее мы добавим немного JavaScript.

Первым делом надо определить регион с самым большим населением. Это можно сделать несколькими строчками кода.

Как только мы составим массив со значениями размера населения, из него можно получить максимальное значение с помощью метода Math.max:

Далее можно пройтись по всем элементам regions, и применить уровень прозрачности, в зависимости от вычисленного параметра население / максимальное значение (с небольшой помощью jQuery):

А вот и результат:

140687857705_browser

 

 

Добавляем интерактивности с помощью CSS и jQuery

Карту можно улучшить, добавив немного интерактивности. Нам бы хотелось показать размер населения при наведении курсора на регион.

Сначала добавим правила CSS для селектора g:hover и класса info_panel, чтобы стилизовать информационный всплывающий блок:

Модификатор !important в селекторе .map g:hover нужен для того, чтобы переопределить свойство fill, иначе будет использовано правило встроенного в элемент CSS.

Также нам нужно модифицировать цикл for, определенный ранее, чтобы добавить data-атрибут, в котором будет хранится значение, отображаемое при наведении:

И, наконец, разнообразим наш скрипт добавлением некоторых эффектов при наведении:

Как это работает:

  • с помощью mouseover мы добавили элемент div, содержащий отображаемую информацию (имя региона и населенность). Div создается при каждом наведении на элемент g, и добавляется в элемент body документа;
  • mouseleave удаляет этот div, когда курсор выходит за пределы региона;
  • последний метод, mousemove, получает координаты мыши, и применяет их к сгенерированным div’ам.

Перевод статьи

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.