Jugando Con Windows Live Virtual Earth y Javascript a Muerte
Windows Live Virtual Earth Map es un sistema de búsqueda de mapas. Usando este control se pueden buscar direcciones, empresas, tiendas y todo tipo de ubicaciones. Al igual que Google Map, este sistema es ideal para la creación de MashUps con mapas.
Para poder interactuar con el mapa Virtual Earth, esté expone una API en javascript. Usando esta API se pueden hacer un montón de cosas con el mapa como: buscar ubicaciones, poner chinchetas en diferentes lugares, hacer búsquedas de rutas, etc.
Para que el renderizado del mapa se haga bien, es necesario que la página web (html, aspx) donde se va ubicar el control se genere en formato UTF-8. Si la página no es generada en este formato, alguno de los objetos del mapa no se verán bien. Por eso es necesario añadir la siguiente línea de código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Como anteriormente comentaba, la API para trabajar está desarrollada en javascript. Esto hace necesario agregar a la lista de archivos javascript el siguiente:
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">
</script>
Para presentar el control solamente hará falta el uso de una etiqueta div con un identificador único. Este id se le pasará a la API para que sepa donde tiene que mostrar el mapa.
Como recomendación, dentro de los estilos css de este div, además de definir el tamaño del mapa, también será necesario marcarlo con una posición relativa. De esta manera se evitará que el mapa se salga del tamaño especificado.
<div id="MapaSmaple" style="position:relative; width:500px; height:500px;">
</div>
Las instrucciones javascript que nos harán falta para mostrar el mapa y cargarlo dentro del div son tan sencillas como las siguientes:
var map = new VEMap("MapaSmaple");
var point = new VELatLong(40.42036965902929, -3.7057537120230912)
map.LoadMap(point, 19, VEMapStyle.Road, false,
VEMapMode.Mode2D, true, 1);
map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);
Nota: Para ampliar un poco más acerca de cómo trabaja el método LoadMap consultar el SDK.http://msdn2.microsoft.com/en-us/library/bb412546.aspx
Hay que tener en cuenta que el mapa por defecto es cargado en millas. Para hacer que trabaje en KM sólo hay que cambiarle la unidad de distancia, como se muestra en el snippet de código anterior.
Para realizar una búsqueda de una localización se utiliza el método Find. Es método tiene varios parámetros, pero los más importantes son “what” y “where”, donde se indica que buscas (empresas, tiendas, etc) y la dirección que buscas. También hay un parámetro muy interesante que te permite hacer un callback a una función con el resultado de la búsqueda.
map.Find(null,
place,
null,
null,
0,
1,
true,
true,
false,
true,
resultSearch);
function(layer, resultsArray, places, hasMore, veErrorMessage)
{
if (places.length > 0)
{
alert(places[0].Name);
}
}
Nota: Para ampliar un poco más acerca de cómo trabaja el método Find consultar el SDK. http://msdn2.microsoft.com/en-us/library/bb429645.aspx
Como el sistema de búsquedas es muy bueno, es necesario poner la dirección exacta del lugar a buscar. Por ejemplo, para buscar una calle, hay que poner “Nombre de la Calle Número, Código Postal Localidad”, sino el sistema no será capaz de encontrar el sitio exacto.
Otra cosa interesante que tiene Virtual Earth Map, es que permite poner marcas, chinchetas, en una localización. Para ello utilizamos el método AddPushpin, que añadirá una chincheta sobre el mapa en la localización que queramos. Este método devuelve un objeto VEShape, que permite personalizar un poco el panel que se muestra al posicionar el ratón sobre la marca. A este panel se le puede cambiar el diseño, añadir una imagen, un link a una página, etc.
var point = new VELatLong(40.42036965902929, -3.7057537120230912)
var pin = map.AddPushpin(point);
pin.SetTitle("Madrid");
pin.SetDescription("Madrid es una ciudad…");
Nota: Para ampliar un poco más acerca de cómo trabaja el método AddPushpin consultar el SDK. http://msdn2.microsoft.com/en-us/library/bb412535.aspx
En esta LIVE DEMO, se puede ver un ejemplo del uso de Virtual Earh.
Referencias:
Maps Live
Virtual Earth Map Control Class Reference
Virtual Earth Developer Center
Windows Live Dev: Microsoft Virtual Earth