Y Map Mashup Camp

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


What is Y!Geo API?
 버스/지하철 정류장 검색 API

 좌표 계 변환 API

 POI 검색 API

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

 다양한 출력 방식 (Json, XML, PHP serialize, Json callback)

 UTF-8 표준 REST 인코딩 포멧


Mash-up examples
Yahoo map + Virtual reality mash up

http://www.oggle.ca/

Yahoo map + geography mash up Yahoo map + Memory mash up


Mash-up examples
Yahoo map + VML Drawing technique

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

http://www.townkings.com

Feature description

YMarker

YPolyline

Geo calculator

Customizable feature YEvent
Wizard

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;);
}
}


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

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>


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;


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

1. 기본 HTML page 만들기

참고 url : Reverser Geocoder http://kr.open.gugi.yahoo.com/document/geocooder.php


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>


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;
{
map.addTypeControl();
map.addZoomLong();
map.addPanControl();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter('seoul',9);
}
window.onload = StartYMap;
</head>


3. 이벤트 핸들러 지정하기
{
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);
}



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;);
}
}


Exercise

▐ POI 검색 API 사용하기

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

검색 버튼과 poisearch api를 연동하여 검색후

결과를 Ymarker를 통해 지도위에 표현해 보자

참고 url : http://kr.open.gugi.yahoo.com/document/poisearch.php

▐ Q and A


Y Map Mashup Camp

Recommended

Recommended

More Related Content

Similar to Y Map Mashup Camp

Similar to Y Map Mashup Camp (20)

More from Jinho Jung

More from Jinho Jung (20)

Recently uploaded

Recently uploaded (20)

Y Map Mashup Camp