Интерактивная карта для сайта

Опубликовано автором
Tweet

Здравствуйте дорогие друзья! Извиняюсь за то, что отсутствовал долгое время. У меня были уважительные причины ;-), о которой сегодня и пойдет речь. И так друзья, в последнее время я занимаюсь разработкой весьма интересного проекта, сейчас пока еще не буду рассказывать о том что будет представлять из себя проект на выходе, но в сегодняшней статье я расскажу об одном элементе в проекте, это интерактивная карта России. Сегодня, я постараюсь рассказать вам максимально подробно о том как создать собственную интерактивную карту. Всех тех кого заинтересовала данная тема, прошу под кат.

И так друзья, в последние дни, я всячески пытался понять принцип разработки интерактивных карт для сайта. В первую очередь конечно же на ум пришла идея по работе с Flash, но эта идея была успешна отклонена, так как карта в первую очередь должна быть адаптивной ко всем устройствам (К сожалению пока я не добился такого результата, но все же я уверен что нашел правильный путь который приведет меня к нему).Долго время я рылся в сети в поисках информации, и понял что есть два наиболее лучших варианта, это html5, и интерактивная карта на основе svg, о которой сегодня и пойдет речь.

И так друзья, svg это в первую очередь векторная графика, но стоит нам открыть данный файл с помощью обычного блокнота как мы увидим огромное количество строк кода, не стоит бояться друзья. это по сути обычный xml файл содержащий координаты областей. в моем случае это были координаты регионов.

С чего начать?

В самом начале хочу поблагодарить авторов проекта Ruseller за предоставленный материал, который и позволил мне в решении поставленной задачи.

1.Карта России в формате svg

2.javascript библиотека Raphael

Конечно, на этом не заканчиваются наши требования, все что вам необходимо будет для вашей интерактивной карты, вы сможете скачать в конце статьи. А сейчас постараюсь максимально просто объяснить что к чему.
Создаем простую html страничку и добавляем туда данный код:

Смотреть »

<!DOCTYPE>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Интерактивная карта | Горная Россия</title>
<link href=»css/default.css» rel=»stylesheet» type=»text/css» />
<script src=»js/jquery.js» type=»text/javascript»></script>
<script src=»js/raphael.js» type=»text/javascript»></script>
<script src=»js/paths.js» type=»text/javascript»></script>
<script src=»js/init.js» type=»text/javascript»></script>
<script src=»js/function.js» type=»text/javascript»></script>
<link rel=»stylesheet» type=»text/css» href=»css/normalize.css» />
<link rel=»stylesheet» type=»text/css» href=»css/demo.css» />
<link rel=»stylesheet» type=»text/css» href=»css/component.css» />
<script src=»js/modernizr.custom.js»></script>
</head>

<body>

<div class=»container»>

<section class=»color-4″>
<nav class=»cl-effect-6″>
<a href=»#»>Главная</a>
<a href=»#»>Интерактивная карта</a>
<a href=»#»>О проекте</a>
<a href=»#»>Контакты</a>
</nav>
</section>
</div>

<div style=»-o-transform: scale(0.7, 0.7);-ms-transform: scale(0.7, 0.7);-webkit-transform: scale(0.7, 0.7);-moz-transform: scale(0.7, 0.7);»>
<div id=»map»></div>
</div>

</body>
</html>

Круто! Теперь, у нас появилась главная страница. Далее создайте папку js и в нем создайте файл paths.js, вот тут и начинается самое интересное. Это файл в котором будут содержаться наши координаты,а координаты мы будем брать непосредственно из svg файла (Внимание! Не надо копировать весь код, достаточно будет просто скопировать код параметра ‘d’, после того как вы откроете svg файл вы поймете что такое параметр ‘d’, а если не поймете то просто посмотрите пример который делал я), о котором я говорил чуть выше. и так открываем наш paths.js и вставляем туда вот такой код, далее вам просто надо будет по аналогии вставлять остальные координаты.

Смотреть »

var paths = {
MoscowObl: {
name: ‘Московская Область’,
path: // Значение ‘d’
},
Zabaikal: {
name: ‘Забайкальский край’,
path: // Значение ‘d’
},
Buryatia: {
name: ‘Бурятия’,
path: // Значение ‘d’
}
// и так далее
}
Я думаю друзья, с этим у вас проблем не будет, так как я предоставляю вам пример который делал я со всеми исходными данными, так что вперед дерзайте. Если будут вопрос по теме, обращайтесь в комментарии либо на почту по обратной связи, буду отвечать по мере возможности.
Скачать пример карты можно отсюда
P.s А для любителей футбола я подготовил интересный Ролик)))