Интерактивная карта для сайта
Здравствуйте дорогие друзья! Извиняюсь за то, что отсутствовал долгое время. У меня были уважительные причины ;-), о которой сегодня и пойдет речь. И так друзья, в последнее время я занимаюсь разработкой весьма интересного проекта, сейчас пока еще не буду рассказывать о том что будет представлять из себя проект на выходе, но в сегодняшней статье я расскажу об одном элементе в проекте, это интерактивная карта России. Сегодня, я постараюсь рассказать вам максимально подробно о том как создать собственную интерактивную карту. Всех тех кого заинтересовала данная тема, прошу под кат.
И так друзья, в последние дни, я всячески пытался понять принцип разработки интерактивных карт для сайта. В первую очередь конечно же на ум пришла идея по работе с Flash, но эта идея была успешна отклонена, так как карта в первую очередь должна быть адаптивной ко всем устройствам (К сожалению пока я не добился такого результата, но все же я уверен что нашел правильный путь который приведет меня к нему).Долго время я рылся в сети в поисках информации, и понял что есть два наиболее лучших варианта, это html5, и интерактивная карта на основе svg, о которой сегодня и пойдет речь.
И так друзья, svg это в первую очередь векторная графика, но стоит нам открыть данный файл с помощью обычного блокнота как мы увидим огромное количество строк кода, не стоит бояться друзья. это по сути обычный xml файл содержащий координаты областей. в моем случае это были координаты регионов.
С чего начать?
В самом начале хочу поблагодарить авторов проекта Ruseller за предоставленный материал, который и позволил мне в решении поставленной задачи.
1.Карта России в формате svg
2.javascript библиотека Raphael
<!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>
MoscowObl: {
name: ‘Московская Область’,
path: // Значение ‘d’
},
Zabaikal: {
name: ‘Забайкальский край’,
path: // Значение ‘d’
},
Buryatia: {
name: ‘Бурятия’,
path: // Значение ‘d’
}
// и так далее
}
Да уж действительно просто, надо взять кстати на заметку, мало ли. Но у меня к тебе вопрос. Как сделать ссылку из региона?
Я сам промучался с этим вопросом, можно подставлять нужный тебе id из paths.js в ссылку =)
В итоге работает все?
Здравствуйте, у вас не работает ссылка на пример карт. Обновите ее пожалуйста. Очень нужно) Спасибо!