JavaScript Intellisense for Virtual Earth

Article
03/07/2008

One of my favorite things about Visual Studio 2008 is the JavaScript support, getting debugging and Intellisense support in the IDE. Scott Guthrie wrote an excellent blog post highlighting the JavaScript Intellisense support in VS2008. One of the first things I thought when I saw this was, "wouldn't it be great if the Virtual Earth team could provide a set of JavaScript files to provide Intellisense over the Virtual Earth API?" Well, turns out that Marc Schweigert had been thinking the same thing, and worked with a team to create the Virtual Earth JavaScript helper to get Intellisense support for Virtual Earth.

There's also a Channel9 screencast that explains the project.

While I am here, I might as well show a little about how to use it and what the experience is like. Here's the Default.aspx page.

 <%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Virtual Earth Example</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body onload="PageLoad();">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference 
            Path="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" />
        <asp:ScriptReference 
            Path="Default.aspx.js" />
            <asp:ScriptReference 
            Path="VeHelper.js" />
    </Scripts>
</asp:ScriptManager>
<div id='myMap' 
    style="position: relative; width: 1000px; height: 500px;">
</div>
</form>
</body>
</html>

My vehelper.js script contains a few helper methods for Virtual Earth development, and I also include the reference to Marc's VeJavaScriptIntellisenseHelper.js from the Virtual Earth JavaScript helper CodePlex project. This provides Intellisense over the Virtual Earth types. You can see that I am providing Intellisense for my 2 methods as well. This is a nice little example that isn't shown (at least very straightforwardly) in the Virtual Earth SDK... find a location and add a pin for that location, and it wraps up into just a few lines of code to call it.

 /// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />
function FindAddress(map, address, callback)
{
    /// <summary>Finds an address and calls the callback function.</summary>
    /// <param name="map" type="VEMap">The VEMap object.</param>
    /// <param name="address" type="String">The address to find.</param>
    /// <param name="callback">The callback function to call.</param>    
    map.Find(null,address, null, null, null, null, true, false, false, false, callback);                                
}

function AddPushpin(map, latitude, longitude, title, description, icon)
{
    /// <summary>Adds a pushpin to the map.</summary>
    /// <param name="map" type="VEMap">The VEMap object.</param>
    /// <param name="latlong" type="VELatLong">The VELatLong object containing latitude and longitude.</param>
    /// <param name="title" type="String">The title of the pushpin.</param>
    /// <param name="description" type="String">The text or markup to contain within the pushpin flyout.</param>
    var latlong = new VELatLong(latitude,longitude);
    var shape = new VEShape(VEShapeType.Pushpin, latlong);
    shape.SetTitle(title);
    shape.SetDescription(description);   
    if(icon)
    { 
        shape.SetCustomIcon(icon);  
    }
    map.AddShape(shape);
}

The Default.aspx.js code becomes pretty simple to write, since I just call my helper methods. Here, we use the Intellisense reference syntax to reference both Marc's stuff as well as my helper functions.

 /// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />
/// <reference path="VeHelper.js" />

var map;

function PageLoad()
{
    InitializeMap("myMap");
}

function InitializeMap(divName)
{
    map = new VEMap(divName);    
    map.LoadMap();   
    Find(map, "675 W Peachtree St NW, Atlanta, GA 30308");       
    map.ZoomIn(15);
}

function Find(map, address)
{
    FindAddress(map,address,FindCallback);
}

function FindCallback(shape, results, place)
{
    map.Clear();
    
    var latlong = place[0].LatLong;
    
    map.SetCenter(latlong); 
    
    var content = '<img src="https://www.att.com/Common/indc/homepage/images/logo.gif"><br/><b>at&amp;t Southeast</b><br/>This is the headquarters for the former BellSouth, now at&amp;t SouthEast.';
    AddPushpin(map,latlong.Latitude, latlong.Longitude, "My Pin",content, "https://www.att.com/favicon.ico");            
}

Sweet! The result is a map with AT&T's logo on it, with a custom pushpin icon (using their FavIcon.ico file from their site).

JavaScript Intellisense for Virtual Earth

Additional resources