Google Maps ve Kurumsal Mashup Geliştirme

Google Maps ve Kurumsal Mashup Geliştirme Alper DİNÇER İnşaat Yüksek Müh. CBS Web Yazılım Uzm. 21 Aralık 2008 / İNET-TR / ODTÜ - ANKARA Google Maps ve Kurumsal Mashup Geliştirme Günlük : www.alperdincer.net Web : www.mekansal.com E-posta : gis@dincer.tc 21 Aralık 2008 / İNET-TR / ODTÜ - ANKARA

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 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

GeoWeb 2.0 nedir? Geospatial Web = Geoweb Coğrafi bilginin internette yayınlanması Aramada lokasyon bilgisinin kullanılması Mevcut verilerin coğrafi koordinatlarla ilişkilendirilmesi (metin ya da resim) GeoWeb 1.0 vs GeoWeb 2.0 GeoWeb 1.0 GeoWeb 2.0 Statik 2B haritalar Tekil web siteleri Özel Protokoller (örn:axl) Özel Formatlar (örn:shp, TAB) Tekil Mekansal Sunucular Dinamik 2B ve 3B haritalar Servis tabanlı uygulamalar (Mashups) Standart Protokoller (örn: W*S, SOAP/XML, REST) Standart Formatlar ( örn: GML, KML, GeoJSON) Mekansal Veri Portalları

GeoWeb 1.0 vs GeoWeb 2.0 GeoWeb GeoWeb 2.0 GeoWeb 1.0 GeoWeb 2.0 nedir? Web Tabanlı Dinamik Haritalar Sanal Küreler (Google Earth / City Surf) Ortak Harita Üretimi / Open Street Map Coğrafi Etiketleme (Geotagging) Mashups (Melez Uygulamalar) Neogeography (new geography) Standart Veri Formatları ve Protokoller (GeoRSS / KML / GeoJSON / GML)

GeoWeb 2.0 nedir? Microsoft Virtual Earth Google Maps Yahoo Maps GeoWeb 2.0 nedir? NASA World Wind Google Earth

GeoWeb 2.0 nedir? Microsoft Virtual Earth 3D CitySurf (TR) GeoWeb 2.0 nedir? İnovatif Yaklaşımlar Google Maps - 2.5D Google Street View

GeoWeb 2.0 nedir? İnovatif Yaklaşımlar MS VE Bird s Eye View Google Street View GeoWeb 2.0 nedir? Kısa Bir Ara Video Arası

GeoWeb 2.0 nedir? İnovatif Yaklaşımlar Kütüphane Otomasyonu 3D Geo-Game GeoWeb 2.0 nedir? İnovatif Yaklaşımlar Çizimler Kat Planları Krokiler

GeoWeb 2.0 nedir? Ortak Harita Üretimi / Open Street Map Open Street Map Open Street Map www.openstreetmap.org GeoWeb 2.0 nedir? Ortak Harita Üretimi / Google Map Maker

GeoWeb 2.0 nedir? Coğrafi Etiketleme (Geotagging) Flickr Google Maps - Panoramio GeoWeb 2.0 nedir? Mashups (Melez Uygulamalar) Mashup Örnek - 1 Mashup Örnek - 2 Mashup Örnek - 3 Mashup Örnek - 4

GeoWeb 2.0 nedir? Mashups (Melez Uygulamalar) Mashup Örnek - 5 GeoWeb 2.0 nedir? Standart Veri Formatları ve Protokoller GeoRSS GeoJSON KML (Keyhole Markup Language) GML (Geography Markup Language)

GeoWeb 2.0 nedir? Açık Kaynak Yaklaşımlar OpenLayers

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? Dökümantasyon Bol Örnek Referans Kütüphanesi Sunumlar ve Videolar http://code.google.com/apis/maps/ Neden Google Maps? Topluluk Desteği 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

Neden Google Maps? Açık Kaynak Genişleme Paketleri MarkerManager DragZoomControl LabeledMarker ExtMapTypeControl ExtInfoWindow MapIconMaker MarkerTracker http://code.google.com/p/gmaps-utility-library/ Neden Google Maps? Hatırlatma! Sadece JavaScript le yazmak zorunda değilsiniz! Google Maps API For Flash/Flex Google Static Maps API Google Mapplets API Google Earth API (JS)

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 Nerede kullanılır? <!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">... JavaScript in çalıştığı kısım document.write(merhaba Dünya!');... </script> <noscript> <p>tarayıcınız JS desteklemiyor ya da JS kapalı!</p> </noscript> </body> </html> Google Maps için Javascript Nerede kullanılır? <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.

Google Maps için Javascript Değişkenler 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ı. Google Maps için Javascript Değişken Tipleri 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

