Kartograph.js: 3. Bölüm Etkileşimli Haritalar – 2

Merhabalar,

Bu hafta fare olaylarının çizdiğimiz SVG elemanları ile nasıl etkileşime girebileceğine değineceğim. Bu işi tamamlamak iki yoldan bahsedeceğiz, JQuery ve Kartograph.js.

JQuery:

SVG elemanları çizildikleri katmanların (layer) stil sınıf değerlerini almaktadır. Bu yüzden JQuery yardımı ile bu katmana ait tüm elemanları çekip bu elemanların ‘mouseover’, ‘mouseout’ ve ‘click’ olaylarına ait callback fonksiyonlarını tanımlamamız yeterlidir.

$('.countries').each(function(index) {
    $(this).on('mouseover', function() {
        $(this).css("fill", "#FF0000");
    });
    $(this).on('mouseout', function(){
        $(this).css("fill", "#ABC");
    });
    $(this).on('click', function(){
        countryId=$(this).attr('id');
        alert('You clicked on country with id: ' + countryId);
    });
}

Bu yöntemin bir problemi SVG üzerinde tanımlanmış verilere ulaşmamız kolay olmamaktadır. Örnek vermek gerekirse bu yöntem ile sadece DOM elemanlarının üzerinde bulunan verilere erişebiliriz. ‘Name’, ‘ISO’ gibi SVG üretirken json dosyasında belirttiğimiz değişkenlere bu yöntemle ulaşamıyoruz. Bunun için kartograph.js’nin bize sunmuş olduğu yöntemleri kullanmalıyız.
Kartograph.js:
Kartograph.js nin desteklediği fare olayları şöyledir; ‘click’, ‘mouseenter’, ‘mouseleave’, ‘dblclick’, ‘mousedown’, ‘mouseup’, ‘mouseover’, ‘mouseout’. Bu olaylara ilgili callback fonksiyonlarının atanması/tanımlanması için kullanabileceğimiz iki yöntem var.
  • addLayer fonksiyonunun içersine aşağıdaki satırları eklemek. Burada tanımlanan fonksiyon 3 parametre almaktadır. ‘Data’ değişkeni fare olayına hedef olan path svg elemanın verilerini tutan sözlük değişkenidir. ‘Path’ değişkeni Raphael objesidir. ‘Event’ ise javascript tarafından oluşturulan orjinal olayıdır.

map.addLayer('countries', {
    click: function(data, path, event) {
        countryId=data.id;
        alert('You clicked on country with id: ' + countryId);
    },
    mouseenter: function(data, path, event) {
        path.attr("fill", "#FF0000");
    },
    mouseleave:function(data, path, event) {
        path.attr("fill", "#ABC");
    }

  • getLayer fonksiyonu sayesinde daha önceden eklemiş olduğumuz bir katmanı çağırıp üzerine yeni callback fonksiyonlarımızı atayabiliyoruz.

map.getLayer('countries')
    .on('click', function(data, path, event) {
        countryId=data.id;
        alert('You clicked on country with id: ' + countryId);
});

SVG Verilerine Erişmek
Burada ki verilere erişmek için yapılması gereken oldukça basittir. Bu veriler kartograph kütüphanesinde layerların altında sözlük objeleri olarak tutmaktadır. Bu verileri çekmek için istediğiniz katman objesinin üzerinden getPathsData fonksiyonunu kullanıyoruz. Bu fonksiyon bize sözlük objelerinden oluşan bir dizi döndürüyor.

var layer = map.getLayer('mylayer');
var pathData = layer.getPathsData();

Bu dönen verileri haritamız üzerinde bar yada dairesel grafiklerin büyüklüklerini belirlemek için kullanabiliriz. Bu grafiklerin bu çekilen veriler ile nasıl oluşturabileceğimizi bir sonraki yazıda belirteceğim.
İyi haftalar,
Gürcan
Tagged with: ,
Posted in yakindanegitim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
%d bloggers like this: