Google Maps API v3’te Polyline – 5

2 Aralık 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Bir önceki yazımda Overlays adı da verilen katmanlara giriş yapmış ve Marker katmanını incelemiştik. Bu yazımda katmanların ikinci bölümü olan Polyline’lar ile devam ediyoruz.


Önceki yazımda Polyline’ları harita üzerinde birden fazla noktayı bir güzergah gibi belirtmek istediğimizde kullanılan ve düz çizgiler halinde oluşturulan katmanlar olarak belirtmiştim. Şimdi Polyline’ları da Polyline Options (Polyline Seçenekler), Polyline Arrays (Polyline Diziler) ve Symbols on Polylines (Polyline’lar üzerindeki semboller) olmak üzere 3 başlıkta inceleyip, örneklendireceğiz.

İlgili Maps API Referansı – Polyline:
https://developers.google.com/maps/documentation/javascript/reference#Polyline

Polyline Options (Polyline Seçenekler)

Polyline Options’ın başlıca özelliklerinden üçü strokeColor, strokeOpacity ve strokeWeight‘tir. Örneklerimizde de kullanacağımız bu özellikleri daha yakından tanıyalım.  Daha fazlası için referans sayfasına göz atabilirsiniz.

strokeColor: Çizgilerin hexadecimal olarak HTML renklerini belirlediğiniz alandır.

strokeOpacity: Çizginin saydamlığını ayarladığınız bölümdür. 0.0’dan başlar ve 1.0’a kadar ondalık bir değer alır. Varsayılan değeri de 1.0’dır.

strokeWeight: Piksel cinsinden çizginin kalınlığını belirtir.

İlgili Maps API Referansı – Polyline Options:
https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions

Şimdi burada yapmış olduğumuz örnekten devam edelim ve bu örneğimize Polyline özelliği kazandıralım. Böylece haritamızda eklediğimiz her Marker için bir Polyline oluşturmuş olalım.

Şimdi gelelim örneğimize..

Global değişkenlerimize aşağıdaki gibi iki tane daha ekleyelim.

var line;
var markerPathCoordinates = [];

line” değişkenini google.maps.Polyline sınıfından türettiğimiz nesne için kullanırken, “markerPathCoordinates” isimli ve dizi olarak tanımladığımız değişkeni de Markerların LatLng değerlerini tutması için kullanacağız. Aslında örneğimiz için bu değerler statik olarak elle belirleyip bir dizi içerisine pekala atabilirdik. Ancak uygulamamızın dinamik olması için eklenen her Marker için konumları da dinamik olarak bu dizi de tutacağız.

İlk iş olarak addMarker fonksiyonumuz üzerinde küçük bir değişiklik yapalım.

function addMarker(latlng){
      marker = new google.maps.Marker({
      position: latlng,
      map: map
   });
   // Oluşturulan Güzergah'ları bir dizide topluyoruz.
   markerPathCoordinates.push(latlng);
}

Eklemiş olduğumuz markerPathCoordinates.push(latlng) kodu ile her Marker eklendiğinde, o Marker’ın LatLng değerlerini markerPathCoordinates isimli dizimize Javascript push fonksiyonu ile ekliyoruz. Böylece Markerların eklenme sırasına göre tüm koordinatları artık dizimizin içerisinde.

Şimdi gelelim lineDraw isimli yeni fonksiyonumuzu oluşturmaya..

function lineDraw(){
   line = new google.maps.Polyline({
      path: markerPathCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
   });

   // markerPathCoordinates içerisinde biriktirdiğimiz location 
   // verileri ile oluşan line'ları haritamıza set ediyoruz.
   line.setMap(map);
}

Aynı Marker oluşturduğumuz gibi burada da google.maps.Polyline sınıfından global değişken olarak tanımladığımız “line” nesnesi oluşturup, yukarıda bahsetmiş olduğum özellikleri ve markerPathCoordinates dizinde topladığımız LatLng değerlerini path‘e ekliyoruz. Artık çizgilerimiz hazır! Ancak harita üzerinde görünmesi için haritanın yeniden render edilmesi gerekiyor. Bunun için de line.setMap(map) komutunu kullanarak tüm haritaya bu çizgileri set ediyoruz.
Tabi İşlemlerimiz hala bitmedi.. Son adım olarak haritamızın olay dinleyicisine fonksiyonumuzu ekleyelim ve örneğimize bakalım.

google.maps.event.addListener(map, 'click', function(event) {
   addMarker(event.latLng);
   // Her marker eklendiğinde çizgimizi de oluşturuyoruz.
   lineDraw();
});

Çalışan örneğe buradan bakabilir, aşağıdaki haritadan da test edebilirsiniz.

Örneği incelediğinizde artık her Marker eklediğimizde line‘ların da otomatik olarak çizildiğini görebilirsiniz.

