Getting Started with Web.Maps.VE v2.0 – Display a Virtual Earth Map on a Page

by Chris Pietschmann 24. March 2009 23:27

In this article we will go over the basics of implementing MS Virtual Earth mapping capabilities in ASP.NET 3.5 Web Applications using the Web.Maps.VE v2.0 ASP.NET AJAX Virtual Earth Mapping Server Control. This article also shows code examples in C#, but this are exactly the same if you are using VB.NET.

Prerequisites

This article assumes you have already downloaded/installed the following onto your development workstation:

Create Website that is ready for Mapping

  1. Run Visual Studio 2008 and create a New Web Site or ASP.NET Web Application Project.

    WebMapsVE2_GettingStarted_NewWebsite
  2. Add a Reference to Simplovation.Web.Maps.VE.dll
    Right-Clicking the “Website Project” and select “Add Reference…

    WebMapsVE2_GettingStarted_AddReferenceMenu 
  3. Within the “Add Reference” dialog, Select the “Browse” tab and navigate to the folder where Web.Maps.VE is installed, and select “Simplovation.Web.Maps.VE.dll”.

    Note: By Default Web.Maps.VE is installed in this folder: “C:\Program Files (x86)\Simplovation LLC\Simplovation Web.Maps.VE v2.00.03”

    WebMapsVE2_GettingStarted_AddReferenceDialog

Display a Map on the Page

  1. Open the Default.aspx page, and select “Source” view.
  2. Add the following Register directive to the top of the Page. This will include the Simplovation.Web.Maps.VE namespace in the page, allowing you to place a Map control on the Page.
    <%@ Register assembly="Simplovation.Web.Maps.VE"
        namespace="Simplovation.Web.Maps.VE"
        tagprefix="Simplovation" %>
  3. Add an ASP.NET ScriptManager control to the top of the Page. This must be added to the Page above the Web.Maps.VE Map object that we’ll add later.
    <asp:ScriptManager runat="server"
        ID="ScriptManager1"></asp:ScriptManager> 
  4. Add a Web.Maps.VE Map object to the Page so we can display a MS Virtual Earth Map.
    <Simplovation:Map ID="Map1" runat="server"></Simplovation:Map>

Plot a Pushpin on the Map and Center on the Pushpin

  1. Open the Code File (Default.aspx.cs) for the Page.

    In this example we’ll just place the Pushpin creation code within the Page Load event handler. You could just as easily use the Click event of an ASP.NET Button; this will be covered in an additional tutorial that will show how to manipulate the Map from server-side code during an Asynchronous Postback using the ASP.NET UpdatePanel control.

  2. Create a Simplovation.Web.Maps.VE.LatLong object that will represent the Map Location that the Map will be centered on and the Pushpin will be located.
    var myLatLong = new Simplovation.Web.Maps.VE.LatLong(44.4023, –100.6347); 
  3. Create a Simplovation.Web.Maps.VE.Shape object, set it’s Location to the above LatLong object, and give it a Title and Description for its InfoBox.
    var myShape = new Simplovation.Web.Maps.VE.Shape(myLatLong); 
    myShape.Title = "The Shape Title"; 
    myShape.Description = "Some description of the shape."; 
  4. Add the Pushpin (aka Shape) to the Map by invoking the Map.AddShape method.
    Map1.AddShape(myShape); 
    This will add the Shape to the “Default” Shape Layer of the Map. Working with Shape Layers will be covered in more detail an an additional tutorial.

  5. Center the Map on the specified location by setting the Map.LatLong property to the LatLong object we created with the code above.
  6. Map1.LatLong = myLatLong; 
  7. Now Run the Website by pressing F5 or selecting “Start Debugging” within the “Debug” Menu. You will see a Map on the Page that is centered on the Pushpin Shape we added using the above code.

    WebMapsVE2_GettingStarted_MapWithPushpin 

Setting the Map Center Location (Lat/Long) using ASP.NET Markup

In addition to setting the Map’s Center Location using Code, you can also set it’s Center Location just as easily using markup. To do this, you just set the Map objects Latitude and Longitude properties to the location you want to center on.

<Simplovation:Map ID="Map1" runat="server" 
    Latitude="44.4023" Longitude="-100.6347"> 
</Simplovation:Map>

Setting the Map Zoom Level

The Maps Zoom Level can also be changed by setting the Map objects Zoom property. The Default Zoom Level of the Map is 4, and it accepts a range of 1 through 19.

To zoom a little closer to the Pushpin we added above, we can set it to a value of 6.

To do this in code:

Map1.Zoom = 6;

To do this in markup:

<Simplovation:Map ID="Map1" runat="server" 
    Zoom="6"> 
</Simplovation:Map>

Conclusion

As you can see it’s very simple to add a basic Virtual Earth Map to a Page, set it’s Location (Lat/Long and Zoom) and add a Pushpin to it.

In additional articles we will cover working with Web.Maps.VE in more depth; including some of the following topics:

  • Manipulating the Map from Server-Side code leveraging ASP.NET UpdatePanel controls
  • Handle Client-Side Map Events (such as: click, onchangeview, onendpan, onendzoom, etc.) from Server-Side code
  • Working with Shape Layers
  • Loading Driving Directions
  • Extending the Map using JavaScript

As you can see this is just the beginning in a series of tutorials that will help you dive deep into the workings of Adding/Manipulating/Displaying MS Virtual Earth Maps using the Simplovation Web.Maps.VE ASP.NET AJAX Virtual Earth Server Control

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Web.Maps.VE v2.0 | Tutorials

Comments are closed
Powered by BlogEngine.NET 1.4.5.0