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
60
Embed
INET-TR 2008 - Google Maps ve Kurumsal Mashup Geliştirme - 2. Kısım (2/2)
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.com
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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>
/* .... */ 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/
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);
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)