topical media & game development
professional-ria-03-SansProxy.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Yahoo! Map Mashup using JSON</title>
<style type="text/css">
#mapbox{
height: 450px;
width: 750px;
}
h1, h2 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 100%;
color: #006666;
}
.inputelement {
background-color: #507565;
border: thin solid #444444;
padding: 5px;
width: 738px;
}
body {
background-color: #7C947A;
}
</style>
<script src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YahooDemo"></script>
<script type="text/javascript" src="../../scripts/jsr_class.js"></script>
<script type="text/javascript">
//<![CDATA[
var ymap;
var appid = "YahooDemo";
function createYMarker(point, number, msg) {
var marker = new YMarker(point,'id'+number);
marker.addLabel(number+1);
YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(msg) });
return marker;
}
function onLoad() {
//init map
ymap = new YMap(document.getElementById('mapbox'));
//add controls
ymap.addPanControl();
ymap.addZoomShort();
//define a point to start at
var startPoint = new YGeoPoint(37.34,-122.02);
//center and draw map at given point
ymap.drawZoomAndCenter(startPoint, 7);
}
//callback defined in request url
function getTraffic(jData) {
ymap.removeMarkersAll();
if (jData == null)
{
alert("There was a problem parsing search results.");
return;
}
for (var i =0; i < jData.ResultSet.Result.length; i++) {
var lat = jData.ResultSet.Result[i].Latitude;
var lon = jData.ResultSet.Result[i].Longitude;
var title = jData.ResultSet.Result[i].Title;
var descr = jData.ResultSet.Result[i].Description;
var severity = jData.ResultSet.Result[i].Severity;
var type = jData.ResultSet.Result[i].type;
var point = new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "<div style='width: 220px; color: black; font-size: small; margin: 0 3px 2px 3px;'>"
smart += "<b>" + title + "</b><br />" + "Type: " + type + "<br />" + "Severity: " + severity + "<br />" + descr;
document.getElementById('result').innerHTML = smart;
var myMarker = createYMarker(point, i, smart);
ymap.addOverlay(myMarker);
}
}
//callback defined in request url
function getLocal(jData) {
ymap.removeMarkersAll();
if (jData == null)
{
alert("There was a problem parsing search results.");
return;
}
for (var i =0; i < jData.ResultSet.Result.length; i++) {
var lat = jData.ResultSet.Result[i].Latitude;
var lon = jData.ResultSet.Result[i].Longitude;
var title = jData.ResultSet.Result[i].Title;
var avRat = jData.ResultSet.Result[i].Rating.AverageRating;
var totRat = jData.ResultSet.Result[i].Rating.TotalRatings;
var point = new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "<div style='width: 150px; color: black; font-size: small; margin: 0 3px 2px 3px;'>"
smart += "<b>" + title + "</b><br />" + "AverageRating: " + avRat + "<br />" + "TotalRatings: " + totRat;
var myMarker = createYMarker(point, i, smart);
ymap.addOverlay(myMarker);
//*/
}
}
//callback defined in request url
function getLocation(jData) {
ymap.removeMarkersAll();
if (jData == null)
{
alert("There was a problem parsing search results.");
return;
}
var lat = jData.ResultSet.Result[0].Latitude;
var lon = jData.ResultSet.Result[0].Longitude;
var smart = "<div style='width: 90px; color: black; font-size: small; margin: 0 3px 2px 3px;'>"
smart += "Long: " + lon + "<br />" + "Lat: " + lat;
document.getElementById('result').innerHTML = smart;
var point = new YGeoPoint(parseFloat(lat),parseFloat(lon));
var myMarker = createYMarker(point, 0, smart);
ymap.drawZoomAndCenter(point, 6);
ymap.addOverlay(myMarker);
}
function addTraffic() {
var center = ymap.getCenterLatLon();
var zoomLevel = ymap.getZoomLevel();
var request = "http://api.local.yahoo.com/MapsService/V1/trafficData?appid=" + appid + "&latitude=" + center.Lat + "&longitude=" + center.Lon + "&zoom=" + zoomLevel + '&output=json&callback=getTraffic'
// Create a new script object
aObj = new JSONscriptRequest(request);
// Build the script tag
aObj.buildScriptTag();
alert("buildScriptTag:"+aObj);
// Execute (add) the script tag
aObj.addScriptTag();
}
function addLocal() {
var center = ymap.getCenterLatLon()
var zoomLevel = ymap.getZoomLevel() * 5;
var query = document.getElementById("localquery").value;
var request = 'http://api.local.yahoo.com/LocalSearchService/V2/localSearch?appid=' + appid + '&query=' + query + '&latitude=' + center.Lat + '&longitude=' + center.Lon + '&radius=' + zoomLevel + '&results=' + 20 + '&output=json&callback=getLocal';
// Create a new script object
aObj = new JSONscriptRequest(request);
// Build the script tag
aObj.buildScriptTag();
// Execute (add) the script tag
aObj.addScriptTag();
}
function addGeocode() {
var location = document.getElementById("geoquery").value;
// Build the Yahoo! web services call
request = 'http://api.local.yahoo.com/MapsService/V1/geocode?appid=' + appid + '&location=' + location + '&output=json&callback=getLocation';
// Create a new script object
aObj = new JSONscriptRequest(request);
// Build the script tag
aObj.buildScriptTag();
// Execute (add) the script tag
aObj.addScriptTag();
}
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="header">
<h1>JSON Web Service Requests for Geocoding, Local Seach and Traffic API</h1>
<h2></h2>
</div>
<br />
<div class="inputelement"><button onClick="addGeocode()">Add location</button> <input id="geoquery" value="Yahoo disabled JSON for Geocoding >>>" size="50" readonly></input> - <a href="http://theurer.cc/code/devx/mapProxy.html"><b>check out how to use a proxy</b></a></div>
<div class="inputelement"><button onClick="addLocal()">Add local</button> <input class="innertextbox" id="localquery" value="Target" size="50"></input> - search for given query in the displayed area</div>
<div class="inputelement"> <button onClick="addTraffic()">Add traffic</button> - overlays traffic information</div>
<br />
<div id="mapbox" ></div>
<div id="message"><br /><h2></h2></div>
<div id="result"></div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