Google Maps için Javascript Objelere Erişim 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 Google Maps için Javascript Operatörler +, -, *, /, % (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";

Google Maps için Javascript Koşullar ve Değerlendirme if (koşul ya da koşullar) {... } else {... } 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 Döngüler for (ilkdeğer;koşul;artışdeğeri) {... n defa çalışacak kodlar... } 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 Döngüler while (koşul) {... } do {... } while (koşul); i = 0; while (i < 5) { alert(i); i++; } // Ekrana 0 dan 4 e kadar sayıları basacak. Google Maps için Javascript Fonksiyonlar function fonksiyonadi (p1, p2, p3) { // p : parametre... Çalışacak kodlar... return geridonecekdeger; // bu kısım opsiyonel } 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 Diğer Elemanlar // 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 : \, \, \\ Google Maps için Javascript AJAX Nedir? 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

Google Maps için Javascript Geliştirme Araçları Notepad++ / Aptana (JS ve HTML için) Firefox ve Firebug (Debug için) 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 Anahtar Oluşturmak http://localhost/ için anahtar : ABQIBBBBKs6JN4Ceutf3XhUIepWEYhT 5yXp_ZAY7_ufC2CFXhHIE7NvwkxR8 9Dk5MuQNqhYIpMNRuj4Q6Oeolw 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> Google Maps APIsini ekler Tarayıcı uyumunu kontrol eder Harita objesini oluşturur Haritayı Başlatır/Bitirir Haritanın Gösterileceği Kısım

Google Maps API Temeller Devam ediyoruz : http://code.google.com/apis/maps/doc umentation/index.html 2. Adım : Haritayı özelleştirmeye başlıyoruz. Google Maps API Temeller HTML Özelleştirme <div id="map" style="width:500px;height:300px"></div> HTML Resim ve İmajlar CSS JavaScript Ref-0

Google Maps API Temeller Kontroller GMapTypeControl GHierarchicalMapTypeControl GSmallZoomControl GSmallMapControl GScaleControl GOverviewMapControl GLargeMapControl Kullanımı : map.addcontrol(new GSmallZoomControl()); Ref-1 Google Maps API Temeller Harita Tipleri ve Erişimleri G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP G_PHYSICAL_MAP Kullanımı : map.setmaptype(g_hybrid_map); Ref-2

Google Maps API Temeller Koordinatlar ve Nokta Oluşturmak http://maps.google.com/?ie=utf8&ll=37.926868,34.936523&spn =14.335951,26.806641&z=6 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); Haritayı oluşturulan noktaya ortalar. Ref-3 Google Maps API Temeller Harita ile Kontroller Harici Etkileşim Haritaya 1 seviye yakınlaştırır. map.zoomin(); map.zoomout(); map.setzoom(9); map.panto(ilknokta); map.setcenter(ilknokta, 13); 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> Ref-4

Google Maps API Temeller Olaylar (Events) ve Etkileşim Oluşturma Dinlenmeye başlayan obje Olay gerçekleştiğinde çalışacak foksiyon GEvent.addListener(map, "click", function(overlay,latlng) { alert("haritaya Tıklandı! - Koordinatlar : " + latlng); }); Map Objesinin Olaylarından Birkaçı Ref-5 - click(overlay:goverlay, latlng:glatlng, overlaylatlng:glatlng) - dblclick(overlay:goverlay, latlng:glatlng) - movestart() - move() - moveend() - drag() Olayı kaldırmak için : GEvent.removeListener (olayobjesi); Olay Örneği (Google Doc.) Google Maps API Temeller AJAX ve Asekron Veri Çekmek var request = GXmlHttp.create(); request.open("get", koordinatlar.xml", true); request.onreadystatechange = function() { if (request.readystate == 4) { alert(request.responsetext); } } request.send(null); GDownloadUrl("koordinatlar.xml", function(data, responsecode) { alert(data); }); * Bu sadece GET metodu için kullanılır 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

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 vs Statik 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. Örnek bir tile katmanı Seviye 4

Dinamik ve Statik Veri Gösterme Dinamik Veriler - GOverlay GOverlay Arayüzü (Interface) GMarker GPolyline GPolygon GTileLayerOverlay GInfoWindow Dinamik ve Statik Veri Gösterme Dinamik Veriler - Nokta var lat = 37.926868; var lng = 34.936523; var ilknokta = new GLatLng(lat, lng); var balon = new GMarker(ilkNokta); map.addoverlay(balon); Ref-6

Dinamik ve Statik Veri Gösterme Dinamik Veriler - Çizgi 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); GPolyline(latlngs:GLatLng[], color?:string, weight?:number, opacity?:number, opts?:gpolylineoptions) Ref-7 Dinamik ve Statik Veri Gösterme Dinamik Veriler - Poligon 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); GPolygon(latlngs:GLatLng[], strokecolor?:string, strokeweight?:number, strokeopacity?:number, fillcolor?:number, fillopacity?:number, opts?:gpolygonoptions) Ref-8

Dinamik ve Statik Veri Gösterme Dinamik Veri Silme map.removeoverlay(balon); map.removeoverlay(cizgi); map.removeoverlay(poligon); ya da map.clearoverlays(); Tüm noktaları haritadan siler. Dikkat : Katmanlar teker teker silinecek ise katman objelerinin global ya da erişilebilir durumda olması gerekmektedir! Ref-9 Dinamik ve Statik Veri Gösterme Dinamik Veriye Bilgi Ekleme 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>'); }); Ref-10 & Ref-11

Dinamik ve Statik Veri Gösterme Statik Veriler Tile Katmanı 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); 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) Adres Sorgusu 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); } } ); } Geocoder ı tanımlıyoruz Adres sorgusunu textbox tan alıyoruz Adresi sorguluyoruz Bulunan noktayı haritaya ekliyoruz Ref-13 (gmap2.html) 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 Genişleme Paketlerine Genel Bakış http://code.google.com/p/gmaps-utility-library/ 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) Neden JS Frameworkler? 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

JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Yahoo User Interface (YUI) http://developer.yahoo.com/yui/ Yahoo tarafından geliştiriliyor (BSD lisans) The DOJO Toolkit (DOJO) http://dojotoolkit.org/ Açık Kaynak Topluluk tarafından geliştiriliyor JavaScript Frameworkler ile entegrasyon (YUI/DOJO) Örnekler YUI Entegrasyon Örnek 1 YUI Entegrasyon Örnek 2 DOJO Entegrasyon Örnek 1

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 gis@dincer.tc http://groups.google.com/group/cbs-turkiye