Polyline Arrays (Polyline Diziler)

Yukarıdaki örneğimizde Polyline‘ları oluşturmak için LatLng değerini barındıran markerPathCoordinates isimli bir dizi değişken oluşturduk. Bunu Javascript’in dizi özelliğini kullanarak yaptık. Ancak dilersek bu konuda Google Maps API‘nin bize sağladığı olanakları da kullanabiliriz.

Google Maps API, MVCObject sınıfından türetilen MVCArray isimli özel bir dizi yapısına sahiptir. Javascript’in dizilerle ilgili özelliğini kullanmak yerine MVCArray‘i kullanmak çok daha sağlıklı olacaktır. Özellikle Map üzerinde kullanmak maksadı ile oluşturulmuş bu dizi sınıfı, metodları ile ihtiyaç duyabileceğiniz her işlemi karşılayabilecek nitelikte. Ama bir zorunluluk kesinlikle değil. İsteyen yine yukarıdaki örneğimizde olduğu gibi Javascript ile de işlemlerini gerçekleştirebilir. Fakat ilerleyen konularda yapacağımız örneklerde göreceksiniz ki pek çok işlemi MVCArray ile yapmak gerçekten çok daha basit.

Şimdi örneğimizi MVCArray ile yenileyelim ve her eklediğimiz Marker‘a bir title özelliği tanımlayarak gözlemleyelim. Bunu yaparken MVCArray‘in getLength(), push(), getPath() gibi metodlarını da kullanalım. Daha fazlası için ilgili Maps API referansına göz atabilirsiniz.

İlgili Maps API Referansı – MVCArray:
https://developers.google.com/maps/documentation/javascript/reference#MVCArray

Önceki örneğimizde

var markerPathCoordinates = [];

şeklinde oluşturduğumuz tanımlamayı iptal edip yerine

var linePath;

isimli yeni bir değişken tanımlaması yapalım. Dikkat ettiyseniz yine bir dizi tanımlıyoruz fakat Javascript tanımında yaptığımız gibi değil! Normal bir değişken tanımı yapar gibi. linePath değişkeni aynı markerPathCoordinates değişkeninde olduğu gibi Marker koordinatlarını bir dizi şeklinde tutmamızı sağlayacak bir MVCArray dizisi. Ancak gördüğünüz üzere tanımlaması normal bir değişken tanımlamaktan farklı değil.

addMarker isimli fonksiyonumuzu da aşağıdaki gibi yeniden düzenleyelim.

linePath = line.getPath(); // YENİ
marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: linePath.getLength() + " numaralı marker!" // YENİ
});

Maps olay dinleyici içerisinde çağırdığımız addMarker fonksiyonun çalışma şekli şu şöyle olacak.

Harita üzerine her tıklandığında önce “line” isimli Polyline nesnesinin getPath() metoduyla path‘i elde edilecek, elde edilen bu path içerisinden getLength() metodu ile ilgili Marker sırası alınıp Marker’ın title özelliğine eklenecek.

Ancak dikkat edecek olursak burada kullandığımız “line” nesnesi henüz bir yerde tanımlanmamasından dolayı hata verecek ve örneğimiz isteğimizi gibi çalışmayacak. Bu hatanın önüne geçmek için “baslat” fonksiyonumuzun içerisine aşağıdaki gibi boş bir line nesnesi oluşturalım.

line = new google.maps.Polyline();

Son olarak addMarker fonksiyonu içerisinde

markerPathCoordinates.push(latlng);

şeklinde eklediğimiz yeni LatLng değerlerini artık aşağıda olduğu gibi linePath değişkenine aktarıyoruz.

linePath.push(latlng);

addMarker fonksiyonunda yapacağımız değişiklikler bittiğine göre lineDraw fonksiyonundaki Polyline Options‘ta belirttiğimiz path özelliğini de linePath ile değiştirdiğimizde örneğimizi tamamlamış oluyoruz.

Çalışan örneğe buradan bakabilir, aşağıdaki haritadan da test edebilirsiniz.

Örneği incelediğinizde, bir önceki örneğimiz ile tamamen aynı çalıştığını ve Marker‘ların üzerine geldiğinizde eklenme sırasına göre sıralarını görebilirsiniz. Bu sıralamanın dizi yapısında olduğu gibi 0‘dan başladığını unutmayalım.

Symbols on Polylines (Polyline’lar üzerindeki semboller)

Polyline‘lar üzerinde kullanılacak semboller, Polyline Options‘ta tanımlanan “icons” özelliği ile kullanılır. Şimdi gelin bunlara daha yakından bakalım.

Arrows

Polyline‘lar üzerinde standart olarak daire, ileri arkası kapalı ok, ileri arkası açık ok, geri arkası kapalı ok ve geri arkası açık ok olmak üzere 5 farklı kullanım şekli vardır ve şu şekilde ifade edilir.

