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) _
mashup-gmaps-ch10-03.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">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  
  <title>MCslp Maps Chapter 10, Ex 3</title>
  <script src="http://maps.google.com/maps?file=api&v=1&key=YOURKEY"
        type="text/javascript">
  </script>
  
  <script type="text/javascript">
  
  var map;
  var points = [];
  var index = 0;
  var infopanel;
  var yearpanel;
  var popdata = new Array();
  var years = new Array();
  var polylines = [];
  var markers = [];
  var titles = [];
  
  function onLoad() {
      if (GBrowserIsCompatible()) {
          infopanel = document.getElementById("infopanel");
          yearpanel = document.getElementById("yearpanel");
          map = new GMap(document.getElementById("map"));
          map.centerAndZoom(new GPoint(-0.64,52.909444), 2);
          map.addControl(new GLargeMapControl());
          
          var request = GXmlHttp.create();
          request.open('GET','ch10-01.xml', true);
          request.onreadystatechange = function() {
              if (request.readyState == 4) {
                  var xmlsource = request.responseXML;
                  var markerlist = xmlsource.documentElement.getElementsByTagName("city");
                  for (var i=0;i < markerlist.length;i++) {
                      addmarker(parseFloat(markerlist[i].getAttribute("lng")),
                                parseFloat(markerlist[i].getAttribute("lat")),
                                markerlist[i].getAttribute("title"));
                      popdata[i] = new Array();
                      var poplist = markerlist[i].getElementsByTagName("pop");
                      for (var j=0;j<poplist.length;j++) {
                          popdata[i][poplist[j].getAttribute("year")] = parseInt(poplist[j].getAttribute("value"));
                          years[poplist[j].getAttribute("year")] = 0;
                      }
                  }
                  for (var i in years) {
                      yearpanel.innerHTML = yearpanel.innerHTML + 
                          '<a href="#" onClick="addgraph(' + i + ')">' + i + '</a><br/';
                  }
                  recenterandzoom(points);
              }
          }
          request.send(null);
      }
  }
  
  function addgraph(year) {
      var currentsize = map.getSpanLatLng();
      var increment = (parseFloat(currentsize.height)/4.0)/100;
      var maxsize = 0;
      var graphdata = [];
  
      map.clearOverlays();
  
      polylines = [];
      markers = [];
      infopanel.innerHTML = '';
  
      for(var i=0;i<popdata.length;i++) {
          graphdata.push(popdata[i][year]);
          if (popdata[i][year] > maxsize) {
              maxsize = popdata[i][year];
          }
          addmarker(points[i].x,points[i].y,titles[i] + ': ' + popdata[i][year]);
      }
  
      for(var i=0;i<graphdata.length;i++) {
          var pointpair = [];
          pointpair.push(points[i]);
          var volume =  parseInt((parseFloat(graphdata[i])*100)/maxsize);
          pointpair.push(new GPoint(points[i].x+increment,
                                    points[i].y+increment));
          var line = new GPolyline(pointpair,"#ff0000",volume);
          map.addOverlay(line);
          polylines.push(line);
      }
  }
  
  function addmarker(x,y,title) {
      var point = new GPoint(parseFloat(x),parseFloat(y));
      points.push(point);
      var marker = new GMarker(point);
      map.addOverlay(marker);
      markers.push(marker);
      titles.push(title);
      infopanel.innerHTML = infopanel.innerHTML + 
          '<a href="#" onClick="movemap(' + index + ');">' + 
          title + 
          '</a><br/>';
      
      index++;
  }    
  
  function recenterandzoom(points) {
      var latpoints = [];
      var lngpoints = [];
  
      var idealzoom = 1;
  
      if (points.length == 0) {
          return;
      }
  
      if (points.length == 1) {
          map.centerAndZoom(points[0],idealzoom);
          return;
      }
  
      for(var i=0;i<points.length;i++) {
          latpoints.push(points[i].y);
          lngpoints.push(points[i].x);
      }
  
      latpoints.sort(function(x,y) { return x-y });
      lngpoints.sort(function(x,y) { return x-y });
  
      var newlat = latpoints[0] + ((latpoints[latpoints.length-1] - latpoints[0])/2);
      var newlng = lngpoints[0] + ((lngpoints[lngpoints.length-1] - lngpoints[0])/2);
  
      var newpoint = new GPoint(parseFloat(newlng),parseFloat(newlat));
  
      var idealspan = new GSize(parseFloat((Math.abs(lngpoints[lngpoints.length-1]-lngpoints[0]))*1.25),
                                parseFloat((Math.abs(latpoints[latpoints.length-1]-latpoints[0]))*1.25));
  
      map.zoomTo(idealzoom);
  
      for(var i=1;i<16;i++) {
          var currentsize = map.getSpanLatLng();
                  if ((currentsize.width < idealspan.width) ||
              (currentsize.height < idealspan.height)) {
              map.zoomTo(i);
              idealzoom = i;
          }                
          else {
              break;
          }
      }
  
      map.centerAndZoom(newpoint,idealzoom);
  }
  
    function movemap(index) {
        map.recenterOrPanToLatLng(points[index]);
    }
  
    </script>
    </head>
    <body onload="onLoad()">
    <table cellspacing="15" cellpadding="0" border="0">
    <tr valign="top">
    <td><div id="map" style="width: 800px; height: 600px"></div></td>
    <td><h1>US City Population</h1><div id="infopanel"></div><h1>Available Years</h1><div id="yearpanel"></div></td>
    </tr>
    </table>
    </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.