Software Development

Using PushPins with the Virtual Earth ASP.NET control

This uses the July 2008 CTP of the Windows Live tools. You can download the Windows Live Tools for Visual Studio.

In this post, we’re taking a look at using pushpins with the Virtual Earth ASP.NET control. We have a page similar to the previous post, with a map control on it called VEMap.

In the code behind we have a method for adding shapes to the map as this is a multi-step process. First we need to create an object to represent the point, then an object to represent the shape (we’ll come to other shape types later, but for the moment, we’re just dealing with pushpins), finally we add the shape to the map.

The Page_Load method adds a number of shapes to the map, these pushpins represent locations where Scottish Developers have held user group meetings. The code looks like this:

protected void Page_Load(object sender, EventArgs e)
{
    // Glasgow Caledonian University
    AddShape(55.8662120997906, -4.25060659646988);

    // Dundee University
    AddShape(56.4572643488646, -2.97848381102085);

    // Microsoft Edinburgh (George Street)
    AddShape(55.9525336325169, -3.20506207644939);

    // Microsoft Edinburgh (Waterloo Place)
    AddShape(55.9535374492407, -3.18680360913277);
}

private void AddShape(double latitude, double longitude)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    VEMap.AddShape(shape);
}

From this we get a fairly standard output when the application is run:

At present, this is all visual. There isn’t any real functionality. What we’ll do is add some very basic functionality, so that when you hover over a pushpin it tells you something about it. The Shape object has a Description property into which you can put an HTML fragment. So, here is the updated code:

protected void Page_Load(object sender, EventArgs e)
{
    // Glasgow Caledonian University
    AddShape(55.8662120997906, -4.25060659646988,
        "<b>Glasgow Caledonian University</b>");

    // Dundee University
    AddShape(56.4572643488646, -2.97848381102085,
        "<b>Dundee University</b>");

    // Microsoft Edinburgh (George Street)
    AddShape(55.9525336325169, -3.20506207644939,
        "<b>Microsoft Edinburgh</b> (George Street)");

    // Microsoft Edinburgh (Waterloo Place)
    AddShape(55.9535374492407, -3.18680360913277,
        "<b>Microsoft Edinburgh</b> (Waterloo Place)");
}

private void AddShape(double latitude, double longitude, string description)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    shape.Description = description;
    VEMap.AddShape(shape);
}

The result when you hover over a pushpin looks like this:

That’s all great if you want the default pushpin look. However, you might want to customise the pins so they match more what you are looking for. The Shape class has a CustomIcon property which you can set to be a graphics object. In the following example I’ve used a simple png file with a red circle and an semi-transparent yellow fill.

The code now looks like this:

private void AddShape(double latitude, double longitude, string description)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    shape.Description = description;
    shape.CustomIcon = "images/target.png";
    VEMap.AddShape(shape);
}

And the result looks like this:

6 thoughts on “Using PushPins with the Virtual Earth ASP.NET control

  1. Great article!I tried adding a pushpin to a virtual earth map with the code provided in your walkthrough. The pushpin is visible for a second but then desappears!I’m using the following code:–>ascx<ve:Map ID=”Map1″ runat=”server” Height=”500px” Width=”600px” ZoomLevel=”4″ ‘sMapStyle=”Road” /> ‘<cc1:SetMapMode ID=”Map1_SetMapMode” runat=”server” MapControlID=”” ‘MapMode=”Mode2D” TargetControlID=”Map1″ />–>ascx.vbProtected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadMe.Map1_SetMapMode.MapMode = MapMode.Mode2DMe.Map1.MapStyle = MapStyle.RoadMe.Map1.ZoomLevel = 20Me.Map1.Find(Nothing, “Some address”)AddShape(Map1.Center.Latitude, Map1.Center.Longitude, “Text”)End Sub Protected Sub AddShape(ByVal latitude As Double, ByVal longitude As Double, ByVal description As String)Dim point As LatLongWithAltitude = New LatLongWithAltitude(latitude, longitude)Dim shape As Shape = New Shape(ShapeType.Pushpin, point)shape.Description = descriptionshape.CustomIcon = “add_16.png”Map1.AddShape(shape)End SubI also tried using the javascript API to show and manipulate the map (copied the code from the basic map example in http://dev.live.com/virtualearth/sdk), but I was not successful: the map does not appears in my page.Can you help me with this issue?Thanks in advance!Best regards and keep up the good work!Ricardo

  2. @Ricardo Looking at the code, the first thing I notice is that the way you’ve commented out stuff in the ascx file uses VB style comments rather than HTML style comments. If the VB style comments do actually work there then you’ve commented out the closing part of the ve:Map element.Looking at the VB code, my recommendation for dealing with errors like this is to take it back to the basics and start adding stuff back in and see where what line actually causes it to fail. For example, take out the lines that set the CustomIcon and Description. Also, take out all the lines in Page_Load except for AddShape…Now, start adding them back in and see where it goes wrong.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s