Динамічні географічні карти з SVG і JQuery

9 хв. читання

Створюємо SVG мапу в Illustrator

Створимо мапу Італії в Illustrator:

Карта з допомогою SVG та jQuery

Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовуваному в базі даних, щоб ідентифікувати відповідні дані (наприклад: "tos" для Tuscany).

Мапа повинна бути збережена як SVG файл. Зверніть увагу на те, що потрібно встановити опцію "Style Elements" для "CSS властивісті" в Illustrator, як показано нижче:

Illustrator SVG

При відкритті файлу, ви побачите, що він містить набір g тегів, ідентифікаторів, ім'я яких збігається з іменами рівнів в Illustrator.

Створюємо наш HTML файл

Кожен пункт, який міститься в g тегах має класс st0, тож CSS властивості stroke і fill можуть бути використані до них:

HTML

Якщо ви спробуєте змінити ці значення, карта негайно зміниться:

CSS

Тепер ми можемо використати цей код, щоб побудувати наш HTML файл з SVG як показано нижче (код був скорочений для зручності):

        <meta charset="UTF-8">
        <title>Map Sample</title>
        <style media="all" type="text/css">
            .map svg {
                height: auto;
                width: 350px;
            }
            .map g {
                fill: #ccc;
                stroke: #333;
                stroke-width: 1;
            }
        </style>
    
        <div class="map">
            <svg id="Livello_1" style="enable-background:new 0 -21.6 761 919;" version="1.1" viewBox="0 -21.6 761 919" x="0px" y="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
                <g id="sar">
                    <polygon class="st0" points="193,463 ...    "></polygon>
                </g>
     
            </svg>
        </div>

Можна побачити, що атрибут 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 
         + ')'});
        }
    });

Результат:

Карта з допомогою SVG та jQuery

Додаємо інтерактивності за допомогою 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.

Фінальний результат:

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: тег i html, тег i, i class css