topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
professional-ria-03-GoogleYahooMashupX.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! Geocoder</title>
      <link rel=StyleSheet href="../../stylesheets/RIAStyle1.css" TYPE="text/css">
      <script src="../../scripts/createXMLHttpRequest.js" type="text/javascript"></script>
            <script type="text/javascript" src="../../scripts/jsr_class.js"></script>   
      <script   src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT3MTfjNOb50deF4pcXwWhT9dALuQ"
       type="text/javascript">
      </script>
      <script "text/javascript">
      // global vars
      var __xmlhttp = false;
      var __lat = null;
      var __lon = null;
      var __appid = "YahooDemo";
      var __location = null; 
      var __geocoderURI = "http://api.local.yahoo.com/MapsService/V1/geocode?appid="+__appid+"&output=xml";
      var __geocoderProxy = "../../phpscripts/geocoder.php?"; 
      var __trafficServer = "http://api.local.yahoo.com/MapsService/V1/trafficData?appid="+__appid;
      var __trafficReq = null;
      var __map = null;   
  // Geocoding and application control
      function callGeocode() {
        __location = document.getElementById("geoquery").value;
        var uri = __geocoderURI+"&location=" + __location;
        callWS(uri);
      }        
      function callWS(target){
        if(target !== ""){
          if (!__xmlhttp) {__xmlhttp = createXMLHttpRequest();}
          var url = __geocoderProxy + target;
          __xmlhttp.open('GET', url, true);
          __xmlhttp.onreadystatechange = function() {
            if(__xmlhttp.readyState == 4 && __xmlhttp.status == 200) {
              document.getElementById('Result').innerHTML = ''; 
              document.getElementById('State').innerHTML = 'Done.';
              getLatLon(__xmlhttp.responseText); 
              loadMap();
              getTrafficReport(); 
            } else {
              document.getElementById('State').innerHTML = "Working...";
            }
          }; 
          __xmlhttp.send(null);
        }
      }            
      function getLatLon(result){
        var start = (result.search(/<Latitude>/) +10 );
        var end = result.search(/<\/Latitude>/);
        __lat = result.substr(start, (end -start) );
        start = (result.search(/<Longitude>/) +11 );
        end = result.search(/<\/Longitude>/);
        __lon = result.substr(start, (end -start) );
        document.getElementById("State").innerHTML = ""; 
        __xmlhttp = false;
      }
  // Mapping and associated functions  
      function loadMap() {
        if (GBrowserIsCompatible()) {
          __map = new GMap2(document.getElementById("map"));
          __map.setCenter(new GLatLng(__lat.toString(), __lon.toString()), 13);
        } 
        var marker = hereMarker(__map.getCenter()); 
        __map.addOverlay(marker); 
      }   
  
      function createMarker(point, report) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", 
          function() {
             marker.openInfoWindowHtml( report );
          }
        );
        return marker;
      }
  
             
      function hereMarker(point){
        var letter = null;
        var marker = null;
        var baseIcon = new GIcon();
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25); 
        icon = new GIcon(baseIcon); 
        icon.image = "http://www.google.com/mapfiles/markerX.png";
        marker = new GMarker(point, icon);
        GEvent.addListener(marker, "click", 
          function() {
            marker.openInfoWindowHtml("<b>Your Address</b>");
          }
        );
        return marker;
      }
  
  // Traffic Data and associated functions    
      function getTrafficReport(){
        if (__trafficReq != null){
          aObj.removeScriptTag(); // clean up the DOM
        }
        var __trafficReq =__trafficServer + "&location="+__location + "&output=json&callback=getTrafficData";
        aObj = new JSONscriptRequest( encodeURI(__trafficReq));
        aObj.buildScriptTag(); 
        aObj.addScriptTag(); 
      }  
      function getTrafficData(jData) {
        if (jData.ResultSet.Result.length ==0){
          document.getElementById('TrafficResults').innerHTML = "No reported tie-ups";
          return;
        } 
        document.getElementById('TrafficResults').innerHTML = jData.ResultSet.Result.length+ " reported tie-ups";
        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 report =  "<h2>" + title + "</h2><br /><hr/>" 
            + "Lat/Lon: " + lat + "/"+ lon + "<br/>"
            + "Type: " + type + "<br/>" 
            +  "Severity: " + severity + "<br />" 
            + "Details:" + descr;
          __map.addOverlay(createMarker( new GLatLng(lat, lon), report));
        }
      }   
  
      //]]>
      </script>
  
    </head>
  
    <body onunload="GUnload()">
      <div id="header">
      <h1>Simple Geocoding Example </h1>
      <h2>Input a loose location description and get the traffic tie ups for the surrounding area</h2>
  
      </div> 
      <br /> 
      <div class="inputelement"><button onClick="callGeocode()">Location</button>&nbsp;
  
          <input id="geoquery" value="1300 N. 17th St, Arlington VA" size="50"></input>
      </div>
      <br />
  
      <div id="State"></div>
      <div id="Result"></div>
      <p>Traffic Tie Ups: <span id="TrafficResults" style="font-weight:bold"></span> </p>  
      <div id="map" style="width: 500px; height: 300px"></div>      
    </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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.