API Google Earth (I)

Esta va a ser la primera de una serie de entregas que nos servirán para adentrarnos en Google Earth API, la interfaz que nos proporciona Google  para juguetear con ese globo 3D que ya todos conocemos.

En este post, en el que se incluye el código utilizado, veremos cómo un sencillo formulario, algo de jQuery básico y menos de 100 líneas de código javascript bastan para tener en nuestra web el mapa 3D con un control total sobre las capas de información que Google nos proporciona y un buscador que nos permita redireccionar a cualquier punto de la Tierra.

Hello World

Lo primero que haremos será mostrar el mapa, para lo cual nos creamos un archivo HTML con un div donde se pintará el globo terrestre e incluiremos referencias al archivo donde definiremos toda la lógica de la aplicación, así como a las API de Google Earth y jQuery.


<pre><code>Google Earth (Ejemplo 1)
</code></pre>

&lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.8.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/inicializacionExplicada.js&quot;&gt;&lt;/script&gt;

Ahora, creamos ese archivo (inicializacion.js), añadiendo el siguiente trozo de código.

google.load('earth', '1.x', { 'language': 'es' });
google.load('maps', '3', { other_params: 'sensor=false' });
google.setOnLoadCallback( function inicializarPlugin() {
google.earth.createInstance('mapa3d', inicializar, terminacion);
});

Así, cargamos los plugins de Google Earth y Google Maps (necesario para implementar el buscador) y la función setOnLoadCallback, que evita que se cree la instancia del plugin hasta que todo el DOM esté construido. De esta manera, la función createInstance recibe:

  • Identificador del div que va a contener el mapa terrestre.
  • Función a llamar en caso de que la instancia se cree correctamente.
  • Función para el caso de que haya problemas a la hora de crear la instancia.

Por lo tanto, con sólo poner visible el mapa en inicializarEventos con la sentencia necesaria “ge.getWindow().setVisibility(true)”, podríamos ver el mapa correctamente.

Parámetros configurables

Como el ejemplo incluye opciones de parametrización, en inicializarEventos también vamos a incluir los eventos que permitan activar/desactivar estos elementos configurables.

Si nos centramos en los diferentes elementos configurables (capas, opciones, etc.) que trae Google Earth, nos encontramos con capas tales como carreteras, edificios3D, terreno o datos informativos (aunque se llame borders…), las cuales pueden ser activadas/desactivadas a través de la función enableLayerById.

ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);

Por otra parte, hay otros 2 grupos de parámetros configurables que Google incorpora; el primero lo forman el Sol y la atmósfera, que al no tener influencia informativa directa sobre el mapa terrestre, no son consideradas capas en sí mismas, y el segundo son elementos informativos superpuestos como la leyenda del mapa, informaciones geográficas, etc.

ge.getSun().setVisibility(true);
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getOptions().setOverviewMapVisibility(false);
ge.getOptions().setGridVisibility(true);
ge.getOptions().setAtmosphereVisibility(true);

BUSCADOR

La última sentencia de la función hace la redirección a la ciudad de Sevilla, lo cual se consigue mediante una llamada a un Web Service de Google pasándole la cadena de texto que hemos incluido en el buscador (para un caso genérico), devolviéndonos en el callback en formato JSON la latitud y longitud correspondientes a Sevilla, siempre que no haya habido problemas (status OK).

function buscarLocalizacion(direccion) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': direccion }, function (destino, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            modificarVista(destino[0].geometry.location.lat(), destino[0].geometry.location.lng());
        } else {
            alert("Wrong direction");
        }
    });
}

Una vez tenemos las coordenadas, la forma de indicarle a la API que deseamos realizar la redirección es creando un objeto LookAt (range indica el zoom que deseamos sobre Sevilla) y pasándoselo al mapa.

