INET-TR 2008 - Google Maps ve Kurumsal Mashup Geliştirme - 2. Kısım (2/2)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Neden Google Maps?

Yüksek Çözünürlüklü Uydu Görüntüleri Detaylı Yol Haritaları Yükseklik Katmanı Adres Bulma Servisi (Geocoding) Dökümantasyon Topluluk Desteği Açık Kaynak Genişleme Paketleri

Neden Google Maps?Detaylı Haritalar ve Görüntüler

Neden Google Maps?Adres Bulma (Geocoding)

Reverse Geocoding!

Neden Google Maps?

Bol Örnek Referans Kütüphanesi Sunumlar ve Videolar

http://code.google.com/apis/maps/

Dökümantasyon

Neden Google Maps?

http://groups.google.com/group/Google-Maps-API http://mapki.com/ http://googlegeodevelopers.blogspot.com/ http://econym.googlepages.com/index.htm Çok Yakında : www.mekansal.com

Topluluk Desteği

Neden Google Maps?

MarkerManager DragZoomControl LabeledMarker ExtMapTypeControl ExtInfoWindow MapIconMaker MarkerTracker

http://code.google.com/p/gmaps-utility-library/

Açık Kaynak Genişleme Paketleri

Neden Google Maps?

Google Maps API For Flash/Flex Google Static Maps API Google Mapplets API Google Earth API (JS)

Hatırlatma!

Sadece JavaScript’le yazmak zorunda değilsiniz!

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps?

Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Google Maps için JavaScript

JavaScript Nedir? Betimleme Dili (Scripting Language) Prototip Tabanlı (~Nesne Tabanlı) weakly typed Java ile isim ve yazım hariç bir

benzerlik YOK! İstemci tarafında çalışır (Tarayıcılarda)

Google Maps için Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>sayfa başlığı</title>

</head>

<body>

<script type="text/javascript">

.....

