y map mashup camp

YAHOO! Maps API 3.8

Introduction

Y!KR maps engineering

2009 Jan

Yahoo! - published (Slide 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!!


What is Y!Map API?

Satellite Map

World Map

Easy to use

세계 지도

위성지도

손쉽고 다양한 내/외부API

세계 표준 좌표 계 (WGS84 경위도)

다양한 브라우저 지원 (FireFox, IE, Opera9, Safari3)

오랜 사용자 지원으로 인한 안정성 및 세계적 커뮤니티


What is Y!Geo API?

버스/지하철 정류장 검색 API

좌표 계 변환 API

POI 검색 API

주소 ↔ 좌표 변환 API (Geocoder)

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

UTF-8 표준 REST 인코딩 포멧


Mash-up examples

http://www.oggle.ca/

Yahoo map + Virtual reality mash up

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


Mash-up examples

http://www.9-interactive.com/

Yahoo map + VML Drawing technique

Yahoo map + people connection

http://www.townkings.com


Feature description

YPolyline

Geo calculator

Customizable feature

YMarker

YEvent

Wizard


Using proxy and Json Call-Back

▐ 외부의 데이터를 다루기 위한 “JSON call back”

function mycallback(response){

if(typeof response == "object"){

var hdata=response.ResultSet.head;

if(hdata.Error>0){

alert(hdata.ErrorMessage);

}else{

var location=response.ResultSet.location;

alert("this location is : "+location.country+" "+location.state+" "+location.county+" "+location.town);

}

}else{

alert("api connection error");

}

}

<script src="http://kr.open.gugi.yahoo.com/service/rgc.php?appid=YahooDemo&

latitude=37.511411132213&longitude=127.05925359288&output=json&callback=mycallback"></script>


Using proxy and Json Call-Back

▐ 외부의 데이터를 다루기 위한 “asyncRequest”

RequestAsnc();

//connection fail control

var handle_RequestAsnc_fail = function(o){

alert("async request was fail");

}

//data handle

var handle_RequestAsnc_success = function(o){

alert("success");

}

//callback define

var callback_RequestAsnc={success: handle_RequestAsnc_success,failure: handle_RequestAsnc_fail};

//origin function

function RequestAsnc(){

var requestUrl="/ymap/sendRequest.php"; //proxy page. ajax has domain restriction.

var postValue="type=xml&utf8=yes&goUrl="+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

▐ 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를 이용하여 현재 위치 표시하기

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

1. 기본 HTML page 만들기

http://kr.open.gugi.yahoo.com/document/geocooder.php




1. 기본 HTML page 만들기

<html>

<head>

<style type="text/css">

#map{

height: 400px;

width: 100%;

}

</style>

</head>

<body>

<div id="map">

<div style="position:relative;z-index:1;padding-left:80px;padding-top:9px;font-weight:bold;">

<div style="float:left;position:relative;width:120px;">현재의 위치는 : </div>

<div id="indicator" style="float:left;position:relative;width:500px;"></div>

</div>

<div style="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.1"></div>

</div>

</body>

</html>

2. 지도 API 삽입하기

<html>

<head>

<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.8&appid=YahooDemo"></script>

<style type="text/css">

#map{

height: 400px;

width: 100%;

}

</style>

<script type="text/javascript">

<!--

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="appid=YahooDemo&output=json&callback=printdata&latitude="+lat+"&longitude="+lon;

var myurl="http://kr.open.gugi.yahoo.com/service/rgc.php?"+param;

var rnd = YUtility.getRandomID();

var _id = 'rgc:'+rnd;

YUtility.dynamicSNode(_id,myurl);

}




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

function printdata(obj){

if(typeof obj=="object"){

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("indicator").innerHTML =

country+" > "+state+" > "+county+" > "+town;

}

}

}else{

alert("data handle error");

}

}


Exercise

▐POI 검색 API 사용하기

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

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

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

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

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


▐ Q and A

y map mashup camp

Education

rest yahoo published

map api reverse geocoder

geo api

yahoo maps api

api poisearch api ymarker

step tutoringy

exercisepoi api url

api wgs84 firefox