Google Maps ve Kurumsal Mashup Geliştirme

(1)

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

(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

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

(3)

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 Dinamik 2B ve 3B haritalar Tekil web siteleri Servis tabanlı uygulamalar

(Mashups)

Özel Protokoller (örn:AXL) Standart Protokoller (örn:

W*S, SOAP/XML, REST) Özel Formatlar (örn:SHP,

TAB)

Standart Formatlar ( örn:

GML, KML, GeoJSON) Tekil Mekansal Sunucular Mekansal Veri Portalları

(4)

GeoWeb 1.0 vs GeoWeb 2.0

Geo GeoWeb 2.0Web 2.0

Geo GeoWeb 1.0Web 1.0

GeoWeb

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)

(5)

GeoWeb 2.0 nedir?

Microsoft Virtual Earth

Google Maps

Yahoo Maps

GeoWeb 2.0 nedir?

NASA World Wind

Google Earth

(6)

GeoWeb 2.0 nedir?

CitySurf (TR)

Microsoft Virtual Earth – 3D

GeoWeb 2.0 nedir?

İnovatif Yaklaşımlar

Google Street View

Google Maps - 2.5D

(7)

GeoWeb 2.0 nedir?

Google Street View

İnovatif Yaklaşımlar

MS VE – Bird’s Eye View

GeoWeb 2.0 nedir?

Kısa Bir Ara

Video Arası

(8)

GeoWeb 2.0 nedir?

İnovatif Yaklaşımlar

3D Geo-Game

Kütüphane Otomasyonu

GeoWeb 2.0 nedir?

İnovatif Yaklaşımlar

Kat Planları

Krokiler Çizimler

(9)

GeoWeb 2.0 nedir?

Open Street Map www.openstreetmap.org

Open Street Map Ortak Harita Üretimi / Open Street Map

GeoWeb 2.0 nedir?

Ortak Harita Üretimi / Google Map Maker

(10)

GeoWeb 2.0 nedir?

Coğrafi Etiketleme (Geotagging)

Google Maps - Panoramio

Flickr

GeoWeb 2.0 nedir?

Mashups (Melez Uygulamalar)

Mashup Örnek - 1 Mashup Örnek - 2

Mashup Örnek - 3 Mashup Örnek - 4

(11)

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)

(12)

GeoWeb 2.0 nedir?

OpenLayers Açık Kaynak Yaklaşımlar

(13)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Dinamik ve Statik Veri Gösterme

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

(14)

Neden Google Maps?

Detaylı Haritalar ve Görüntüler

Neden Google Maps?

Adres Bulma (Geocoding)

Rev

ers

e G

eoc

odi

ng!

(15)

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

(16)

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!

(17)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Google Maps için JavaScript

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)

(18)

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>

...

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

...

</script>

<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

<!–

...

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?

(19)

Google Maps için Javascript

a = 50; // global değişken varisim = '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

(20)

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

(21)

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.

(22)

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”));

(23)

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?

(24)

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

Soru ve Cevaplar

(25)

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

(26)

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

(27)

Google Maps API Temeller

http://localhost/ için anahtar :

ABQIBBBBKs6JN4Ceutf3XhUIepWEYhT 5yXp_ZAY7_ufC2CFXhHIE7NvwkxR8 9Dk5MuQNqhYIpMNRuj4Q6Oeolw

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

<head>

<title>Google Maps JavaScript API Example</title>

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

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

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

} } //]]>

</script>

</head>

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

(28)

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

Ref-0

HTML

Resim ve İmajlar

CSS

JavaScript

(29)

Google Maps API Temeller

Kontroller

Ref-1

GLargeMapControl

GSmallMapControl

GSmallZoomControl

GScaleControl

GMapTypeControl

GHierarchicalMapTypeControl

GOverviewMapControl

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

Google Maps API Temeller

Harita 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);

(30)

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>

(31)

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

(32)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Dinamik ve Statik Veri Gösterme

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

(33)

Dinamik ve Statik Veri Gösterme

Dinamik Veriler - GOverlay

GOverlay Arayüzü (Interface)

GMarker GPolyline

GInfoWindow GTileLayerOverlay

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

(34)

Dinamik ve Statik Veri Gösterme

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)

Dinamik ve Statik Veri Gösterme

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)

(35)

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

(36)

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ı

(37)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Geocoding (Adres bulma)

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

(38)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Genişleme Paketleri

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

(39)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

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?

(40)

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

(41)

Sunum İçeriği

GeoWeb 2.0 nedir?

Neden Google Maps?

Soru ve Cevaplar

Konu ile ilgili Sorular

(42)