document.write(Merhaba Dünya!');

.....

</script>

<noscript>

<p>Tarayıcınız JS desteklemiyor ya da JS kapalı!</p>

</noscript>

</body>

</html>

Nerede kullanılır?

JavaScript’in çalıştığı kısım


<script language="JavaScript" type="text/javascript">

<!–

.....

Kod bloğu

.....

// --> </script>

- <script> de ile başlayabilir

- <script type="text/javascript" src="hello.js"></script> ile dışarıdan JS dosyası eklenir.

Nerede kullanılır?


a = 50; // global değişken

var isim = 'Alper'; // global değişken

function deneme(){

var test = 'inet-tr'; // yerel değişken

alert ('Kullanıcı İsmi :' + isim); // global değişkenin içeriği hala geçerli : Alper

}

deneme();

alert(test); // hata verecektir, çünkü ‘test’ değişkeni yerel olarak tanımlı.

Değişkenler


Sayılar (Numbers) (x = 345; y = 3.14;)

Karakter kümesi (String) (isim = "alper", soyad = 'dinçer')

Seriler (Arrays) seri1 = [1,2,4,16];

seri2 = new Array(1,2,4,16);

seri3 = new Array[4]; //4 adet yer ayrıldı.

alert(seri2[3]); // ekrana “16” basacaktır

Değişken Tipleri


Document Object Model (DOM) ya da diğer objelerin fonksiyon ve özelliklerine erişim için “nokta” kullanılır.

Örn: document.body.style.color = ‘red’

Objelere Erişim


+, - , *, /, % (Aritmetik operatörler) ++, -- (Aritmetik operatörler) = (Atama operatörü) ==, !=, >, >=, <, <= (Karşılaştırma op.) && and, || or, ! değil ya da tersi + (karakter eklemek için)

örn : adsoyad = “Alper" + " " +“Dinçer";

Operatörler


if (koşul ya da koşullar)

{

....

}

else

{

....

}

Koşullar ve Değerlendirme

a = “alper”;

if (a == “alper”)

{

alert(“değişkenin içeriğinde \”alper\” var”);

}

else

{

alert(“değişkenin içeriğinde farklı!”);

}

if (isim == “alper” && soyisim == “dinçer”)


for (ilkDeğer;koşul;artışDeğeri) {

...

n defa çalışacak kodlar

...

}

Döngüler

for (i=0;i< 5;i++) {

//5 defa çalışacak kodlar

alert(i);

}

// Ekrana 0’dan 4’e kadar sayıları basacak.


while (koşul) {

.....

}

do {

.....

} while (koşul);

Döngüler

i = 0;

while (i < 5) {

alert(i);

i++;

}

// Ekrana 0’dan 4’e kadar sayıları basacak.


function fonksiyonAdi (p1, p2, p3) { // p : parametre

.... Çalışacak kodlar ....

return geriDonecekDeger; // bu kısım opsiyonel

}

Fonksiyonlar

function isimYazdir (ad, soyad) {

alert(“Ad-Soyad : “ + ad + “ “ + soyad);

}

function isimDondur (ad, soyad) {

var adSoyad = ad + “ “ + soyad;

return adSoyad;

}

alert (“Ad-Soyad : “ + isimDondur(“alper”,”dinçer”));


Yorumlar // tek satır yorumlar için

/* .... */ birden fazla satır içeren yorumlar için

Alt satıra geçmek : \n Karakter kaçmak için : \” , \’, \\

Diğer Elemanlar


Asynchronous JAvascript XML Bir programlama dili değildir! Geliştirme tekniğidir Eş zamanlı olmayan istemci-sunucu

ilişkisi üstüne kuruludur XML olması gerekli değildir!

Örnek : GMail, Google Maps

AJAX Nedir?


Notepad++ / Aptana (JS ve HTML için)

Firefox ve Firebug (Debug için)

Geliştirme Araçları

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript

Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Google Maps API TemellerÇalışma Prensibi

Döşeme (Tiling) Sistemi üstüne kuruludur.

Basit olarak bir önbellekleme metodudur. Kullanıcıya belli ölçek seviyelerinde daha önceden oluşturulmuş haritalar sunularak hız kazanımı sağlanır.

WGS 84 – Coğrafi Koordinat Sistemi

Google Maps API Temeller“Tiling” sistemi

Google Maps API Temeller“Tiling” sistemi

Google Maps API Temeller

Başlangıç Noktamız : http://code.google.com/apis/maps/

1. Adım : Anahtar oluşturmak


http://localhost/ için anahtar :

ABQIBBBBKs6JN4Ceutf3XhUIepWEYhT5yXp_ZAY7_ufC2CFXhHIE7NvwkxR89Dk5MuQNqhYIpMNRuj4Q6Oeolw

Anahtar Oluşturmak

Google Maps API Temellerİlk Örnek

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=api_anahtar" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width:500px;height:300px"></div> </body></html>

Haritanın Gösterileceği Kısım

Haritayı Başlatır/Bitirir

Harita objesini oluşturur

Tarayıcı uyumunu kontrol eder

Google Maps APIsini ekler


Devam ediyoruz : http://

code.google.com/apis/maps/documentation/index.html

2. Adım : Haritayı özelleştirmeye başlıyoruz.


<div id="map" style="width:500px;height:300px"></div>

HTML Özelleştirme

Ref-0

HTML Resim ve İmajlar CSS JavaScript

Google Maps API TemellerKontroller

Ref-1

GLargeMapControl

GSmallMapControl

GSmallZoomControl

GScaleControl

GMapTypeControlGHierarchicalMapTypeControl

GOverviewMapControl

Kullanımı : map.addControl(new GSmallZoomControl());

Google Maps API TemellerHarita Tipleri ve Erişimleri

Ref-2

G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP G_PHYSICAL_MAP

Kullanımı : map.setMapType(G_HYBRID_MAP);


var lat = 37.926868;

var lng = 34.936523;

var ilkNokta = new GLatLng(lat, lng);

map.setCenter(ilkNokta, 6);

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Koordinatlar ve Nokta Oluşturmak

http://maps.google.com/?ie=UTF8&ll=37.926868,34.936523&spn=14.335951,26.806641&z=6

Ref-3

Haritayı oluşturulan noktaya ortalar.


map.zoomIn();

map.zoomOut();

map.setZoom(9);

map.panTo(ilkNokta);

map.setCenter(ilkNokta, 13);

Harita ile Kontroller Harici Etkileşim

Ref-4

Haritaya 1 seviye yakınlaştırır.

Haritadan 1 seviye uzaklaştırır.

Haritayı verilen seviyeye (9) yakınlaştırır.

Haritayı verilen noktaya taşır.

Haritaya verilen nokta ortalayarak, verilen seviyeye yaklaştırır.

Kullanımı (HTML içinden) : <a href="javascript:map.zoomOut();">Uzaklaş</a>


GEvent.addListener(map, "click", function(overlay,latlng) {

alert("Haritaya Tıklandı! - Koordinatlar : " + latlng);

});

Olaylar (Events) ve Etkileşim Oluşturma

Ref-5

- click(overlay:GOverlay, latlng:GLatLng, overlaylatlng:GLatLng)

- dblclick(overlay:GOverlay, latlng:GLatLng)

- movestart()- move()- moveend()- drag()

Map Objesinin Olaylarından Birkaçı

Dinlenmeye başlayan obje Olay gerçekleştiğinde çalışacak foksiyon

Olayı kaldırmak için :

GEvent.removeListener

(olayObjesi);

Olay Örneği (Google Doc.)


var request = GXmlHttp.create();request.open("GET", “koordinatlar.xml", true);request.onreadystatechange = function() { if (request.readyState == 4) { alert(request.responseText); }}

request.send(null);

AJAX ve Asekron Veri Çekmek

Avantajları : Arka planda çalıştığı için daha yumuşak geçişler Sayfa yenilenmediği için daha az veri transferi Masaüstü uygulama kullanıyormuş hissi

GDownloadUrl("koordinatlar.xml", function(data, responseCode) { alert(data);

}); * Bu sadece “GET” metodu için kullanılır

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller

Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Dinamik ve Statik Veri Gösterme

Dinamik veriler Google Maps’in üzerinde nokta, çizgi ya da poligon olarak gösterdiğimiz vektör verilerdir. Bunları dinamik olarak veritabanından ya da diğer dosyalardan çekip kullanabiliriz.

Statik veriler ise harita gösterim sürecini hızlandırmak için raster ya da vektör veriden daha önceden oluşturulmuş “tile” katmanlarıdır.

Dinamik vs Statik

Örnek bir “tile” katmanı – Seviye 4


Dinamik Veriler - GOverlay

GOverlay Arayüzü (Interface)

GMarker GPolyline

GInfoWindowGTileLayerOverlay

GPolygon


var lat = 37.926868;

var lng = 34.936523;

var ilkNokta = new GLatLng(lat, lng);

var balon = new GMarker(ilkNokta);

map.addOverlay(balon);

Dinamik Veriler - Nokta

Ref-6


var nokta1 = new GLatLng(37.326868, 35.936523);



map.setCenter(nokta1, 7);

var cizgi = new GPolyline([nokta1, nokta2, nokta3],"#ff0000", 8);

map.addOverlay(cizgi);

Dinamik Veriler - Çizgi

Ref-7

GPolyline(latlngs:GLatLng[], color?:String, weight?:Number, opacity?:Number, opts?:GPolylineOptions)





map.setCenter(nokta1, 7);

var poligon = new GPolygon([nokta1, nokta2, nokta3, nokta1],"#f33f00", 5, 1, "#ff0000", 0.2);

map.addOverlay(poligon);

Dinamik Veriler - Poligon

Ref-8

GPolygon(latlngs:GLatLng[], strokeColor?:String, strokeWeight?:Number, strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, opts?:GPolygonOptions)


map.removeOverlay(balon);

map.removeOverlay(cizgi);

map.removeOverlay(poligon);

ya da

map.clearOverlays();

Dinamik Veri Silme

Ref-9

Tüm noktaları haritadan siler.

Dikkat : Katmanlar teker teker silinecek ise katman objelerininglobal ya da erişilebilir durumda olması gerekmektedir!


GEvent.addListener(balon, "click", function() {

balon.openInfoWindowHtml("Balon Bilgisi <b>Açıldı!</b>");

});

GEvent.addListener(cizgi, "click", function(latlng) { //

map.openInfoWindowHtml(latlng,'Çizgi Bilgisi <b>Açıldı!</b>');

});

Dinamik Veriye Bilgi Ekleme

Ref-10 & Ref-11


var lisans = new GCopyrightCollection("(c)"); lisans.addCopyright(new GCopyright('Demo', new GLatLngBounds(new

GLatLng(-90,-180), new GLatLng(90,180)),0,'INET-TR 2008'));

var tileKatmanı = new GTileLayer(lisans, 0,21 ); tileKatmanı.getTileUrl = function(tile,zoom){return

"http://inettr.appspot.com/getTile?layer=il-ilce&tileID=" + zoom + "/" + tile.x + "/" + tile.y +".png";};

tileKatmanı.isPng = function() { return true;}; tileKatmanı.getOpacity = function() { return 0.5; }

var tileOverlay = new GTileLayerOverlay(tileKatmanı);

map.addOverlay(tileOverlay);

Statik Veriler – Tile Katmanı

Ref-12


Statik Veriler – Tile Katmanı

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme

Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Geocoding (Adres bulma)

geocoder = new GClientGeocoder();

....

function adresiBul() {

var address = document.getElementById("search").value;

geocoder.getLatLng(

address,

function(point) {

if (!point) {

alert(address + " --> bulunamadi!");

} else {

map.setCenter(point, 16);

var marker = new GMarker(point);

map.addOverlay(marker);

marker.openInfoWindowHtml(address);

}

}

);

}

Adres Sorgusu

Ref-13 (gmap2.html)

Geocoder’ı tanımlıyoruz

Adres sorgusunu textbox’tan alıyoruz

Adresi sorguluyoruz

Bulunan noktayı haritaya ekliyoruz

Reverse Geocoding gmap3.html

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma)

Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Soru ve Cevaplar

Genişleme Paketleri

http://code.google.com/p/gmaps-utility-library/

Genişleme Paketlerine Genel Bakış

MarkerManager

DragZoomControl

LabeledMarker

ExtInfoWindow

MapIconMaker

MarkerTracker

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri

JavaScript Frameworkler ile entegrasyon (YUI/DOJO)

Soru ve Cevaplar


Artıları : Tarayıcılar arası uyum sorunu yok Hazır araçları var Geniş dökümantasyon, örnek ve desteğe sahipler Arayüz konusunda standartlara uygunlar

Eksileri : Dosya boyutu olarak çok yüksek Tembelliğe alıştırıyorlar

Neden JS Frameworkler?


http://developer.yahoo.com/yui/ Yahoo tarafından geliştiriliyor (BSD lisans)

Yahoo User Interface (YUI)

http://dojotoolkit.org/ Açık Kaynak Topluluk tarafından geliştiriliyor

The DOJO Toolkit (DOJO)


YUI Entegrasyon – Örnek 1

YUI Entegrasyon – Örnek 2

DOJO Entegrasyon – Örnek 1

Örnekler

Sunum İçeriği

GeoWeb 2.0 nedir? Neden Google Maps? Google Maps için JavaScript Google Maps API Temeller Dinamik ve Statik Veri Gösterme Geocoding (Adres bulma) Genişleme Paketleri JavaScript Frameworkler ile entegrasyon (YUI/DOJO)

Soru ve Cevaplar

Soru ve Cevaplar

Konu ile ilgili Sorular

Soru ve Cevaplar

Sunumun İşlenişi ile İlgili Eleştiriler

Google Maps ve Kurumsal Mashup Geliştirme

İlginiz için teşekkür ederim.

Alper Dinçer

[email protected]

http://groups.google.com/group/cbs-turkiye

Technology

INET-TR 2008 - Google Maps ve Kurumsal Mashup Geliştirme - 2. Kısım (2/2)