Kartograph.js: 1. Bölüm Nedir ve Nasıl Kullanılır

Merhabalar, bu hafta kartograph kutuphanesinin kullanımından bahsedeceğim.

Kartograph Nedir? 

Bu kütüphane etkileşimli haritalar yaratmak için kullanılan basit ve hafif bir sistemdir. Temelde 2 kütüphaneden oluşmaktadır. Bunlar kartograph.py ve kartograph.js‘dir. Birincisi istediğiniz özelliklerde SVG haritaları hazırlamanıza imkan sağlarken, diğeri ise hemen hemen bilindik tüm internet tarayıcılarında çalışan etkileşimli haritalar hazırlamanızı sağlar.

Merhaba Dünya

Bu link üzerinden aşağıdaki örneğe erişebilirsiniz. Github üzerinden tüm projeyi bilgisayarınıza çekmenizi tavsiye ederim. Şimdi aşağıda ki kodu inceleyelim.

<!DOCTYPE html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/raphael-min.js"></script>
<script src="../kartograph.min.js"></script>
<script type="text/javascript">
    $(function() {
        var svgLayer='countries';
        var map = Kartograph.map('#map');
        map.loadMap('svg/world.svg', function() {
            map.addLayer(svgLayer, {
                styles: {
                    fill: '#abc',
                    stroke: '#fff'
                },
                chunks: 50,
                done: function() {
                    map.getLayer(svgLayer).style('fill', '#789');
                }
            });
        });
    });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

  • Öncelikli olarak gerekli kütüphaneleri ekliyoruz. Bunlar JQuery, Raphael ve Kartograph.js.
  • Daha sonra ilk işimiz haritanın gösterileceği div elemanı ile ilişkilendirilmiş map nesnesini yaratmak.
    var map = Kartograph.map(‘#map’); ifadesi ile bu işlemi yapıyoruz.
  • Şimdi sırada ilgili svg’nin seçilmesi var. Bu işlemi loadMap fonksiyonu ile yapıyoruz. Buradaki önemli ayrıntı görüntülemek istediğiniz katmanların(layer) map nesnesine eklenmesidir. Aksi halde tarayıcınızda herhangi bir şey göremeyeceksiniz.
    Esas problem elimizde bulunan svglerde hangi katmanların mevcut oldugunu bilmektir. Bunu belirlemenin en ilkel yöntemi herhangi bir text editor yada more komutu ile svg dosyasını açıp svg group elemanlarını aramak olacaktır. Bir başka deyişle g tag’i bulunan <g class=”” id=”countries”> gibi ifadelere bakmaktır.Bir başka yöntem olarak aşağıdaki gibi ufak bir python betiği ile grupların id’lerini listeleyebiliriz.
    from xml.dom import minidom<
    svgFile = 'world.svg'
    xmldoc = minidom.parse(svgFile)
    svgGroups = xmldoc.getElementsByTagName('g')
    for g in svgGroups:
        print g.getAttribute('id')
    


    Eminim daha kolay yöntemleri mevcuttur fakat Gimp yada Inkscape tarzı araçlarla pek haşır neşir olmadığım için bu yöntemler daha kolay geliyor.🙂

  • Katmanlarımızı belirlediğimize göre addLayer fonksiyonuna geçebiliriz. Bu fonksiyon ile hangi katmanların yükleneceğinin yanısıra bu katmanların nasıl ve hangi özelliklerle yükleneceğini de belirleyebiliyoruz. Bunun için kullanacağımız bazı parametreler mevcut. Bu aşamada bizim için önemli olan ifade chunks:50’dir. Bu ifade sayesinde haritalar bütün olarak değilde küçük parçalar halinde yüklenir. Bu da tarayıcının büyük haritalarla çalışırken donmasını engeller.
  • Son olarak done ifadesi gelir. Bu da yükleme işlemi tamamlandığında verilen fonksiyonu çağırır.

Daha ayrıntılı bilgi için projenin dökümantasyonuna buradan ulaşabilirsiniz.

İlk ekran görüntümüz:
world-1
Bu ayrıntılar benim için yeterli değil diyenler için bir sonraki adıma geçiyoruz. Kartograph.py kullanarak daha ayrıntılı bir harita olusturacağız ve kodu güncelleyip tekrar çalıştıracağız. Eğer ayrıntılı bir haritaya ihtiyacınız yoksa yazıyı burada bitirebilirsiniz.

Kartograph.py

Bu yazıda sadece Ubuntu üzerine nasıl kurulum yapılacağından bahsedeceğim. Ubuntu kullanmıyorsanız bu linkleri okuyunuz. Windows, Mac OS X

  • Önce gerekli paketleri kuralım:
    sudo apt-get install libxslt1-dev python-dev python-shapely python-gdal python-pyproj python-pip

  • Şimdi Github üzerinden kartograph.py’i kuralım:
    sudo pip install https://github.com/kartograph/kartograph.py/zipball/master -r https://raw.github.com/kartograph/kartograph.py/master/requirements.txt

  • Kurulum işlemi tamamlandıktan sonra svg’yi oluşturmak için kullanacağımız harita detaylarını indirmemiz gerekmektedir:
    mkdir ~/kartograph-test cd ~/kartograph-test
    wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip
    unzip ne_50m_admin_0_countries.zip

  • Bu işlemden sonra svg ve indirdiğimiz shape dosyası arasında bağ kuracak olan json dosyasını oluşturuyoruz:
    {
        "layers": [{
            "id" : "mylayer",
            "src": "ne_50m_admin_0_countries.shp"
        }],
        "export" : { "width" : 1000 },
        "styles" : { "fill": "#dfdcdc", "stroke": "#fff" }
    }

  • addLayers içersinde kullandığımız styles ifadesini burada da tanımlayabiliyoruz. Ayrıca oluşturulacak svg dosyasının genişlik yükseklik gibi ifadelerini de tanımlamamız mümkün. Örnekte olduğu gibi sadece genişlik yada sadece yükseklik verildiğinde diğer özellik otomatik olarak hesaplanmaktadır. Ayrıca bir başka ayrıntı ise katmanların id değerlerinin belirlenmesi. Bu örnekte “mylayer” değerini verdik. Eğer burada id tanımı yapılmasaydı, id değeri “layer_0” olarak atanacaktı.
    Ayrıntılı bilgi için bu linki kullanabilirsiniz.
  • Json dosyamızda hazır olduğuna göre artık svg dosyamızı oluşturabiliriz. Bunu yapmak için:
    kartograph world.json -o world.svg
  • Bu işlemde tamamlandıktan sonra yukarıda açıkladığımız ilk örnekte bulunan var svgLayer değişkeninin değerini mylayer olarak değiştirip sayfayı tekrar açtığımızda aşağıda ki ekran görüntüsünü elde etmiş oluruz.

world-2

Özellikle bu konuya benim gibi yeni başlayanlar için faydalı olacağını umuyorum.
Not: Sitesinde bulunan örneklere bu linkten ulaşabilirsiniz.
İyi haftalar,
Gurcan
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: