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

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

demosourse

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

Структура каталогов и файлов

 

Raphael (raphael.js)

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

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

 

paths.js

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

 

index.html

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

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Строим интерактивную карту с помощью Raphael | Демонстрация для сайта RUSELLER.COM</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 class="wrapper">
		<div id="map"></div>
	</div>

</body>
</html>

Мы подключаем таблицу стилей (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($('<div />').addClass('point'));
    // Удаляем существующий div 'point' и создаем другой 
    $('.point')
    .html(paths[arr[this.id]].name)
    .prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
    .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();
    // Добавим контент html(название страны, изображение флага и кнопку закрытия), устанавливаем положение и выводим элемент
});

..и обработку события 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($('<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 */
    -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;
}

 

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html
Перевел: Сергей Фастунов
Урок создан: 28 Февраля 2011
Просмотров: 153451
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^