Prototype of VEToolkit + ASP.NET MVC 1.0 Component Checked In

I just checked in an initial prototype of a reusable Virtual Earth component for ASP.NET MVC. The “VEToolkit.Web.MVC.Map” component is written as an Extension to the ASP.NET MVC AjaxHelper class, and allows for a simpler experience when implementing Virtual Earth mapping within ASP.NET MVC applications. This is an early prototype of what the component will be; it’s not a final release; but you are free to use it.
Download the latest Change Set of VEToolkit
The code is subject to change at any time, since this is currently in a prototype stage, but below is a basic overview of what’s there so far. ## Include a Basic Map on the Page
Include the “VEToolkit.Web.MVC” namespace within the page by adding the following Include directive to the top of the Page: <pre class="csharpcode"><%@ Import Namespace=”VEToolkit.Web.MVC” %></pre>

Add the following two JavaScript Includes (the Virtual Earth JavaScript API and jQuery) to the Page Header:

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

<script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>

Add the following to the Page to add a basic Virtual Earth map:

<%=Ajax.Map() %>

And that’s it; you’ll have “default” sized Virtual Earth map on the page.

Specify you own name for the global VEMap Variable that’s used

By default the component autogenerates an ID to use when naming the global VEMap object within the JavaScript that’s generated.

Here’s an example of how to specify your own ID (or variable name) to be used for the global VEMap object that’s created:

<%=Ajax.Map("myMap") %>

Now to get a hold of the global reference to the VEMap object, you can just access it by name, like so:

<input type="button" value="Zoom In" onclick="myMap.ZoomIn();" />
<input type="button" value="Zoom Out" onclick="myMap.ZoomOut();" />

Set a couple Map Properties

Here’s a modified example of the above that sets the Center Location, Zoom Level and Map Style:

<%=Ajax.Map("myMap")
    .SetCenter(new Location(44, -78))
    .SetZoom(6)
    .SetMapStyle(MapStyle.Road)%>

Call a JavaScript Function Once the Map is Loaded

Also you can specify a JavaScript Function to be called once the Map has finished loading within the Page.

Here’s an example:

<%=Ajax.Map("myMap")
    .SetOnMapLoaded("MapLoaded")%>

And, here’s a simple JavaScript Function named “MapLoaded” to match that adds a Pushpin to the Map at it’s Center Point:

<script type="text/javascript">
    function MapLoaded(sender) {
        // "sender" = The Map that was Loaded
        var map = sender;

        // Add a Shape to the Center of the Map now it's finished loading
        var s = new VEShape(VEShapeType.Pushpin, sender.GetCenter());
        s.SetTitle("Center Point");
        s.SetDescription("This was the original center point when the Map loaded.");
        map.AddShape(s);
    }
</script>

Conclusion

As stated above, this is just a basic overview of what’s been implemented so far in the VEToolkit ASP.NET MVC Prototype. There are a couple more things in there than I mentioned above, but I thought I’d keep the intro very basic until development moved further along.