Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Cоздание карты на JS

Raphael JS является мощной библиотекой, которая должны упростить работу с векторной графикой в Интернете. Сегодня я научу вас, создавать интерактивную карту с нуля. Использование карты вы можите увидеть на сайте президента http://kremlin.ru/. Там это реализовано на флеш, мы же будет на простых java скриптах и с помощью jQuery плагина.

Cоздание карты на JS


Демо: смотреть
Скачать: raphael_map.zip [272,02 Kb] (cкачиваний: 200)


В начале я предлагаю вам взглянуть на структуру файлов:
Cоздание карты на JS


paths.js
Это файл, в котором мы собираемся сохранить SVG пути и название страны.

index.html
Как обычно, первым шагом является установление разметки HTML.
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</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>
</head>

<body>
    
    <div id="map"></div>
    
</body>
</html>


Создаем основной див карты и подключаем все скрипты, а так же css стиль.

Создание пути из SVG-файл (paths.js)
Scalable Vector Graphics (SVG) является семейство спецификаций XML-файла для описания двумерной векторной графики.

Я нашел в Интернете бесплатный файл SVG с картой Европы , таким образом я собираюсь использовать его в этом уроке. Очевидно, что вы можете использовать вашу собственную векторную карту. Вы можете экспортировать её в SVG-файл с помощью Adobe Illustrator или Inkspace.

Открыть paths.js и создать новый объект с именем пути.

var paths = {}


Затем откройте карту SVG, и вы увидите много кода XML. К счастью, вам нужно только одно значение называется D. Посмотрите на изображение ниже.
Cоздание карты на JS

Давайте создадим первый путь страны. В SVG-файл, который используется в этом уроке первой страной является Исландия, поэтому копируем D значение и создаем новый параметр под названием Исландия в пути объекта.

var paths = {
    iceland: {
        name: 'Iceland',
        path: // 'd' value
    }
}


Пример нескольких стран:
var paths = {
    iceland: {
        name: 'Iceland',
        path: // 'd' value
    },
    spain: {
        name: 'Spain',
        path: // 'd' value
    },
    portugal: {
        name: 'Portugal',
        path: // 'd' value
    }
    // etc.
}


Creating the map (init.js)
В этой части урока, я собираюсь написать скрипт, который будет показывать карту на экране.
$(function(){
    
    var r = Raphael('map', 1200, 820),
        attributes = {
            fill: '#fff',
            stroke: '#3899E6',
            'stroke-width': 1,
            'stroke-linejoin': 'round'
        },
        arr = new Array();
    
    for (var country in paths) {
        
        var obj = r.path(paths[country].path);
        
        obj.attr(attributes);
        
        arr[obj.id] = country;
        
        obj
        .hover(function(){
            this.animate({
                fill: '#1669AD'
            }, 300);
        }, function(){
            this.animate({
                fill: attributes.fill
            }, 300);
        })
        .click(function(){
            document.location.hash = arr[this.id];
            
            var point = this.getBBox(0);
            
            $('#map').next('.point').remove();
            
            $('#map').after($('<div />').addClass('point'));
            
            $('.point')
            .html(paths[arr[this.id]].name)
            .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
            .prepend($('<img />').attr('src', 'flags/'+arr[this.id]+'.png'))
            .css({
                left: point.x+(point.width/2)-80,
                top: point.y+(point.height/2)-20
            })
            .fadeIn();
            
        });
        
        $('.point').find('.close').live('click', function(){
            var t = $(this),
                parent = t.parent('.point');
            
            parent.fadeOut(function(){
                parent.remove();
            });
            return false;
        });
        
        
        
        
    }
        
            
});



default.css

Последний шаг заключается в добавлении некоторых стилей с CSS.
#map {
    float:left;
    clear:both;
    width:1200px;
    height:820px;
}

.point {
    position:absolute;
    display:none;
    padding:10px 15px;
    background:#7BB9F0;
    font-size:14px;
    font-weight:bold;
    
    /* CSS3 rounded corners */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}

.point .close {
    display:block;
    position:absolute;
    top:-10px;
    right:-10px;
    width:24px;
    height:24px;
    text-indent:-9999px;
    outline:none;
    background:url(../img/close.png) no-repeat;
}

.point img {
    vertical-align:middle;
    margin-right:10px;
}


Карта готова к использованию.
Опубликовал dimas_ua, 11-05-2011, 00:00 Комментариев: 0
 (голосов: 1)