inet-tr 2008 - google maps ve kurumsal mashup geliştirme - 2. kısım (2/2)
DESCRIPTION
Bu sunum INET-TR 2008 kapsamında ODTÜ KKM'de 21 Aralık 2008 Pazar günü 10.30-13.30 arası yapılmıştır. Sunumun diğer dosyalarına www.mekansal.com adresinden ulaşabilirsiniz. -------------------------------------------------------------------- This presentation was presented on 21.12.2008, Sunday, 10.30-13.30 at INET-TR 2008 at CCC-METU. The example files can be downloaded from www.mekansal.comTRANSCRIPT
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
Google Maps için Javascript
<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?
Google Maps için Javascript
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
Google Maps için Javascript
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
Google Maps için Javascript
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
Google Maps için Javascript
+, - , *, /, % (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
Google Maps için Javascript
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”)
Google Maps için Javascript
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.
Google Maps için Javascript
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.
Google Maps için Javascript
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”));
Google Maps için Javascript
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
Google Maps için Javascript
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?
Google Maps için Javascript
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
Google Maps API Temeller
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
Google Maps API Temeller
Devam ediyoruz : http://
code.google.com/apis/maps/documentation/index.html
2. Adım : Haritayı özelleştirmeye başlıyoruz.
Google Maps API Temeller
<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);
Google Maps API Temeller
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.
Google Maps API Temeller
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>
Google Maps API Temeller
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.)
Google Maps API Temeller
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 ve Statik Veri Gösterme
Dinamik Veriler - GOverlay
GOverlay Arayüzü (Interface)
GMarker GPolyline
GInfoWindowGTileLayerOverlay
GPolygon
Dinamik ve Statik Veri Gösterme
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
Dinamik ve Statik Veri Gösterme
var nokta1 = new GLatLng(37.326868, 35.936523);
var nokta2 = new GLatLng(37.926868, 35.036523);
var nokta3 = new GLatLng(37.026868, 34.536523);
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)
Dinamik ve Statik Veri Gösterme
var nokta1 = new GLatLng(37.326868, 35.936523);
var nokta2 = new GLatLng(37.926868, 35.036523);
var nokta3 = new GLatLng(37.026868, 34.536523);
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)
Dinamik ve Statik Veri Gösterme
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!
Dinamik ve Statik Veri Gösterme
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
Dinamik ve Statik Veri Gösterme
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
Dinamik ve Statik Veri Gösterme
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
JavaScript Frameworkler ile entegrasyon (YUI/DOJO)
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?
JavaScript Frameworkler ile entegrasyon (YUI/DOJO)
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)
JavaScript Frameworkler ile entegrasyon (YUI/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
http://groups.google.com/group/cbs-turkiye