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)
Версия 1.1
Улучшено взаимодействие с пользователем при работе под 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