FLA-SHOP.com.ru - Интерактивные карты для вебсайтов!
HTML5 карта России. Субъекты Федерации 1.6
Мы рады предложить вам карту России для вебсайтов с федеральными субъектами в формате HTML5. Карта специально приспособлена для отображения на любых iOS устройствах, включая iPhone, iPad, и, конечно, прекрасно работает во всех современных настольных браузерах. На интерактивной карте России изображены федеральные субъекты РФ, на каждый из которых можно щелкнуть мышью, причем целевая страница у каждого региона может быть своя. Благодаря настраиваемым цветам, ссылками и всплывающим окнам вы легко сможете настроить карту России под ваши собственные предпочтения. Интерактивная HTML5 карта Российской Федерации идеально подойдет любому бизнесу для визуального отображения географии местных представителей, дилеров, офисов или сервисных центров.
Карта выполнена на основе библиотеки JavaScript Raphael, обеспечивающей безупречную работы карты в следующих браузерах: Chrome, Firefox, Safari, Opera, IE7, IE8, IE9 и IE10.
Содержание
Особенности
Интерактивная HTML5 карта России предназначена как для совместной работы с Flash-картой России, так и отдельно от нее. Технология HTML5 обеспечивает безупречную работу карты на различных устройствах и планшетах, включая iPhone и iPad, а также на всех современных браузерах. Комбинируя Flash карту России с картой на базе HTML5, вы можете отображать Flash вариант для пользователей настольных ПК, а пользователям переносных устройств показывать HTML5-вариант.Что нового
Версия 1.5Добавлено API для взаимодействия с картой посредством JavaScript.
Версия 1.4
Возможность использовать карту как с фиксированным размером, так и в "responsive" режиме.
Версия 1.3.5
Добавлены текстовые названия регионов рядом с картой, при наведении которое выделяется соответствующий регион. Также возможно использование карты без текстовых ссылок.
Версия 1.3.4
Исправлена работа скриптов карты, когда на странице установлены другие JS плагины.
Версия 1.2
- Появилась возможность изменения размеров карты в файле настроек settings.js
- Подсвеченные регионы теперь могут отбрасывать тень (не работает в IE)
Улучшено взаимодействие с пользователем при работе под iPhone и iPad. Вы можете выбрать различные виды действий, назначаемые на щелчок мышью. Поддерживаются следующие настройки:
iPhoneLink = false,- первое нажатие отображает всплывающее окно для выбранного региона. Второе нажатие открывает ассоциированный URL.
iPhoneLink = true,- URL открывается сразу. Такое поведение полезно, если вам не нужно показывать всплывающее окно.
Общие настройки
Конфигурация HTML5 карты России производится с помощью двух файлов: settings.js и map.css.Все изменения и индивидуальные настройки должны производится в JS файле. Для редактирования файла мы рекомендуем использовать бесплатный Notepad++. Конечно, вы можете использовать и любой другой редактор HTML.
Конфигурацию и индивидуальную настройку можно выполнить на локальном компьютере. После этого отредактированные файлы следует загрузить на ваш веб-сервер.
Настройка файла "settings.js"
Файл settings.js позволяет вам определить свойства карты: цвета регионов, границ, обозначений регионов, а также настроить ссылки и информацию, отображаемую во всплывающих окнах.
Имеются следующие настройки:
| Имя параметра | Значения | Описание |
| mapWidth | 600 | Задает ширину карты |
| //mapWidth | 600 | Если параметр ширины закомментирован, то карта переключается в "responsive" режим |
| mapHeight | 450 | Задает высоту карты |
| shadowWidth | 2 | Толщина тени |
| shadowOpacity | 0.3 | Прозрачность тени |
| shadowColor | "black" | Основной цвет тени |
| shadowX | 1 | Горизонтальное смещение тени |
| shadowY | 2 | Вертикальное смещение тени |
| iPhoneLink | true/false |
Параметр определяет работу на iPhone и iPad. Значение 'true' означает, что ассоциированный URL будет открываться сразу. Это полезно, если вам не нужно отображать всплывающее окно. Значение 'false' означает, что при первом нажатии отображается всплывающее окно выбранного региона, а при втором – открывается URL. |
| isNewWindow | true/false | Значение 'true' означает, что ссылки следует открывать в новом окне |
| borderColor | Шестнадцатеричное значение | Цвет границ региона |
| borderColorOver | Шестнадцатеричное значение | Цвет границ региона, когда над ним находится указатель мыши |
| nameColor | Шестнадцатеричное значение | Цвет короткого названия региона (только для карты США) |
| nameFontSize | Высота в px | Размер шрифта короткого названия региона (только для карты США) |
| nameFontWeight | bold/normal | Начертание шрифта названия региона (полужирный, нормальный)(только для карты США) |
| nameStroke | true/false | Обводка текста для кодов регионов |
| overDelay | миллисекунды | Задержка перед анимацией выбора региона |
| Настройки региона | ||
| id | number | Идентификатор региона. Не должен меняться |
| name | text | Название региона |
| shortname | text | Короткое название региона |
| link | text | Ссылка на страницу, открываемую при нажатии на регион. Может содержать код JS |
| comment | HTML formatted text | Текст, отображаемый во всплывающем окне. Может содержать HTML форматирование |
| image | text | Имя файла изображения, отображаемого во всплывающем окне |
| color_map | Шестнадцатеричное значение | Цвет региона. По умолчанию #7798BA |
| color_map_over | Шестнадцатеричное значение | Цвет региона, когда над ним находится указатель мыши. По умолчанию #366CA3 |
Пример
id: 1, name: "Московская область", shortname: "", link: "Moscow_region.html", comment: "ФИО<br>Должность<br>Телефон: (000) 123-4567", image: "photo.jpg", color_map: "#7798BA", color_map_over: "#366CA3"Внимание: для правильного отображения названий регионов на странице кодировка файла настроек должна совпадать с кодировкой страницы.
Установка HTML5 карты России
Для установки карты на ваш сайт, добавьте следующий код HTML в исходный код страницы, на которой должна отображаться карта:<!-- start Fla-shop.com HTML5 Map --> <div style="position: relative;"> <link href="map.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript" src="settings.js"></script> <script type="text/javascript" src="map.js"></script> </div> <!-- end HTML5 Map -->Обратите внимание, что файлы следует сначала загрузить на ваш сервер.
Убедитесь, что вы указали полный путь к файлам в коде карты, включая все необходимые вложенные папки.
Например
<!-- start Fla-shop.com HTML5 Map --> <div style="position: relative;"> <link href="/directory/map.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/directory/raphael-min.js"></script> <script type="text/javascript" src="/directory/settings.js"></script> <script type="text/javascript" src="/directory/map.js"></script> </div> <!-- end HTML5 Map -->
API specification
| FSstateModify(state, fillColor, strokeColor) |
|
* changes color properties of the state - state name from settings.js ie. st1, st2, st10.... - fillColor, color to fill the state ie. #11AABB - strokeColor, color to fill stroke ie. #000000 |
| FSstateLabelModifyText(state, state_text) |
|
* change label text of the state - state name from settings.js ie. st1, st2, st10.... - state_text, text to go as label for that state |
| FSstateLabelModifyColor(state, fillColor, strokeColor) |
|
* changes color properties of the state label - state name from settings.js ie. st1, st2, st10.... - fillColor, color to fill the label ie. #11AABB - strokeColor, color to fill stroke ie. #000000 |
| FSfetchStateAttr(state, attrName) |
|
* get attribut from settings.js for state - state name from settings.js ie. st1, st2, st10.... - attrName, valid attributes (id, name, shortname, link, comment, image) |
| FSreloadMap() |
| * reloads the map |
| FSaddText(txt, x, y, fill, weight, size) |
|
* adds the text to map - x, y position of the text - fill, fill color for the text - weight (normal, bold, italic) - size, text size in pixels, ie 14 |
| FSstateHighlightOn(state) |
|
* higlights the state as if the mouse is over - state name from settings.js ie. st1, st2, st10.... |
| FSstateHighlightOff(state) |
|
* returns the state to normal default color - state name from settings.js ie. st1, st2, st10.... |
Лицензионная информация
| Лицензия для одного вебсайта |
Больше карт на вебсайте Fla-shop.com.ru