Earthquakes in Google Maps

Werner Creixell — Wed, 16 Jun 2010 15:10:43 +0000

In this example the Seminario II sutdents were asked to design a web page that display a Google map with earthquake information from the US Geological Survey USGS.

Camilo Vera solution can be found here (gracias Camilo).

Camilo’s php script is as follows:

entry as $node){
    //se recuperan los datos que tiene un namespace especificado por la siguiente url
    $geo = $node->children("http://www.georss.org/georss");
    $json[$i][0]=$geo->point;
    $json[$i][1]=$node->title;
    $i++;
}
print(json_encode($json));
?>

The javascript is as follows:

function initialize() {
    myLatlng = new google.maps.LatLng(-33.04299, -71.586657);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    //se crea una instancia de un mapa de google
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var request = crear_XmlHttpRequest();
    request.open("GET", "Conector.php", true);
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200){
            var yw_json = request.responseText;
                      //dirty JSON evaluation
            var yw = eval('(' + yw_json + ')');
            var i;
            //se recorren el arreglo que contiene la informacion de las coordenadas y el nombre
            //del lugar donde ocurrio el terremoto
            for(i in yw){
                //la tercera dimension del arreglo es inutil, pero lamentablemente json_encode de php lo crea
                //se separan los dos puntos que determinan la coordenada
                coordenadas = yw[i][0][0].split(" ");
                //se guarda el nombre del lugar donde ocurrio el evento
                lugar = yw[i][1][0];
                //se crea el marcador en el mapa
                myLatlng = new google.maps.LatLng(coordenadas[0], coordenadas[1]);
                new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title:lugar
                });
            }
        }
    }
    request.send(null);
  }

//Se define una funcion que retorne el objeto XMLHttpRequest dado que en la
//version 3 de la api de google se quito la clase GXmlHttp

function crear_XmlHttpRequest(){
    var httpRequest;
    if (window.XMLHttpRequest){
        //El explorador implementa la interfaz de forma nativa
	httpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
        //El explorador permite crear objetos ActiveX
	try {
            httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
	} catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!httpRequest){
        alert("No ha sido posible crear una instancia de XMLHttpRequest");
    }
    return httpRequest;
}

The Html file is:

Alejandro Homes solution can be found here (gracias Alejandro). In this example the students used a php script as middle man to by pass the cross-domain restriction in web browsers.

The php script goes as follows:

entry as $entry ) 

{ 

	$aeo = $entry->children("http://www.georss.org/georss");

	$arr[$count] = array ('nombre'=>$entry->title,'fecha'=>$entry->updated,'geo_point'=>$aeo->point,'geo_elev'=>$aeo->elev);

	$count++;

}

  

//JSON enconde and print  

print(json_encode($arr));



?>

The html page is as follows:




	
	Google Maps JavaScript API Example

Yahoo Weather in Google Maps

Werner Creixell — Wed, 12 May 2010 12:58:56 +0000

This is a toy example that I used to challenge my students at seminario II. The idea is to display the Yahoo! Weather information in a google map, as showed in this page (click in the marker and the weather info for Valparaíso will appear).

We first grab the information, by a php script, from the Yahoo! Weather RSS feed. The feed is available from the URL http://weather.yahooapis.com/forecastrss?w=349861&u=c, where w is the corresponding code for Valparaíso, and u is the temperature unit in Celsius. This php scrip can communicate with the client (the html page with the map) by JSON or XML. The XML version is contributed by Jorge Flores a student in Seminario II (¡¡Gracias Jorge!!).
The XML from the feed looks like





Yahoo! Weather - Valparaiso, CI
http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html
Yahoo! Weather for Valparaiso, CI
en-us
Tue, 11 May 2010 6:00 pm CLT
60







Yahoo! Weather
142
18
http://weather.yahoo.com
http://l.yimg.com/a/i/us/nws/th/main_142b.gif



Conditions for Valparaiso, CI at 6:00 pm CLT
-32.78
-71.53
http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html
Tue, 11 May 2010 6:00 pm CLT


Current Conditions:

Fog, 11 C


Forecast:

Tue - Cloudy. High: 20 Low: 9

Wed - Partly Cloudy. High: 20 Low: 9



Full Forecast at Yahoo! Weather


(provided by The Weather Channel)

]]>


CIXX0026_2010_05_11_18_00_CLT

We can observe that there are two different name spaces, yweather and geo. We need just those names under yweather. In particular we use yweather:condition, this element holds the current weather information on its attributes.

JSON version

The php goes as follows

channel->item->children("http://xml.weather.yahoo.com/ns/rss/1.0");

//traverse the SimpleXML object and store in a associative array
foreach( $yweather->condition->attributes() as $k=>$attr)
     $condition[$k] = $attr;

//JSON enconde and print
print(json_encode($condition));
?>

On the html page we receive the information in the JSON format and passed to the openInfoWindowHtml() method of google maps.



  
    
    Google Maps JavaScript API Example

XML version

The php goes as follows

channel->item;
//formatting the XML output
	print("");
	print("" . $item->title . "");
//getting the namespace
	$child = $item->children("http://xml.weather.yahoo.com/ns/rss/1.0");
	$att = $child->condition->attributes();
	print("" . $att->text . " " . $att->temp . "ºC");
	print("");
}
?>

Jorge’s html file goes like this

The main differences with the JSON version are in the request.onreadystatechange handler, where there is a little more code to traverse the XML data. You can check the result here

Werner Creixell » PHP

Earthquakes in Google Maps

Yahoo Weather in Google Maps

JSON version

XML version