Vamos a ver un pequeño ejemplo de aplicación web híbrida (mashup).
Tomaremos como datos de partida uno de los
feed del U.S. Geological Survey,
el feed ‘Terremotos en las últimas 24 horas de intensidad superior a 2.5′. La URL del feed es:
http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml
En un mapa de Google Maps (maps.google.com) representaremos las geo-localizaciones de los terremotos colocando marcas de distintos colores (verde, amarillo, rojo) en función de la intensidad del terremoto.
El feed tenemos que procesarlo para extraer los datos, teniendo para ello varias opciones. En PHP, por ejemplo, podemos utilizar la extensión SimpleXML que permite convertir un XML en un objeto que puede ser procesado con selectores de propiedades e iteradores de matrices.
Veamos el código
Podemos insertar el mashup en nuestra página mediante:
include('downloads/google-maps-usgs.php'); |
Si usamos un CMS quizá no nos funcionen ciertas funciones. En ese caso podemos insertar el mapa en nuestra página mediante un iframe. Pondremos este código:
<iframe align="center" src="/downloads/google-maps-usgs.php" title="Google Maps USGS" width="450px" height="700px" scrolling="no" frameborder="0"> Si estas viendo esto, tu navegador no soporta IFRAMEs. Deberias actualizar a un navegador mas moderno. </iframe> |
El archivo google-maps-usgs.php contendrá el mapa propiamente dicho, y su contenido será el siguiente:
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Ejemplo de mashup con USGS y Google Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&key=[your-api-key]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { //comprobamos si el navegador es compatible con Google Maps if (GBrowserIsCompatible()) { //instanciamos un mapa con el id del <div> donde queremos mostrarlo var map = new GMap2(document.getElementById("map")); var colorado = new GLatLng(4.214943141390651,2.109375); map.setCenter(colorado, 1); map.setMapType(G_HYBRID_MAP); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); //funcion que añade una marca con etiqueta function createMarker(point, icon, tag) { var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(tag); }); return marker; } //procesar el feed con PHP <?php //URL del feed $feed = 'http://earthquakes.usgs.gov/eqcenter/catalogs/1day-M2.5.xml'; //volcar el feed en un objeto SimpleXML $xml = simplexml_load_file($feed); //extraer datos del feed $feedtitle = $xml->title; $feedsubtitle = $xml->subtitle; $feedauthor = $xml->author->name; $feedurl = $xml->id; foreach ($xml->entry as $entry) { $title = $entry->title; //calculamos la magnitud $espacio = strpos($title, " ") + 1; $coma = strpos($title, ",") + 1; $caracteres = $coma - $espacio - 1; $magnitud = substr($title, $espacio, $caracteres); $title = substr($title, $coma + 1); //extraemos el punto GeoRSS $punto = $entry->children('http://www.georss.org/georss')->point[0]; $punto = str_replace(" ", ",", $punto); ?> //salimos de PHP y volvemos a la API de JavaScript de Google Maps //añadir una marca var icono = new GIcon(G_DEFAULT_ICON); if(<?php echo $magnitud; ?> <= 3.5) icono.image = "/photos/iconos_google_maps/marker_verde.png"; else if(<?php echo $magnitud; ?> <= 4.5) icono.image = "/photos/iconos_google_maps/marker_amarillo.png"; else icono.image = "/photos/iconos_google_maps/marker_rojo.png"; var point = new GLatLng(<?php echo $punto; ?>); var tag = "<b><?php echo $title; ?></b><br /> <i>Magnitud <?php echo $magnitud; ?></i>"; var marker = createMarker(point, icono, tag); map.addOverlay(marker); <?php } ?> } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <p><span style="font-size:14px;"><b><?php echo $feedtitle; ?></b></span><br /> <span style="font-size:12px;"><i><?php echo $feedsubtitle; ?></i><br /> <?php echo $feedauthor; ?> - <a href="<?php echo $feedurl; ?>" ><?php echo $feedurl; ?></a></span></p> <div id="map" align="center" style="width: 450px; height: 500px"></div> </body> </html> |
Este es el mapa que veremos en nuestra página, con información en tiempo real:
Gracias por este ejemplo, es muy bueno.
Gracias. Me sirvió de mucho.
muy buen ejemplo
esta bueno el ehemplo, cuanto tiempo lleva hacer un msahop tomando en cuenta que soy un novato.