YAHOO! Maps API 3.8
       Introduction

         Y!KR maps engineering
                     2009 Jan
Agenda


▐     What is Y!Map API? (5min)
▐     What is Y!Geo API? (5min)
▐     Mash-up examples (5min)
▐     Feature descr...
What is Y!Map API?
  세계 지도

  위성지도

  손쉽고 다양한 내/외부API
                                                Satellite Map
  ...
What is Y!Geo API?
  버스/지하철 정류장 검색 API

  좌표 계 변환 API

  POI 검색 API

  주소 ↔ 좌표 변환 API (Geocoder)

  다양한 출력 방식 (Json, ...
Mash-up examples
   Yahoo map + Virtual reality mash up




   http://www.oggle.ca/

   Yahoo map + geography mash up     ...
Mash-up examples
   Yahoo map + VML Drawing technique




 http://www.9-interactive.com/
   Yahoo map + people connection
...
Feature description




                                        YMarker


                                                ...
Using proxy and Json Call-Back
▐ 외부의 데이터를 다루기 위한 “JSON call back”


     <script src=quot;http://kr.open.gugi.yahoo.com/se...
Using proxy and Json Call-Back
▐ 외부의 데이터를 다루기 위한 “asyncRequest”


     RequestAsnc();


      //connection fail control
  ...
Code examples
▐ Map initializing

   <script type=quot;text/javascriptquot; src=quot;http://kr.open.gugi.yahoo.com/Client/...
Code examples
▐ Using Mercator projections
                                (example)
                                LatLo...
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기

      1. 기본 HTML page 만들기




참고 url : Reverser Geocod...
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기

      1. 기본 HTML page 만들기

         <html>
         <h...
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기

      2. 지도 API 삽입하기
         <html>
         <head>
 ...
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기

      3. 이벤트 핸들러 지정하기
         function StartYMap()
  ...
Step by step tutoring
Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기

      4. 데이터 처리 함수 작성 하기

         function printdata(...
Exercise

▐ POI 검색 API 사용하기



                                Poisearch.html을 참고하여 지도API를 넣은 후

                         ...
▐ Q and A




Yahoo! - published (Slide 18)
Upcoming SlideShare
Loading in …5
×

Y Map Mashup Camp

1,676 views

Published on

2009.1.31 야후 매쉬업 캠프
거기 지도 API 활용 - 손경성

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,676
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Y Map Mashup Camp

  1. 1. YAHOO! Maps API 3.8 Introduction Y!KR maps engineering 2009 Jan
  2. 2. Agenda ▐ What is Y!Map API? (5min) ▐ What is Y!Geo API? (5min) ▐ Mash-up examples (5min) ▐ Feature description (10min) ▐ Using proxy and Json Call-Back (5min) ▐ Code examples (10min) ▐ Step by step tutoring (10min) ▐ Exercise (20min) ▐ Q & A (10min) ▐ Coffee break!! Yahoo! - published (Slide 2)
  3. 3. What is Y!Map API?  세계 지도  위성지도  손쉽고 다양한 내/외부API Satellite Map  세계 표준 좌표 계 (WGS84 경위도)  다양한 브라우저 지원 (FireFox, IE, Opera9, Safari3)  오랜 사용자 지원으로 인한 안정성 및 세계적 커뮤니티 World Map Easy to use Yahoo! - published (Slide 3)
  4. 4. What is Y!Geo API?  버스/지하철 정류장 검색 API  좌표 계 변환 API  POI 검색 API  주소 ↔ 좌표 변환 API (Geocoder)  다양한 출력 방식 (Json, XML, PHP serialize, Json callback)  UTF-8 표준 REST 인코딩 포멧 Yahoo! - published (Slide 4)
  5. 5. Mash-up examples Yahoo map + Virtual reality mash up http://www.oggle.ca/ Yahoo map + geography mash up Yahoo map + Memory mash up Yahoo! - published (Slide 5)
  6. 6. Mash-up examples Yahoo map + VML Drawing technique http://www.9-interactive.com/ Yahoo map + people connection http://www.townkings.com Yahoo! - published (Slide 6)
  7. 7. Feature description YMarker YPolyline Geo calculator Customizable feature YEvent Wizard Yahoo! - published (Slide 7)
  8. 8. Using proxy and Json Call-Back ▐ 외부의 데이터를 다루기 위한 “JSON call back” <script src=quot;http://kr.open.gugi.yahoo.com/service/rgc.php?appid=YahooDemo& latitude=37.511411132213&longitude=127.05925359288&output=json&callback=mycallbackquot;></script> function mycallback(response){ if(typeof response == quot;objectquot;){ var hdata=response.ResultSet.head; if(hdata.Error>0){ alert(hdata.ErrorMessage); }else{ var location=response.ResultSet.location; alert(quot;this location is : quot;+location.country+quot; quot;+location.state+quot; quot;+location.county+quot; quot;+location.town); } }else{ alert(quot;api connection errorquot;); } } Yahoo! - published (Slide 8)
  9. 9. Using proxy and Json Call-Back ▐ 외부의 데이터를 다루기 위한 “asyncRequest” RequestAsnc(); //connection fail control var handle_RequestAsnc_fail = function(o){ alert(quot;async request was failquot;); } //data handle var handle_RequestAsnc_success = function(o){ alert(quot;successquot;); } //callback define var callback_RequestAsnc={success: handle_RequestAsnc_success,failure: handle_RequestAsnc_fail}; //origin function function RequestAsnc(){ var requestUrl=quot;/ymap/sendRequest.phpquot;; //proxy page. ajax has domain restriction. var postValue=quot;type=xml&utf8=yes&goUrl=quot;+encodeURIComponent(testuri); var request = YAHOO.util.Connect.asyncRequest('POST', requestUrl, callback_RequestAsnc, postValue); } How to avoid “cross domain” policy? Make server side proxy page or apache proxy Yahoo! - published (Slide 9)
  10. 10. Code examples ▐ Map initializing <script type=quot;text/javascriptquot; src=quot;http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.8&appid=YahooDemoquot;></script> var map; function StartYMap() { // 지도 오브젝트를 생성 합니다. map = new YMap(document.getElementById('map')); // WGS84 좌표계의 경위도 좌표 오브젝트를 전달하여 위치를 지정 var center_point = new YGeoPoint(37.511411132213,127.05925359288); //YGeoPoint or YCoordPoint , ZoomLevel. zoom=1~17 map.drawZoomAndCenter(center_point,1); } window.onload = StartYMap; <body> <div id=quot;mapquot;></div> </body> Yahoo! - published (Slide 10)
  11. 11. Code examples ▐ Using Mercator projections (example) LatLon to Pixel XY from equator and date-time line var px = map.MP.ll_to_pxy(map.getCenterLatLon().Lat , map.getCenterLatLon().Lon); var x= px.x; var y=px.y; Yahoo! - published (Slide 11)
  12. 12. Step by step tutoring Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기 1. 기본 HTML page 만들기 참고 url : Reverser Geocoder http://kr.open.gugi.yahoo.com/document/geocooder.php Yahoo! - published (Slide 12)
  13. 13. Step by step tutoring Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기 1. 기본 HTML page 만들기 <html> <head> <style type=quot;text/cssquot;> #map{ height: 400px; width: 100%; } </style> </head> <body> <div id=quot;mapquot;> <div style=quot;position:relative;z-index:1;padding-left:80px;padding-top:9px;font-weight:bold;quot;> <div style=quot;float:left;position:relative;width:120px;quot;>현재의 위치는 : </div> <div id=quot;indicatorquot; style=quot;float:left;position:relative;width:500px;quot;></div> </div> <div style=quot;width:100%;height:25px;padding:4px;z-index:1;position:absolute;top:0;left:0; border:1px solid purple;background-color:blue;filter:alpha(opacity=10);opacity : 0.1quot;></div> </div> </body> </html> Yahoo! - published (Slide 13)
  14. 14. Step by step tutoring Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기 2. 지도 API 삽입하기 <html> <head> <script type=quot;text/javascriptquot; src=quot;http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.8&appid=YahooDemoquot;></script> <style type=quot;text/cssquot;> #map{ height: 400px; width: 100%; } </style> <script type=quot;text/javascriptquot;> <!-- var map; function StartYMap() { map = new YMap(document.getElementById('map')); map.addTypeControl(); map.addZoomLong(); map.addPanControl(); map.setMapType(YAHOO_MAP_REG); map.drawZoomAndCenter('seoul',9); } window.onload = StartYMap; </head> Yahoo! - published (Slide 14)
  15. 15. Step by step tutoring Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기 3. 이벤트 핸들러 지정하기 function StartYMap() { map = new YMap(document.getElementById('map')); map.addTypeControl(); map.addZoomLong(); map.addPanControl(); map.setMapType(YAHOO_MAP_REG); map.drawZoomAndCenter('seoul',9); YEvent.Capture(map, EventsList.endMapDraw, whereami); YEvent.Capture(map, EventsList.endPan, whereami); YEvent.Capture(map, EventsList.endAutoPan, whereami); } function whereami(){ //중심점 구하기 var _c=map.getCenterLatLon(); var lat=_c.Lat; var lon=_c.Lon; var param=quot;appid=YahooDemo&output=json&callback=printdata&latitude=quot;+lat+quot;&longitude=quot;+lon; var myurl=quot;http://kr.open.gugi.yahoo.com/service/rgc.php?quot;+param; var rnd = YUtility.getRandomID(); var _id = 'rgc:'+rnd; YUtility.dynamicSNode(_id,myurl); } Yahoo! - published (Slide 15)
  16. 16. Step by step tutoring Y!Map API와 Reverse Geocoder를 이용하여 현재 위치 표시하기 4. 데이터 처리 함수 작성 하기 function printdata(obj){ if(typeof obj==quot;objectquot;){ var h=obj.ResultSet.head; if(parseInt(h.Error)>0){ alert(h.ErrorMessage); }else{ var country=obj.ResultSet.location.country; var state=obj.ResultSet.location.state; var county=obj.ResultSet.location.county; var town=obj.ResultSet.location.town; if(country!=null){ document.getElementById(quot;indicatorquot;).innerHTML = country+quot; > quot;+state+quot; > quot;+county+quot; > quot;+town; } } }else{ alert(quot;data handle errorquot;); } } Yahoo! - published (Slide 16)
  17. 17. Exercise ▐ POI 검색 API 사용하기 Poisearch.html을 참고하여 지도API를 넣은 후 검색 버튼과 poisearch api를 연동하여 검색후 결과를 Ymarker를 통해 지도위에 표현해 보자 참고 url : http://kr.open.gugi.yahoo.com/document/poisearch.php Yahoo! - published (Slide 17)
  18. 18. ▐ Q and A Yahoo! - published (Slide 18)

×