ajax&geoweb c

48
ชัยภัทร เนื่องคํามา 1 AJAX นาย ชัยภัทร เนื่องคํามา email : [email protected] website: http://emap.wordpress.com

Upload: thailand

Post on 19-Jan-2015

1.560 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 1

AJAXนาย ชัยภัทร เนื่องคํามา

email : [email protected]: http://emap.wordpress.com

Page 2: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 2

Asynchronous JavaScript And XMLAJAX is an acronym for Asynchronous JavaScript And XML.

AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.

AJAX uses JavaScript to send and receive data between a web browser and a web server.

The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.

Page 3: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 3

AJAX Is Based On Open StandardsAJAX is based on the following open standards:

• JavaScript

• XML

• HTML

• CSS

The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)

Page 4: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 4

Page 5: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 5

Page 6: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 6

Page 7: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 7

AJAX Is About Better Internet ApplicationsWeb applications have many benefits over desktop applications:

• they can reach a larger audience

• they are easier to install and support

• they are easier to develop

However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.

With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).

Page 8: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 8

AJAX Uses XML And HTTP RequestsA traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.

Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

Page 9: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 9

AJAX Uses XML And HTTP RequestsWith AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

You will learn more about how this is done in the next chapters of this tutorial.

Page 10: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 10

PHP and AJAXThere is no such thing as an AJAX server.

AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

AJAX is a web browser technology independent of web server software.

However, in this tutorial we will focus more on actual examples running on a PHP server, and less on how AJAX works.

Page 11: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 11

The XMLHttpRequestThe XMLHttpRequest object is the key to AJAX.

Creating An XMLHttpRequest Object

Different browsers use different methods to create an XMLHttpRequest object.

Internet Explorer uses an ActiveXObject.

Other browsers uses a built in JavaScript object called XMLHttpRequest

Page 12: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 12

The XMLHttpRequestvar XMLHttp=null

if (window.XMLHttpRequest){

XMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject){

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

Page 13: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 13

function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}

Page 14: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 14

AJAX&Web Mapping Application

Page 15: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 15

AJAX & Web Mapping ApplicationAJAX ถูกนํามาใชในการพัฒนาการทํางานและการรับสงขอมูลในสวนของ

Web Mapping Application ซึ่งทํางานบนฝงลูกขาย โดย Web Mapping Application แบบใหมจะเพิ่มความสามารถในการโตตอบกับผูใช และมีการรับสงขอมลูเชิงบรรยายและขอมูลเวกเตอรกราฟกในรูปแบบ XML base ดวย AJAX

AJAX ถูกนําไปใชอยางแพรหลายมาก โดยเฉพาะ Mushup Application ไดแก Google Map, Google Earth API, Yahoo Map API และอื่นๆ

Page 16: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 16

Spatial EncodingAJAX สามารถทํางานรวมกับขอมูล XML ในการรับสงขอมูลระหวางแมขาย

และลูกขายไดเปนอยางดีดังนั้น จึงมีการพัฒนารูปแบบการเขารหัสขอมูลภูมสิารสนเทศและขอมูลเชิงพื้นที่ในลักษณะ XML Base มากมายเชน KML, GeoRSS, GML เปนตน

Page 17: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 17

Spatial EncodingAJAX สามารถทํางานรวมกับขอมูล XML ในการรับสงขอมูลระหวางแมขาย

และลูกขายไดเปนอยางดีดังนั้น จึงมีการพัฒนารูปแบบการเขารหัสขอมูลภูมสิารสนเทศและขอมูลเชิงพื้นที่ในลักษณะ XML Base มากมายเชน KML, GeoRSS, GML เปนตน

Page 18: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 18

KML

KML เปนรูปแบบการจัดเก็บขอมูลเชิงพื้นที่ที่พัฒนามาจากระบบบริการแผนที่ของ Google ปจจุบัน KML เปนมาตรฐานการแลกเปลี่ยนขอมลูหนึ่งของ OGC โดยมีรูปแบบการจัดเก็บขอมลูแบบ XML มีความยืดหยุนสามารถเชื่อมโยงกับระบบสารสนเทศตางๆไดมากมาย ใชระบบพิกัดภูมิศาสตรคือ EPSG 4326 World Geodetic Reference System KML มี MIMETYPE คือ application/vnd.google-earth.kml+xml นอกจากนี้ยังมีรูปแบบบีบอัดในลักษณะของไบนารีคือ KMZ อีกดวย

Page 19: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 19

KML

Page 20: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 20

GeoJson

GeoJson เปนรูปแบบการจัดเก็บขอมลูเชิงพื้นที่ที่กําลังพัฒนา โดยเนนไปที่การรับสงขอมลูผานอินเตอรเน็ตโดยใชรูปแบบของ Json ซึ่งทําใหงายในการเขารหัสและการแปล โดยนิยมนํามาใชทํางานรวมกับเทคนิค AJAX

Page 21: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 21

GeoRSS

GeoRSS เปนรูปแบบการจัดเก็บขอมลูเชิงพื้นที่ประเภทจุด ในรูปแบบของคาพิกัดภูมิศาสตร X,Y โดยมีการสราง TAG พิเศษสําหรับการบรรยายและการเก็บคุณสมบัติเชิงพื้นที่เสริมตอมาจากมาตรฐานของ RSS 2.0 โดยมีการนําไปใชในระบบ feeding ขาวสารหรือขอมูลที่มีการเปลี่ยนแปลง โดยขอดีคือใชงานกับ feed reader ได ถาตองการแสดงผลในรูปแบบ mapping ก็สามารถใชงาน mushup อยาง google map ได โดย API รองรับ Georss อยูแลว

Page 22: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 22

Demo AJAX&Geoweb Application

Page 23: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 23

Business

Page 24: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 24

News / Event

Page 25: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 25

News / Event

Page 26: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 26

Real estate

Page 27: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 27VDO Tracking

Page 28: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 28

whereyougonnabe

Page 29: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 29

Barbond

Page 30: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 30

Spot Information

Page 31: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 31

Social Network

Page 32: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 32

Photo Sharing

Page 33: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 33

MapServer Application

Page 34: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 34

Geoweb Development Framework

Page 35: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 35

GeoDjango

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. GeoDjango is an official branch of Django that intends to be a world-class geographic web framework. GeoDjango is BSD-licensed and cross-platform (Linux, Windows, Mac OS X, and Solaris platforms) and supports the spatial capabilities of the PostGIS, Oracle, and MySQL databases

Page 36: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 36

GeoDjango

GeoDjango speaks the languages of the geographic web and supports KML, GML, WKT, WKB, GeoRSS, and GeoJSON formats. Web maps may be created using the APIs for Google Maps and OpenLayers. Moreover, the built-in geographic admin supports the manipulation and visualization of spatial data. Databrowsedynamically creates a rich, browsable web site by introspecting your models.

http://geodjango.org/docs/model-api.html

Page 37: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 37

Page 38: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 38

Open Geo-Stack

An open geo-stack offers a flexible and feature filled solution for your web mapping needs. Store your data with PostGIS, set up GeoServer to publish it, and develop an OpenLayers based client for the browser. This tutorial will focus on these three core components of an open source geo-stack and will also cover architectures that cross the proprietary/open source divide.

Page 39: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 39

MapStrack

Mapstraction floats on top of niine APIs: Microsoft VE, Google, Yahoo!, MultiMap, Poly9 FreeEarth, Map24, MapQuest, and OpenStreetMap. Each one has different features and qualities of aerial and mapping data, and your use may depend on area of interest (who has the best aerial imagery in Bangalore?) or features (can I plot GeoRSS?). With Mapstraction you can make these decisions on the fly and not get locked into one specific API. We’ll tour adding simple maps, pins, and geocoding. Plotting GeoRSS and switching APIs on the fly. Some JavaScript knowledge is preferable but not an absolute necessity.

Page 40: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 40

Page 41: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 41

OpenGWT

Google Web Toolkit (GWT) is an open source Java software development framework that allows web developers to create Ajax applications in Java. It is licensed under the Apache License version 2.0.[1]

GWT emphasizes reusable, efficient solutions to recurring Ajax challenges, namely asynchronous remote procedure calls, history management, bookmarking, and cross-browser portability.

Page 42: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 42

OpenGWT

GWT - OpenLayers plugin is an open source project implemented by Erdem Gunay. Although it does not support all the OpenLayers classes yet, it is in a good shape to use main features including- Map, Marker, Icon, LonLat, Size, Pixel, Bounds etc.- Layers (WMS, Google, Vector, Markers) - Controls (DrawFeature, LayerSwitcher, MousePosition, MouseToolbar, PanZoomBar,Scale)- Handlers (Point, Path, Polygon) - Popups (Popup, Anchored, AnchoredBubble) Events

Page 43: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 43

OpenGWT

http://sourceforge.net/projects/gwt-openlayers

Page 44: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 44

Ruby (Cartographer Plugin)Allows you to plop Google Maps down into your Rails app without knowing a

lick of ECMAScript Javascript.

Get a Google Maps API key and tell it to Cartographer

add <%= gmaps_header %> to your layout

In controller, such as:

@map = Map.new(:name => ‘mymap’, :width => 300, :center => Point.new(-110, 33))

In view, such as: <%= @map.to_html %>

http://wiki.rubyonrails.org/rails/pages/Cartographer+Plugin

Page 45: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 45

Ruby (Geokit)Geokit is a Rails plugin for building location-based apps. It provides geocoding,

location finders, and distance calculation in one cohesive package. If you have any tables with latitude/longitude columns in your database, or if you every wanted to easily query for "all the stores within a 50 mile radius," then GeoKit is for you.

http://geokit.rubyforge.org/

Page 46: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 46

Ruby

Page 47: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 47

Geoweb Resource- Slash GEO

- GIS Development

- Emap

Page 48: Ajax&Geoweb C

ชยัภัทร เนื่องคํามา 48

ขอบคุณครับ