google.maps.SymbolPath.CIRCLE
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
google.maps.SymbolPath.FORWARD_CLOSED_ARROW
google.maps.SymbolPath.BACKWARD_OPEN_ARROW
google.maps.SymbolPath.FORWARD_OPEN_ARROW

Örneğimiz için başlat fonksiyonumuzu aşağıdaki gibi düzenleyelim.

var konum = new google.maps.LatLng(41.033787, 28.649889);
   var mapOptions = {
   zoom: 13,
   center: konum,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

var lineCoordinates = [
   new google.maps.LatLng(41.033787, 28.649889),
   new google.maps.LatLng(41.020700, 28.649895)
];

var lineSymbol = {
   path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

line = new google.maps.Polyline({
   path: lineCoordinates,
   strokeColor: "#FF0000",
   strokeOpacity: 1.0,
   strokeWeight: 2,
   icons: [{
      icon: lineSymbol,
      offset: '100%'
      }]
});

line.setMap(map);

Tek bir hat örneği için lineCoordinates isimli değişkene başlangıç ve bitiş noktası olan iki koordinat verelim ve lineSymbol değişkenimizin path özelliğine kullanmak istediğimiz sembolu atayalım. Bu işlemleri gerçekleştirdikten sonra Polyline‘larımızı oluşturduğumuzu bölümde “icons” özelliğine ait “icon” bölümüne sembolümüzü atayalım. Buradaki diğer parametre olan “offset“, atadığımız sembolün Polyline‘ın üzerinde nerede olması gerektiğini belirttiğimiz bölümdür. 0 ile 100 arasında bir değer alır. 0, Polyline‘ın başlangıç konumunu, 100 ise sonunu ifade eder. Aradaki değerler ise yüzdesel olarak Polyline üzerindeki bir noktayı gösterir.

Çalışan örneğe buradan bakabilir, aşağıdaki haritadan da test edebilirsiniz.

Dashed Lines

Polyline’ı düz bir çizgi hattı kullanmak yerine kesikli çizgiler şeklide kullanmak istiyorsanız tercih edeceğiniz bir yöntemdir. Bu yöntemi kullanmak için kodumuzu aşağıdaki gibi değiştirelim.

var lineSymbol = {
   path: 'M 0,-1 0,1',
   strokeOpacity: 1
};

line = new google.maps.Polyline({
   path: lineCoordinates,
   strokeColor: "#FF0000",
   strokeOpacity: 0,
   icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '15px'
   }]
});

Dikkat ettiyseniz lineSymbol‘deki path alanında bazı anlamsız görünen kodlamalar var. Bunlar “SVG path notation” adı verilen bir sisteme göre yazılıp, grafik oluşturulması sağlanıyor. SVG (Scalable Vector Graphics-Ölçeklenebilir Vektör Grafikleri), 2 boyutlu grafik tanımlamak için kullanılan bir XML dilidir diyebiliriz. Maps API’de grafiklerin oluşturulmasında bu dilden faydalanıyor. SVG hakkında detaylı bilgi ve referans için w3.org üzerindeki bu adresten faydalanabilirsiniz.

Çalışan örneğe buradan bakabilir, aşağıdaki haritadan da test edebilirsiniz.

Animating Symbols

Polyline üzerinde kullandığınız sembolleri daha işlevsel hale getirmek için bir animasyon haline çevirebilirsiniz. Bunun için Javascript setTimeout() fonksiyonunu kullanarak Polyline üzerinde hareket eden bir ok animasyonunu aşağıdaki gibi oluşturabiliriz. Önce baslat fonksiyonumuzun içeriğini aşağıdaki gibi düzenleyelim.

var lineSymbol = {
   path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
   strokeColor: '#393'
};

line = new google.maps.Polyline({
   path: lineCoordinates,
   strokeColor: "#FF0000",
   strokeOpacity: 4,
   icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '30px'
   }]
});

Animasyon için ise Google Maps API‘nin referans sayfasında verdiği animateCircle isimli fonksiyonu kullanabiliriz.

function animateCircle() {
   var count = 0;
   offsetId = window.setInterval(function() {
      count = (count + 1) % 200;
      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
   }, 20);
}

Bu fonksiyonu da aynı “baslat” fonksiyonunda yaptığımız üzere aşağıdaki gibi çağıralım.

<body onload="baslat(); animateCircle();">

Çalışan örneğe buradan bakabilir, aşağıdaki haritadan da test edebilirsiniz.

Burada dikkat ettiyseniz Arrows, Dashed Lines ve Animating Symbols olmak üzere 3 grupta incelediğimiz Polyline‘lar üzerindeki sembollerden standart olarak desteklenen Arrows, diğerleri bundan türetme farklı kullanım şekilleridir.

Bir sonraki yazıda görüşmek üzere.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.