HTML5 карта России (Субъекты Федерации) 3.1

Мы рады предложить вам карту для вебсайтов в формате HTML5. Карта специально приспособлена для отображения на любых iOS (iPhone, iPad) и Android устройствах, и, конечно, прекрасно работает во всех современных настольных браузерах. На интерактивной карте изображены регионы*, на каждый из которых можно кликнуть мышью, причем целевая страница у каждого региона может быть своя. Благодаря настраиваемым цветам, ссылками и всплывающим окнам вы легко сможете настроить карту под ваши собственные предпочтения. Интерактивная HTML5 карта идеально подойдет любому бизнесу для визуального отображения географии местных представителей, дилеров, офисов или сервисных центров.

Карта выполнена на основе библиотеки JavaScript Raphael, обеспечивающей безупречную работы карты в следующих браузерах: Chrome, Firefox, Safari, Opera, IE8+, Edge.




(*) Под регионом понимается область, район, округ или другая единица административно-территориального деления, в зависимости от конкретного продукта.

Особенности

  • Адаптивный размер карты
  • Работает на мобильных устройствах, включая iPhone, iPad, Android-устройства
  • Настраиваемые цвета, ссылки, тултипы и пр.
  • Возможность добавить точки на карте
  • Визуальный редактор для настроек
  • API для разработчиков

Что нового

Версия 3.0

Начиная с версии 3.0 для редактирования настроек может использоваться онлайн редактор. Теперь можно конфигурировать карту визуально и просто скопировать готовый JSON код или скачать файл с настройками.

Установка

Для установки карты на ваш сайт, добавьте следующий код HTML в исходный код страницы, на которой должна отображаться карта:

<!-- start Fla-shop.com.ru HTML5 Map -->
<div id='map-container'></div>
<link href="map.css" rel="stylesheet">
<script src="raphael.min.js"></script>
<script src="settings.js"></script>
<script src="paths.js"></script>
<script src="map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

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

<!-- start Fla-shop.com.ru HTML5 Map -->
<div id='map-container'></div>
<link href="/directory/map.css" rel="stylesheet">
<script src="/directory/raphael.min.js"></script>
<script src="/directory/settings.js"></script>
<script src="/directory/paths.js"></script>
<script src="/directory/map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

Визуальный редактор

Чтобы изменить настройки карты, вы можете использовать онлайн-редактор, расположенный по адресу

После конфигурирования карты вы можете экспортировать настройки и скачать файл settings.js.
Не забудьте загрузить обновленный settings.js на ваш вебсайт.

Вы также можете редактировать файл settings.js вручную, используя текстовый редактор. Мы рекомендуем использовать бесплатное ПО Notepad++ for Windows, или Sublime Text 3 for Windows, Mac, Linux.

Конечно, вы можете использовать любые другие HTML/plaintext редакторы.

Настройки

Ниже размещен список параметров карты, которые вы можете изменить. В секции «Основные настройки карты» указаны общие параметры карты. Параметры в секции «Настройки региона» позволяют настраивать вид и поведение определенного региона (области, страны, штата, округа, района и других географических единиц).

Основные настройки карты

Параметр Значения Описание
mapWidth 600 Ширина карты в px. Если 0 или "100%" - ширина будет 100% (адаптивный размер)
mapHeight 450 Высота карты. При адаптивном размере этот параметр игнорируется.
shadowAllow true/false Включить / выключить тень
shadowWidth 2 Толщина тени
shadowOpacity 0.3 Прозрачность тени
shadowColor "#000000" Цвет тени
shadowX 1 Горизонтальное смещение тени
shadowY 2 Вертикальное смещение тени
iPhoneLink true/false Параметр определяет работу на iPhone и iPad. Значение 'true' означает, что ссылка будет открываться сразу. Это полезно, если вам не нужно отображать всплывающее окно. Значение 'false' означает, что при первом нажатии отображается всплывающее окно выбранного региона, а при втором – открывается URL.
isNewWindow true/false Значение 'true' означает, что ссылки следует открывать в новом окне
zoomEnable true/false Включить / выключить возможность масштабирования
zoomEnableControls true/false Показать или скрыть кнопки управления масштабом
zoomMax 2 Максимальный уровень масштабирования
zoomStep 0.2 Шаг масштабирования
borderColor Hex value Цвет границ региона
borderColorOver Hex value Цвет границ региона, когда над ним находится указатель мыши
nameColor Hex value Цвет подписей для регионов
nameFontSize 11px Размер шрифта подписей
nameFontWeight bold/normal Жирность шрифта подписей
nameStroke true/false Обводка подписей
overDelay milliseconds Продолжительность анимации смены цвета региона

Настройки региона*

Параметр Значения Описание
id number Идентификатор региона. Не должен меняться
name text Название региона
shortname text Подпись для региона
link text Ссылка, открываемая при нажатии на регион. Может содержать код JS
comment HTML formatted text Текст, отображаемый во всплывающем окне. Может содержать HTML форматирование
image text Имя файла изображения, отображаемого во всплывающем окне
color_map Hex value Цвет региона. По умолчанию #7798BA
color_map_over Hex value Цвет региона при наведении курсора. По умолчанию #366CA3

(*) Под регионом понимается область, район, округ или другая единица административно-территориального деления, в зависимости от конкретного продукта.


 

API спецификация

Описание функций API доступно по этой ссылке (англ. язык).

Лицензионная информация

  • Лицензия для одного вебсайта

Спасибо за использование наших карт. Будем рады ответить на любой вопрос относительно наших продуктов.

Больше карт на вебсайте Fla-shop.com.ru