• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Y Map Mashup Camp
 

Y Map Mashup Camp

on

  • 2,619 views

2009.1.31 야후 매쉬업 캠프

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

Statistics

Views

Total Views
2,619
Views on SlideShare
2,540
Embed Views
79

Actions

Likes
0
Downloads
15
Comments
0

9 Embeds 79

http://mashupkorea.org 32
http://lovesera.com 22
http://mashupkorea.tistory.com 11
http://www.slideshare.net 4
http://mashup.hosting.paran.com 3
http://mashup.or.kr 3
http://lovesera.tistory.com 2
http://www.mashup.or.kr 1
https://www.facebook.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Y Map Mashup Camp Y Map Mashup Camp Presentation Transcript

    • 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 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)
    • What is Y!Map API?  세계 지도  위성지도  손쉽고 다양한 내/외부API Satellite Map  세계 표준 좌표 계 (WGS84 경위도)  다양한 브라우저 지원 (FireFox, IE, Opera9, Safari3)  오랜 사용자 지원으로 인한 안정성 및 세계적 커뮤니티 World Map Easy to use Yahoo! - published (Slide 3)
    • What is Y!Geo API?  버스/지하철 정류장 검색 API  좌표 계 변환 API  POI 검색 API  주소 ↔ 좌표 변환 API (Geocoder)  다양한 출력 방식 (Json, XML, PHP serialize, Json callback)  UTF-8 표준 REST 인코딩 포멧 Yahoo! - published (Slide 4)
    • 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)
    • 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)
    • Feature description YMarker YPolyline Geo calculator Customizable feature YEvent Wizard Yahoo! - published (Slide 7)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • Exercise ▐ POI 검색 API 사용하기 Poisearch.html을 참고하여 지도API를 넣은 후 검색 버튼과 poisearch api를 연동하여 검색후 결과를 Ymarker를 통해 지도위에 표현해 보자 참고 url : http://kr.open.gugi.yahoo.com/document/poisearch.php Yahoo! - published (Slide 17)
    • ▐ Q and A Yahoo! - published (Slide 18)