volcano.htm

   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       return "volcano/tiles/" + zoom + "/v_" + x + "_" + tile.y + ".png";
  42      },
  43      tileSize: new google.maps.Size(256, 256),
  44      opacity:1,
  45      minZoom:3,
  46      maxZoom:9,
  47      isPng: true
  48     };
  49
  50     var volcanoMapType = new google.maps.ImageMapType(volcanoOptions);
  51
  52     // Map options...
  53
  54     var myOptions = {
  55       zoom: 4,
  56       scrollwheel: false,
  57       center: myLatlng,
  58       mapTypeId: google.maps.MapTypeId.TERRAIN
  59     };
  60     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  61     map.overlayMapTypes.insertAt(0, volcanoMapType);
  62
  63     // Keep zoom within limits...
  64
  65     google.maps.event.addListener(map, 'zoom_changed', function() {
  66      if ( map.getZoom() > maxZoom ) {
  67       map.setZoom( maxZoom ) ;
  68      } else if ( map.getZoom() < minZoom ) {
  69       map.setZoom( minZoom ) ;
  70      }
  71     });
  72
  73     // Initialize an infoWindow...
  74
  75     infoWindow = new google.maps.InfoWindow();
  76
  77     // Add a click listener...
  78
  79     google.maps.event.addListener(map, 'click', function(event) {
  80      processClick(event.latLng);
  81     });
  82    }
  83
  84    // Set the map size based on the type of agent...
  85
  86    function detectBrowser() {
  87     var useragent = navigator.userAgent;
  88     var mapdiv = document.getElementById("map_canvas");
  89     if ( useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
  90      mapdiv.style.width = '100%';
  91      mapdiv.style.height = '100%';
  92     } else {
  93      mapdiv.style.width = '1024px';
  94      mapdiv.style.height = '768px';
  95     }
  96    }
  97
  98    // Check for an active click (on a map icon)...
  99
 100    function processClick ( point )
 101    {
 102     var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
 103     var parms = "POINT=" + point.toUrlValue() + "&ZOOM=" + map.getZoom() ;
 104     request.open("POST", "volcano.pl", true);
 105     request.setRequestHeader('Content-Type','application/x-www-form-urlencoded') ;      // Thanks to Darkstar 3D!
 106     request.onreadystatechange = function()
 107     {
 108      document.getElementById("loading").innerHTML = "Loading, please wait..." ;
 109
 110      if (request.readyState == 4)
 111      {
 112       var xmlDoc = request.responseXML ;
 113       try
 114       {
 115        var info = xmlDoc.documentElement.getElementsByTagName("info") ;
 116        var error = info[0].getAttribute("error") ;
 117
 118        if ( error )
 119        {
 120         alert(error) ;
 121        } else
 122        {
 123         var name = info[0].getAttribute("name") ;
 124         var lat = parseFloat(info[0].getAttribute("lat")) ;
 125         var lng = parseFloat(info[0].getAttribute("lng")) ;
 126         var clickLatlng = new google.maps.LatLng(lat,lng) ;
 127         var description = info[0].getElementsByTagName("description")[0].firstChild.nodeValue ;
 128         var html = "<div style='height:300px; width:350px;overflow:auto;'>" + description + "</div>" ;
 129
 130         infoWindow.close();
 131         infoWindow.setOptions({
 132          content: html,
 133          position: clickLatlng
 134         });
 135         infoWindow.open(map);
 136        }
 137       } catch(e)
 138       {
 139        alert("Some error occured during program processing:" + e) ;
 140       }
 141       document.getElementById("loading").innerHTML = "" ;
 142      }
 143     }
 144     request.send(parms);
 145    }
 146
 147   //]]>
 148   </script>
 149
 150  </head>
 151  <body bgcolor="#D1D0CD" text="black" link="#444444" alink="gray" vlink="#111111" onload="loadScript();">
 152   <div id="map_canvas"></div>
 153   <div id="loading" title="loading message for map" style="background-color:#D1D0CD; position:absolute; left:120px; top:200px;"></div>
 154  </body>
 155 </html>
 156