Динамічні Geo Maps з SVG і JQuery
Створюємо SVG мапу в Illustrator
Створимо мапу Італії в Illustrator:
Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовуваному в базі даних, щоб ідентифікувати відповідні дані (наприклад: “tos” для Tuscany).
Мапа повинна бути збережена як SVG файл. Зверніть увагу на те, що потрібно встановити опцію "Style Elements" для "CSS властивісті" в Illustrator, як показано нижче:
При відкритті файлу, ви побачите, що він містить набір g тегів, ідентифікаторів, ім'я яких збігається з іменами рівнів в Illustrator.
Створюємо наш HTML файл
Кожен пункт, який міститься в g тегах має класс st0, тож CSS властивості stroke і fill можуть бути використані до них:
Якщо ви спробуєте змінити ці значення, карта негайно зміниться:
Тепер ми можемо використати цей код, щоб побудувати наш HTML файл з SVG як показано нижче (код був скорочений для зручності):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Map Sample</title>
<style type="text/css" media="all">
.map svg {
height: auto;
width: 350px;
}
.map g {
fill: #ccc;
stroke: #333;
stroke-width: 1;
}
</style>
</head>
<body>
<div class="map">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -21.6 761 919" style="enable-background:new 0 -21.6 761 919;" xml:space="preserve">
<g id="sar">
<polygon class="st0" points="193,463 ... "/>
</g>
<!-- etc ... -->
</svg>
</div>
</body>
</html>
Можна побачити, що атрибут style всередині svg тегу була стертий і замінений на новий, розташовану в заголовку документа; всі g елементи були спочатку заповнені світло-сірий.
Клас st0 більше не використовується (ви можете видалити його з вашого коду SVG), він був замінений на .map g селектора. У всякому разі, це не є обов'язковим, ви можете використовувати будь-які CSS селектори.
Другий крок полягає у зв'язуванні нашої карти з деяким даними, отриманими з нашої бази даних. У цьому прикладі, наша мета - намалювати карту відповідно до населення кожного регіону.
Додавання JSON даних і наявність
Дані витягуються в форматі JSON і додаються безпосередньо в наш HTML файл (в реальному світі, звичайно ж, дані будуть отримуватися за допомогою Ajax або аналогів).
Тепер наша сторінка міститиме JSON в нашому файлі JavaScript, який виглядає наступним чином (знову ж, скорочено):
var regions=[
{
"region_name": "Lombardia",
"region_code": "lom",
"population": 9794525
},
{
"region_name": "Campania",
"region_code": "cam",
"population": 5769750
},
// etc ...
];
Після цього, вибирається колір (в даному випадку, #0b68aa) та присвоюється регіону з найбільшим значенням населення. Інші регіони будуть пофарбовані в тон основного кольору відповідно до їх відсотку населення.
Потім ми додаємо JavaScript.
Перш за все, ми повинні визначити область з максимальним значенням населення. Це може бути зроблено за допомогою кількох рядків коду.
Після того, як тимчасовий масив, що містить значення населення була побудований, ми можемо використовувати метод Math.max для нього:
var temp_array= regions.map( function( item ) {
return item.population;
});
var highest_value = Math.max.apply( Math, temp_array );
Тоді ми можемо починати перебирати regions і застосувати до них відсоток прозорості відповідно до максимального значення населення (з невеликою допомогою JQuery):
$(function() {
for(i=0; i < regions.length; i++) {
$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
+ regions[i].population/highest_value
+ ')'});
}
});
Результат:
Додаємо інтерактивності за допомогою CSS та jQuery
Карта може бути поліпшена додаванням деякої інтерактивності. Можна показати кількість населення, коли курсор миші знаходиться над регіоном.
По-перше, ми додаємо правило CSS дляg:hover і нового класу info_panel, щоб стилізувати наші інформаційні бокси:
.map g:hover {
fill: #fc0 !important;
cursor: help;
}
.info_panel {
background-color: rgba(255,255,255, .7);
padding: .3em;
font-size: .8em;
font-family: Helvetica, Arial, sans-serif;
position: absolute;
}
.info_panel::first-line {
font-weight: bold;
}
!important модифікатор для .map g:hover необхідний для поліпшення специфіки правила fill, в іншому випадку він буде обійдений введенням вбудованого CSS.
Потім потрібно змінити наш попередній for цикл, додавши .data() для зберігання інформації, яка буде відображатися при наведенні:
for (i = 0; i < regions.length; i++) {
$('#'+ regions[i].region_code)
.css({'fill': 'rgba(11, 104, 170,'
+ regions[i].population/highest_value
+')'}).data('region', regions[i]);
}
Нарешті, ми можемо завершуємо, додавши деякі ефекти при наведенні курсору миші:
$('.map g').mouseover(function (e) {
var region_data=$(this).data('region');
$('<div class="info_panel">'
+ region_data.region_name
+ '<br>'
+ 'Population: '
+ region_data.population.toLocaleString("en-UK")
+ '</div>').appendTo('body');
}).mouseleave(function () {
$('.info_panel').remove();
}).mousemove(function(e) {
var mouseX = e.pageX, // X coordinates of mouse
mouseY = e.pageY; // Y coordinates of mouse
$('.info_panel').css({
top: mouseY-50,
left: mouseX - ($('.info_panel').width() / 2)
});
});
Як це працює:
-
По-перше, з mouseover ми будуємо div,що містить інформацію для відображення (ім'я регіону та населення). div будується щоразу при наведенні покажчика миші на g елемент і додається до body документа;
-
mouseleave усуває div, коли курсор знаходиться поза наведеним регіоном;
-
Останній метод, mousemove, витягує координати миші і призначає їх згенерованим div.
Фінальний результат:
See the Pen Dynamic Geo Map with SVG and jQuery by SitePoint (@SitePoint) on CodePen.
Джерело: http://www.sitepoint.com/dynamic-geo-maps-svg-jquery/
491 4
GR: 2.822k
Коментарі: