77
Mr. Chaipat nengcomma The Geo Mush up and Application Chaipat Nengcomma http://emap.wordpress.com/

Map

Embed Size (px)

Citation preview

Page 1: Map

Mr. Chaipat nengcomma

The Geo Mush up and ApplicationChaipat Nengcomma

http://emap.wordpress.com/

Page 2: Map

Mr. Chaipat nengcomma

Component

Street View

Navigation

Geocode

Data Integration

Spatial Encoding

Mushup Map API

Page 3: Map

Mr. Chaipat nengcomma

Map Service API

Page 4: Map

Mr. Chaipat nengcomma

Google MapGoogle มีทั้งรูปแบบ google map API และ google earth API บริการ

ขอมลูทัง้ภาพถายดาวเทียมรายละเอียดสูง,เสนทางถนน,เสนทางรถไฟฟา,landmark, ทิศทางของถนน,รูปภาพ,ความสูงภูมิประเทศ

Page 5: Map

Mr. Chaipat nengcomma

Page 6: Map

Mr. Chaipat nengcomma

Google Earth APIGoogle Earth API เจาตัวนี้ก็คอื Google Earth ที่ embed ตัวใหสามารถ

ทํางานไดบน web browser ทั่วไปเชน IE, FireFox ในลักษณะ 3D Web Application โดยอาศัย engine ที่เปน Plug-in ของ Google ในการชวยแสดงผล นอกจากนี้นักพัฒนายังสามารถใชภาษา Javascript ในการควบคุมการทํางานของ Google Earth และสามารถ input ขอมลูเชิงพื้นที่ในรูปแบบ KML ได สําหรับที่ทานสนใจจะนําไปใชงานก็งาย เพียงแคติดตั้ง plug-in ลงไปในเครื่องจากนั้นก็เรียกใชงานไดเลยครบั แตขอจํากัดของ Google earth on web ตัวนี้ยังมี เชน layers หลายๆตัวยังไมเทากับ google earth stand alone ที่เรา ใชงานกัน ซึ่งสามารถ Download plug-in ไดที่ http://code.google.com/apis/earth/

Page 7: Map

Mr. Chaipat nengcomma

Google &GeoEyeGeoEye-1 เปนดาวเทียมรายละเอียดสูงที่เกิดจากความรวมมือในการ

ลงทุนของ NGA(National Geospatial-Intelligence Agency) และ Google โดยสองไดลงขันกันคนละครึ่ง คือประมาณ 502 ลานดอลลา ซึ่งปลอยขึน้สูอวกาศเมื่อวันที่ 6 กย. 2551 จากที่ Vandenberg Air Force Base ในรัฐ California

Page 8: Map

Mr. Chaipat nengcomma

Google &GeoEyeGeoEye-1 เปนดาวเทียมรายละเอียดสูงที่สามารถบันทึกภาพแบบ MS

ที่ความละเอียด 41 cm. ซึ่งเปนดาวเทียมประเภท commercial ทั่วไปที่จะมีการขายขอมูลและเผยแพรขอมลูผานอินเตอรเน็ต ซึ่งแนนอนวาผูใช Google Earth และ Google Map คงนาจะไดใชภาพถายดาวเทียม GeoEye-1 ในไมชานี้แนนอน แตคงไดใชขอมูลที่ความละเอียด 50 cm ตามขอกําหนดในการเผยแพรขอมลูซึ่งเกี่ยวกับความมัน่คง

ปจจุบัน GeoEye-1 โคจรที่ความสูง 423-mile บินที่ความเร็ว 4.5 ไมลตอวินาที ซึ่งไดเริ่มทําการบันทึกภาพและสงภาพกลับมายังสถานีฐานเพื่อทําการประมวลผล เมื่อเดือนที่ผานมา โดยมีการบันทึกภาพแรกที่ Kutztown University ในรัฐ Pennsylvania ซึ่งภาพที่ไดก็คมชัด ไมมีเมฆมาบดบัง

Page 9: Map

Mr. Chaipat nengcomma

Google &GeoEye

Page 10: Map

Mr. Chaipat nengcomma

Longdo MapMeta Media บริการแผนที่สัญชาติไทย ที่นาสนใจ คือมีบริการคนหา

ขอมลู สถานที่ตางๆในรูปแบบ ภาษาไทยและครอบคลุมเกือบทั่วประเทศดวยครับ และยังสามารถ print แผนที่ในรูปแบบ A4 ไดอีกดวย นอกจากนี้ยังทํางานรวมกับระบบของ google ไดอกีดวยครับ

Page 11: Map

Mr. Chaipat nengcomma

Page 12: Map

Mr. Chaipat nengcomma

Page 13: Map

Mr. Chaipat nengcomma

Microsoft Virtual Earthขอมลูถนนอาจจะยังไมละเอียดเทาของเจาอื่น แตภาพถายดาวเทียม

รายละเอียดสูงก็นาสนใจเลยทีเดียว ที่สําคัญมี application เสริม เชน การสดงผล 3D ,การทํา routing analysis อยางงาย เปนตน

Page 14: Map

Mr. Chaipat nengcomma

Page 15: Map

Mr. Chaipat nengcomma

Page 16: Map

Mr. Chaipat nengcomma

MultimapMultimap ใหบริการขอมูลแผนที่ online ในลักษณะของ Map API โดย

นอกจากการใชงานปกติผาน web application ของ multimap แลว ผูใชยังสามารถใชงานผาน Open API ไดอีกดวยโดยการนําขอมูลแผนที่ตางๆ มา integrate กับ website ก็ทําไดงายไมยุงยาก ที่สําคัญแนวโนมในการพัฒนาก็กําลังเพิ่มขึ้นดวยครับ เนื่องจาก multimap ไดถูก Microsoft ซื้อไปและมกีารใหการสนับสนุนการวิจัยและพัฒนาอยู ซึ่งมีการแชรเทคโนโลยีกับ Microsoft Virtual Earth และ Live Search Maps

Page 17: Map

Mr. Chaipat nengcomma

Page 18: Map

Mr. Chaipat nengcomma

Google Map

Multi Map

Page 19: Map

Mr. Chaipat nengcomma

Yahoo mapYahoo! Maps APIs let you easily embed rich and interactive maps

into your web and desktop applications using your choice of platform: we provide Flash, Ajax and Map Image APIs. including Yahoo! Local listings, Traffic and Weather reports, Upcoming events and Flickr Photos. Our APIs support the GeoRSS standard

Page 20: Map

Mr. Chaipat nengcomma

Navigation

Page 21: Map

Mr. Chaipat nengcomma

Google Direction

Page 22: Map

Mr. Chaipat nengcomma

- Google Direction , Google Geocode and Google Map for Traveling planning.

- Using TSP Model

- JavaScript Open source library

- @ http://gebweb.net/optimap

Navigation: Optimap (Google Direction+TSP)

Page 23: Map

Mr. Chaipat nengcomma

Navigation: Optimap (Google Direction+TSP)

Page 24: Map

Mr. Chaipat nengcomma

Navigation: Optimap (Google Direction+TSP)

http://gebweb.net/optimap

Page 25: Map

Mr. Chaipat nengcomma

Geocode

Page 26: Map

Mr. Chaipat nengcomma

Geocoding is the process of assigning geographic identifiers (e.g., codes or geographic coordinates expressed as latitude-longitude) to map features and other data records, such as street addresses. Media can also be geocoded, for example where a picture was taken, IP addresses, and anything that has a geographic component. With geographic coordinates the features can be mapped and entered into Geographic Information Systems.

Geocode

Page 27: Map

Mr. Chaipat nengcomma

Yahoo GeocodeThe Geocoding Web Service allows you to find the specific latitude and

longitude for an address. You can use this service to geocode your points in advance or forego it altogether with built-in geocoding in our AJAX and Flash APIs.

Request URL

http://local.yahooapis.com/MapsService/V1/geocode?appid=YD-9G7bey8_JXxQP6rxl.fBFGgCdNjoDMACQA--&street=701+First+Ave&city=Sunnyvale&state=CA

Page 28: Map

Mr. Chaipat nengcomma

Yahoo Geocode

Page 29: Map

Mr. Chaipat nengcomma

Google Geocode

Page 30: Map

Mr. Chaipat nengcomma

Google Geocodefunction showAddress(address) {

if (geocoder) {

geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13);

var marker = new GMarker(point);

map.addOverlay(marker);

marker.openInfoWindowHtml(address);

} } ); } }

Page 31: Map

Mr. Chaipat nengcomma

Longdo

Page 32: Map

Mr. Chaipat nengcomma

Longdo

ThaiGeocode

Page 33: Map

Mr. Chaipat nengcomma

Street View (Panorama) Application

Page 34: Map

Mr. Chaipat nengcomma

Street View

Page 35: Map

Mr. Chaipat nengcomma

City8.com

Street View

Map Viewer

Advertise

Page 36: Map

Mr. Chaipat nengcomma

Page 37: Map

Mr. Chaipat nengcomma

EveryScape.com

Page 38: Map

Mr. Chaipat nengcomma

EveryScape.com

Page 39: Map

Mr. Chaipat nengcomma

Google Street view

Page 40: Map

Mr. Chaipat nengcomma

Google Street View API<script type=”text/javascript”>

function initialize() {

var myPano = new GStreetviewPanorama(document.getElementById(”pano”));

var myway = new GLatLng(42.345573,-71.098326);

myPOV = {yaw:370.64659986187695,pitch:-20};

myPano.setLocationAndPOV(myway, myPOV);

GEvent.addListener(myPano, “error”, handleNoFlash);

}

function handleNoFlash(errorCode) {

if (errorCode == 603) {

alert(”Error: Flash doesn’t appear to be supported by your browser”);

return;

}

}

</script>

Page 41: Map

Mr. Chaipat nengcomma

Google Street View API

Page 42: Map

Mr. Chaipat nengcomma

Mapjack

Page 43: Map

Mr. Chaipat nengcomma

Social Network

Page 44: Map

Mr. Chaipat nengcomma

ขอมลูเชิงพื้นที่ ซึ่งเกี่ยวของกับขอมลูสําหรับการใชชีวิตประจําวัน จึงมีการนําเอาขอมลูแผนที่จาก Mapping API มาใชรวมกับเว็บไชตบริการประเภทเครื่อขายสังคม และใชในการตอบปญหาที่เกี่ยวของกับขอมลูตําแหนง เชน คนหาสถานที่, คนหาเสนทาง, การเชื่อมโยงกิจกรรมของสมาชิกกับสถานที่, การวางแผนการทองเที่ยว เปนตน

Social Network

Page 45: Map

Mr. Chaipat nengcomma

Twittervision

http://username:[email protected]/account/update_location.xml?location=bangkok,+thailand

Page 46: Map

Mr. Chaipat nengcomma

whereyougonnabe

Page 47: Map

Mr. Chaipat nengcomma

Heat Map

HeatMap API+Map API = where is hot in CA on Saturday Night?

Page 48: Map

Mr. Chaipat nengcomma

Barbond

Page 49: Map

Mr. Chaipat nengcomma

Social Network

Page 50: Map

Mr. Chaipat nengcomma

Social Network

Page 51: Map

Mr. Chaipat nengcomma

Photo Sharing

Page 52: Map

Mr. Chaipat nengcomma

Development

Page 53: Map

Mr. Chaipat nengcomma

Integrate Spatial Data

Emap Demo

Page 54: Map

Mr. Chaipat nengcomma

Integrate Spatial Data

Emap Demo

Page 55: Map

Mr. Chaipat nengcomma

Integrate Spatial Data

Page 56: Map

Mr. Chaipat nengcomma

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 57: Map

Mr. Chaipat nengcomma

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 58: Map

Mr. Chaipat nengcomma

Page 59: Map

Mr. Chaipat nengcomma

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 60: Map

Mr. Chaipat nengcomma

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 61: Map

Mr. Chaipat nengcomma

Page 62: Map

Mr. Chaipat nengcomma

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 63: Map

Mr. Chaipat nengcomma

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 64: Map

Mr. Chaipat nengcomma

OpenGWT

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

Page 65: Map

Mr. Chaipat nengcomma

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 66: Map

Mr. Chaipat nengcomma

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 67: Map

Mr. Chaipat nengcomma

Ruby

Page 68: Map

Mr. Chaipat nengcomma

Sample Application

Page 69: Map

Mr. Chaipat nengcomma

Business

Page 70: Map

Mr. Chaipat nengcomma

News / Event

Page 71: Map

Mr. Chaipat nengcomma

Real estate

Page 72: Map

Mr. Chaipat nengcommaVDO Tracking

Page 73: Map

Mr. Chaipat nengcomma

VDO Tracking

Page 74: Map

Mr. Chaipat nengcomma

Geopress

Page 75: Map

Mr. Chaipat nengcomma

Crime Mapweb application ที่มีการเก็บขอมูลการเกิดอาชญากรรมในที่ตางๆ โดย

ขอมลูกม็าจากหนังสือพิมพ หรือขาวจากสถานนี้โทรทัศน และก็นําเสนอในรูปแบบของรายงานการเกิดอาชญากรรม สถิติ ตลอดจนการวิเคราะหแนวโนมการเกิด ทําใหผูคนที่อยูอาศัยในทองที่ตางๆเกิดความตื่นตัวในการเฝาระวัง และปกปองตัวเอง

chicago.everyblock.com MyNeighbourhood

Page 76: Map

Mr. Chaipat nengcomma

Health

Page 77: Map

Mr. Chaipat nengcomma

Spot Information