koha.html

   1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   2  <head>
   3   <link rel="SHORTCUT ICON" href="/favicon.ico" type="image/x-icon" />
   4   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   5   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   6   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
   7   <title>World Volcanoes</title>
   8   <script type="text/javascript">
   9   //<![CDATA[
  10
  11    var map ;
  12    var infoWindow ;
  13    var maxZoom = 10 ;
  14    var minZoom = 2 ;
  15
  16    // Load the map script...
  17
  18    function loadScript() {
  19     detectBrowser();
  20     var script = document.createElement("script");
  21     script.type = "text/javascript";
  22     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  23     document.body.appendChild(script);
  24    }
  25
  26    // Load the map...
  27
  28    function initialize() {
  29     var myLatlng = new google.maps.LatLng(35,-95);
  30
  31     // Create the volcano tile layer...
  32
  33     var volcanoOptions = {
  34      getTileUrl: function(tile, zoom) {
  35       var n = 1 << zoom;
  36       var x = tile.x % n;
  37       if (x < 0) {
  38        x += n;
  39       }
  40       return "tiles/tileserver.pl?Z=" + zoom + "&X=" + x + "&Y=" + tile.y ;
  41      },
  42      tileSize: new google.maps.Size(256, 256),
  43      opacity:1,
  44      minZoom:3,
  45      maxZoom:9,
  46      isPng: true
  47     };
  48
  49     var volcanoMapType = new google.maps.ImageMapType(volcanoOptions);
  50
  51     // Map options...
  52
  53     var myOptions = {
  54       zoom: 4,
  55       scrollwheel: false,
  56       center: myLatlng,
  57       mapTypeId: google.maps.MapTypeId.TERRAIN
  58     };
  59     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  60     map.overlayMapTypes.insertAt(0, volcanoMapType);
  61
  62     // Keep zoom within limits...
  63
  64     google.maps.event.addListener(map, 'zoom_changed', function() {
  65      if ( map.getZoom() > maxZoom ) {
  66       map.setZoom( maxZoom ) ;
  67      } else if ( map.getZoom() < minZoom ) {
  68       map.setZoom( minZoom ) ;
  69      }
  70     });
  71
  72     // Initialize an infoWindow...
  73
  74     infoWindow = new google.maps.InfoWindow();
  75
  76     // Add a click listener...
  77
  78     google.maps.event.addListener(map, 'click', function(event) {
  79      processClick(event.latLng);
  80     });
  81    }
  82
  83    // Set the map size based on the type of agent...
  84
  85    function detectBrowser() {
  86     var useragent = navigator.userAgent;
  87     var mapdiv = document.getElementById("map_canvas");
  88     if ( useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
  89      mapdiv.style.width = '100%';
  90      mapdiv.style.height = '100%';
  91     } else {
  92      mapdiv.style.width = '1024px';
  93      mapdiv.style.height = '768px';
  94     }
  95    }
  96
  97    // Check for an active click (on a map icon)...
  98
  99    function processClick ( point )
 100    {
 101     var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
 102     var parms = "POINT=" + point.toUrlValue() + "&ZOOM=" + map.getZoom() ;
 103     request.open("POST", "volcano.pl", true);
 104     request.setRequestHeader('Content-Type','application/x-www-form-urlencoded') ;      // Thanks to Darkstar 3D!
 105     request.onreadystatechange = function()
 106     {
 107      document.getElementById("loading").innerHTML = "Loading, please wait..." ;
 108
 109      if (request.readyState == 4)
 110      {
 111       var xmlDoc = request.responseXML ;
 112       try
 113       {
 114        var info = xmlDoc.documentElement.getElementsByTagName("info") ;
 115        var error = info[0].getAttribute("error") ;
 116
 117        if ( error )
 118        {
 119         alert(error) ;
 120        } else
 121        {
 122         var name = info[0].getAttribute("name") ;
 123         var lat = parseFloat(info[0].getAttribute("lat")) ;
 124         var lng = parseFloat(info[0].getAttribute("lng")) ;
 125         var clickLatlng = new google.maps.LatLng(lat,lng) ;
 126         var description = info[0].getElementsByTagName("description")[0].firstChild.nodeValue ;
 127         var html = "<div style='height:300px; width:350px;overflow:auto;'>" + description + "</div>" ;
 128
 129         infoWindow.close();
 130         infoWindow.setOptions({
 131          content: html,
 132          position: clickLatlng
 133         });
 134         infoWindow.open(map);
 135        }
 136       } catch(e)
 137       {
 138        alert("Some error occured during program processing:" + e) ;
 139       }
 140       document.getElementById("loading").innerHTML = "" ;
 141      }
 142     }
 143     request.send(parms);
 144    }
 145
 146   //]]>
 147   </script>
 148
 149  </head>
 150  <body bgcolor="#D1D0CD" text="black" link="#444444" alink="gray" vlink="#111111" onload="loadScript();">
 151   <div id="map_canvas"></div>
 152   <div id="loading" title="loading message for map" style="background-color:#D1D0CD; position:absolute; left:120px; top:200px;"></div>
 153  </body>
 154 </html>
 155