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