Нередко владельцам сайтов нужно создавать интерактивные планы этажей, карты, диаграммы и другую инфографику. Как правило, решение подобных задач требует работы с SVG-файлов, среди которых можно выбрать большое количество уже готовых схем или карт разных стран мира. Далее можно будет настраивать графики согласно собственным предпочтениям: выбирать цвета, подсказки и пометки.
Для того чтобы создавать и настраивать карты или интерактивные графики с загруженными SVG, можно воспользоваться плагином MapSVG. Сразу же стоит заметить: плагин платный, но в стоимость входит и поддержка.
Преимущества плагина MapSVG
MapSVG уже содержит более 100 гео-карт, которые отлично откалиброваны и работают аналогично гугл-мапсовским. Функционал предусматривает возможность добавлять координаты: достаточно добавить данные широты и долготы или вести необходимый адрес.
Примечательно, что в отличие от гугловской карты, здесь нет никаких ограничений: SVG файлы поддаются редактированию в Adobe Illustrator, позволяя вносить любые изменения, к примеру, добавлять новые области или убирать старые.
Второе важное преимущество плагина в том, что он отлично подходит для создания любой инфографики. Это могут быть планы этажей или интерактивные векторные изображения вроде анатомической карты человека.
Конечно же, разработчики не забыли и об удобстве пользователя: в плагине применяется очень удобная панель управления, в которой предусматривается Live Preview. Таким образом, создание карты не вызовет трудностей. Кроме того, у всех, кто знаком с JavaScript есть возможность добавить пользовательский обработчик событий.
Как пользоваться плагином?
Загрузив плагин, в меню можно обнаружить новый пункт MapSVG в котором можно приступить к созданию карт. Список всех уже имеющихся карт можно найти в выпадающем меню: отсюда можно подобрать карту страны или же всего мира.
Выбрав карту, необходимо открыть новую страницу, где слева отобразится выбранная карта, а справа – все необходимые настройки. Настроить можно такие параметры, как название карты, ее ширина и высота, положение, прокрутку, адаптивность, изменение масштаба, курсора и всплывающих окон. Также рекомендуется воспользоваться вкладкой Colors: отсюда можно изменить фоновый и основной цвет, цвета при наведении курсора, цвет контура и т.д.
Секция Markers позволит добавлять на карту пользовательские отметки, при нажатии на которые будут появляться подсказки.
Из вкладки Regions можно работать с индивидуальными для каждой области карты параметрами. В каждой секции можно будет выбрать цвет, добавить подсказку или ссылку, а также всплывающий текст.
Последняя вкладка Javascript позволит добавить собственный пользовательский код для карты или событий (mouseout, mouseover, onClick, afterload, beforeload).
Поработав с настройками, достаточно скопировать шорткод готовой карты, вставить его в публикуемую запись или страницу, после чего карта появится на сайте.
Файлы SVG
Как уже отмечалось, плагин отлично подходит для создания интерактивных карт и планов, причем работа с SVG позволяет добавлять свои собственные пользовательские файлы. Это очень удобно, так как данный формат легко экспортировать в различных программах вроде InkScape, Adobe Illustrator, Corel Draw и т.д. Проверить данный функционал можно взяв любую бесплатную векторную иллюстрацию.
В заключение стоит сказать: плагин отлично справится с размещением SVG-файлов, что оценят все, кто работает с инфографикой и картами. Сам формат достаточно шустро прогружает графику на страницах. Но в любом случае вы можете заказать весь необходимый функционал уже при покупке сайта, заранее обговорив с нашим менеджером все детали.
