1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
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">
16 // Load the map script...
18 function loadScript() {
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);
28 function initialize() {
29 var myLatlng = new google.maps.LatLng(35,-95);
31 // Create the volcano tile layer...
33 var volcanoOptions = {
34 getTileUrl: function(tile, zoom) {
40 // return "tiles/tileserver.pl?Z=" + zoom + "&X=" + x + "&Y=" + tile.y ;
41 return "volcano/tiles/" + zoom + "/v_" + x + "_" + tile.y + ".png";
43 tileSize: new google.maps.Size(256, 256),
50 var volcanoMapType = new google.maps.ImageMapType(volcanoOptions);
58 mapTypeId: google.maps.MapTypeId.TERRAIN
60 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
61 map.overlayMapTypes.insertAt(0, volcanoMapType);
63 // Keep zoom within limits...
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 ) ;
73 // Initialize an infoWindow...
75 infoWindow = new google.maps.InfoWindow();
77 // Add a click listener...
79 google.maps.event.addListener(map, 'click', function(event) {
80 processClick(event.latLng);
84 // Set the map size based on the type of agent...
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%';
93 mapdiv.style.width = '1024px';
94 mapdiv.style.height = '768px';
98 // Check for an active click (on a map icon)...
100 function processClick ( point )
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()
108 document.getElementById("loading").innerHTML = "Loading, please wait..." ;
110 if (request.readyState == 4)
112 var xmlDoc = request.responseXML ;
115 var info = xmlDoc.documentElement.getElementsByTagName("info") ;
116 var error = info[0].getAttribute("error") ;
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>" ;
131 infoWindow.setOptions({
133 position: clickLatlng
135 infoWindow.open(map);
139 alert("Some error occured during program processing:" + e) ;
141 document.getElementById("loading").innerHTML = "" ;
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>