главная

Теги:


Создаем интерактивную карту

Raphael - мощная библиотека для работы с векторной графикой в веб проектах. В данном уроке мы разберемся, как создать интерактивную карту её помощью.

Сначала создаем структуру каталогов и файлов как на рисунке ниже:

Raphael (raphael.js)

Raphael  - маленькая библиотека JavaScript, которая упрощает работу с векторной графикой в веб проектах.

Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы.

 

paths.js

В данном файле хранятся траектории SVG paths и названия каждой страны.

 

index.html

Сделаем разметку HTML.





Строим интерактивную карту с помощью Raphael | Демонстрация для сайта RUSELLER.COM








	
	

Мы подключаем таблицу стилей (default.css) , библиотеки jQuery, Raphael, и файлы paths.js и init.js.

 

Создаем траекторию из SVG файла (paths.js)

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

Таким образом, SVG является XML файлом, а, следовательно, мы можем редактировать его в текстовом редакторе.

Для карты используется SVG файл с изображением Европы. Вы может использовать свое векторное изображение (если взять что-то другое, кроме карты, то может получиться очень интересная интерактивная графика). Конвертировать векторное изображение в формат SVG можно с помощью Adobe Illustrator или Inkspace.

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

var paths = {}
 

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

Формат SVG

Скопируем контур первой страны. В нашем SVG файле это будет Исландия, копируем значение d и создаем новый параметр iceland в объект paths.

var paths = {
    iceland: {
        name: 'Исландия',
        path: // значение 'd'
    }
} 

И далее действуем аналогичным образом для создания контуров других стран.

var paths = {
    iceland: {
        name: 'Исландия',
        path: // Значение 'd'
    },
    spain: {
        name: 'Испания',
        path: // Значение 'd'
    },
    portugal: {
        name: 'Португалия',
        path: // Значение 'd'
    }
    // и так далее
} 

Создаем карту (init.js)

Теперь напишем скрипт, который будет выводить карту на экран.

$(function(){
     
    var r = Raphael('map', 1200, 820),
    // Cоздаем новый объект canvas, в котором будет происходить рисование контуров 
    attributes = {
            fill: '#fff',
            stroke: '#3899E6',
            'stroke-width': 1,
            'stroke-linejoin': 'round'
        },
    // Создаем объект 'attributes' с параметрами
    arr = new Array();
     
    for (var country in paths) {
        var obj = r.path(paths[country].path); 
        obj.attr(attributes);
    }
    // Проходим циклом все контуры (которые включены в объект paths), выводим их и устанавливаем атрибуты для них 
             
}); 

Создадим обработчик события hover.

obj.hover(function(){
    this.animate({
        fill: '#1669AD'
    }, 300);
}, function(){
    this.animate({
        fill: attributes.fill
    }, 300);
}); 

Теперь добавим обработку события click.

obj.click(function(){
    document.location.hash = arr[this.id];
    // Изменяем хэш документа (#)
    var point = this.getBBox(0);
    // возвращаем размеры элемента
    $('#map').next('.point').remove();
    $('#map').after($('

..и обработку события click для кнопки закрытия:

 $('.point').find('.close').live('click', function(){
    var t = $(this),
        parent = t.parent('.point');
     
    parent.fadeOut(function(){
        parent.remove();
    });
    return false;
});

В итоге файл 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($('

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 */
    -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;
}

Готово!

Источник урока: playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

Урок Создан:2011-05-18 Просмотров:2110

Добавить комментарий:


Copyright© 2009 Hosted by Zhost