function modificarVista(latitud, longitud){
    var lookAt = globo.createLookAt('');
    lookAt.setLatitude(latitud);
    lookAt.setLongitude(longitud);
    lookAt.setRange(6000);
    globo.getView().setAbstractView(lookAt);
}

NOTA

Hay que tener en cuenta que, por motivos de brevedad, en el post se han obviado cosas como la creación del formulario y los eventos jQuery por considerarse sencillos de comprender.

Aquí puedes descargarte el código creado para realizar este ejemplo, donde puede verse el código completo para comprenderlo mejor.

Fuentes

https://developers.google.com/maps/documentation/javascript/geocoding

https://developers.google.com/loader/

https://developers.google.com/earth/

Autor: Antonio Manuel Acevedo

Enlaces de Febrero: Visual Studio, ASP.NET, ASP.NET MVC, JQuery, Windows Phone

Aquí tenéis una lista de enlaces que he recogido. Mirad también el resúmen de los mejores enlaces de 2010 , más de 100 enlaces que he ido recogiendo el año pasado. Continúa leyendo Enlaces de Febrero: Visual Studio, ASP.NET, ASP.NET MVC, JQuery, Windows Phone

Releases de ASP.NET MVC 3, IIS Express, SQL CE 4, Web Farm Framework, Orchard, WebMatrix

Me enorgullece anunciar que hemos publicado las releases de varios productos:

  • ASP.NET MVC 3
  • NuGet
  • IIS Express 7.5
  • Sql Server Compact Edition 4
  • Web Deploy and Web Farm Framework 2.0
  • Orchard 1.0
  • WebMatrix 1.0

Estos productos son todos gratuitos. Se han creado con la release de .NET 4 y VS 2010, y añaden un montón de valor a ASP.NET ( Tanto para Web Forms como para MVC) y al conjunto de servidores web de Microsoft. Continúa leyendo Releases de ASP.NET MVC 3, IIS Express, SQL CE 4, Web Farm Framework, Orchard, WebMatrix

Plugin jQuery Globalization de Microsoft

El mes pasado os hablé sobre que Microsoft está haciendo contribuciones a jQuery, y sobre algunas de las primeras contribuciones en las que estamos trabajando: Plantillas jQuery y Data Linking.

Hoy presentamos un prototipo para un nuevo plugin de jQuery para la Globalización que nos permite soportar la globalización en las aplicaciones JavaScript. Esto plugins incluyen información sobre Globalización para una 350 culturas. Vamos a publicar este pluging a en la comunidad como open-source.

Podéis descargar el prototipo del pluging de globalización de jQuery de nuestro repositorio de Github:

http://github.com/nje/jquery-glob

También podéis descargaros unos cuantos ejemplos que muestran algunos casos de uso aquí. Continúa leyendo Plugin jQuery Globalization de Microsoft

Plantillas jQuery y Data Linking (y la contribución de Microsoft a jQuery)

La librería jQuery tiene una comunidad muy apasionada de desarrolladores, y es la librería de JavaScript más usada en la web.

Hace dos años anuncié que Microsoft ofrecería soporte para jQuery, y que ibamos a incluirla en nuevas versiones de Visual Studio. Por defecto, cuando creáis proyectos ASP.NET Web Forms o ASP.NET MVC con VS 2010 encontraréis la librería jQuery incluida en vuestro proyecto.

Hace unas semenas en mi seguna presentación en el MIX 2010 anuncié que Microsoft iba a contribuir al proyecto jQuery. Durante la charla, John Resig — el creador de la librería jQuery y lider del equipo de desarrollo de jQuery – habló un poco sobre nuestra participación y habló sobre un prototipo de una nueva API de plantillas para jQuery.

En este post, voy a hablar un poco sobre cómo mi equipo está comenzando a contribuir al equipo de jQuery, y hablaremos sobre algunas características específicas en las que estamos trabajando como las plantillas de cliente y el data linking (data-binding). Continúa leyendo Plantillas jQuery y Data Linking (y la contribución de Microsoft a jQuery)