Web.Maps.VE v2.0 – Basics of the Click Event

by Chris Pietschmann 27. March 2009 16:11

The Web.Maps.VE v2.0 ASP.NET AJAX Virtual Earth Mapping control Raises a few of the Client-Side Virtual Earth Events up to Server-Side ASP.NET Code. One of these events is the Map.Click Event. The Map.Click Event gets raised each time the user clicks on the Map using the Mouse. This tutorial is going to give you an overview of how to handle the Map.Click event, and use it to add/remove pushpins, re-center the map and change the map zoom level.

Prerequisites

This tutorial assumes that you already have a basic understanding of how to place a Map on a Page within your ASP.NET Website or Web Application Project.

If you need to get an overview of how to place a Map on the Page, then I recommend you go check out the “Getting Started with Web.Maps.VE v2.0 – Display a Virtual Earth Map on a Page” tutorial.

Attaching an Event Handler to the Map.Click Event

In order to handle the “OnClick” event, we must first attach an Event Handler to the Map.Click Event. This is done exactly the same as attaching an event handler to any other event in .NET.

It can be done declaratively within markup like this:

<Simplovation:Map runat="server" id="Map1" OnClick="Map1_Click"></Simplovation:Map>

Or, within code like this:

Map1.Click += new Map.AsyncMapEventHandler(Map1_Click);

If you decide to attach the event within code, then it is recommended that you attach it within the Page.OnLoad Event Handler. Also, the Map.Click event handler must be attached on the initial page load, and can not be attached during an Asynchronous Postback.

Once we have the event handler attached, we must declare our actual “Map1_Click” event handler method stub that we will place our “OnClick” event handling code within.

protected void Map1_Click(object sender, AsyncMapEventArgs e)
{
}

The Map.Click Event Handler accepts two arguments. The first is of type Object, and is a reference to the Map object that fired the event. The second is of type AsyncMapEventArgs, and contains information about the client-side map event that just fired the event.

AsyncMapEventArgs Properties

The AsyncMapEventArgs objects properties are mostly a mirror of the client-side vemap event object propertieswith a couple exceptions/additions.

These are the AsyncMapEventArgs properties that are most relavent when handling the Map.Click event:

  • altkey – A boolean value representing whether the ALT key was held down when the event was raised. Note: This is not supported in 3D mode.
  • ctrlKey – A boolean value representing whether the CTRL key was held down when the event was raised. Note: This is not supported in 3D mode.
  • latlong – A LatLong object that contains the Lat/Long Coordinates of the Clicked Location.
  • leftMouseButton – A boolean value representing whether the Left Mouse Button was Clicked.
  • MapView – A LatLongRectangle object that represents the current viewable area of the Map.
  • middleMouseButton – A boolean value representing whether the Middle Mouse Button was Clicked.
  • rightMouseButton – A boolean value representing whether the Right Mouse Button was Clicked.
  • Shape – If a Shape was Clicked, then this will contain a reference to that Shape object.
  • shiftKey – A boolean value representing whether the SHIFT key was held down when the event was raised. Note: This is not supported in 3D mode.
  • zoomLevel – The current Zoom Level of the Map.

Add a Pushpin Shape at the Clicked Locations

To add a Shape (of Type Pushpin) to the Map during the Click event you just need to follow these steps within your Map.Click Event Handler:

  1. Create a New Shape of Type Pushpin and set it’s Location to the value that’s contained within the AsyncMapEventArgs.latlong property.
  2. Cast the “sender” method argument to type Map.
  3. Invoke the Map.AddShape method, passing in the Shape that was just created.

This is fairly simple to do, and the resulting code is as follows:

protected void Map1_Click(object sender, AsyncMapEventArgs e)
{
    // Create Pushpin at the Clicked Location
    var pushpinShape = new Shape(e.latlong);

    // Set the Pushpins Title and Description
    pushpinShape.Title = "Clicked Location";
    pushpinShape.Description = "A Description for the Clicked Location";

    // Cast "sender" as Map
    var map = (Map)sender;

    // Add the Shape to the Map
    map.AddShape(pushpinShape);
}

Center the Map on the Clicked Pushpin

To center the Map on the Clicked Shape (pushpin in this case) all you need to do is to check whether the AsyncMapEventArgs.Shape property is Null. If it’s not null, then the user clicked on an existing Shape. Then set the Maps Center Lat/Long equal to the center of the Pushpin Shape.

To do this, follow these steps:

  1. Check if the AsyncMapEventArgs.Shape property is Null
  2. If AsyncMapEventArgs.Shape is Not Null, then Center the Map on the Shape by setting the Map.LatLong property equal to the AsyncMapEventArgs.Shape.LatLong property

Here’s the code from above modified to center on the clicked pushpin, and to add a new pushpin when the user clicks anywhere else on the Map:

protected void Map1_Click(object sender, AsyncMapEventArgs e)
{
    // Cast "sender" as Map
    var map = (Map)sender;

    // Check if a Shape was Clicked
    if (e.Shape != null)
    {
        // Shape was clicked, so center the Map on it

        // Set the Maps Center Location equal to the Pushpins Location
        map.LatLong = e.Shape.LatLong;
    }
    else
    {
        // Shape was not clicked, so add a new Shape at that Location

        // Create Pushpin at the Clicked Location
        var pushpinShape = new Shape(e.latlong);

        // Set the Pushpins Title and Description
        pushpinShape.Title = "Clicked Location";
        pushpinShape.Description = "A Description for the Clicked Location";

        // Add the Shape to the Map
        map.AddShape(pushpinShape);
    }
}

Zoom In on the Clicked Shape when the Shift Key is Held Down

To Zoom In the Map one zoom level at the same time you Center the Map on the Clicked Pushpin, all you need to do is increment the Map.Zoom property by 1 within the same Map.Click Event Handler.

To do this just add this line of code:

map.Zoom = map.Zoom + 1;

Remove the Clicked Shape on Right Mouse Click

To Remove the Clicked Pushpin when the user clicks on it using the Right Mouse Button, all you need to do is check if the AsyncMapEventArgs.rightMouseButton property is True and the AsyncMapEventArgs.Shape property is not null. Then if both those requirements are met, then just pass in the AsyncMapEventArgs.Shape properties value to the Map.DeleteShape method. The Map.DeleteShape method will remove/delete the passed in Shape from the Map.

Here’s the basic code that does this:

if (e.rightMouseButton && e.Shape != null)
{
    map.DeleteShape(e.Shape);
}

Complete Code Written Throughout This Tutorial

Here’s the complete code for the resulting Map.Click Event Handler from this entire tutorial:

protected void Map1_Click(object sender, AsyncMapEventArgs e)
{
    // Cast "sender" as Map
    var map = (Map)sender;

    // Check if the Right Mouse Button was Clicked
    if (e.rightMouseButton && e.Shape != null)
    {
        // Delete/Remove the Clicked Shape from the Map
        map.DeleteShape(e.Shape);
    }
    else
    {
        // The Right Mouse Button was NOT Clicked

        // Check if a Shape was Clicked
        if (e.Shape != null)
        {
            // Shape was clicked, so center the Map on it

            // Set the Maps Center Location equal to the Pushpins Location
            map.LatLong = e.Shape.LatLong;

            // Zoom In one zoom level
            map.Zoom = map.Zoom + 1;
        }
        else
        {
            // Shape was not clicked, so add a new Shape at that Location

            // Create Pushpin at the Clicked Location
            var pushpinShape = new Shape(e.latlong);

            // Set the Pushpins Title and Description
            pushpinShape.Title = "Clicked Location";
            pushpinShape.Description = "A Description for the Clicked Location";

            // Add the Shape to the Map
            map.AddShape(pushpinShape);
        }
    }
}

Conclusion

As you can see the Web.Maps.VE v2.0 control makes it extremely simple to handle the Client-Side Virtual Earth Map Event from within Server-Side .NET Code; along with making it extremely simple to add shapes and/or manipulate the Map from within Server-Side .NET code.

Further details on adding Shapes (Pushpins, Polygons and Polylines) will be explained in an additional tutorial.

Currently rated 3.0 by 1 people

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

Tags: ,

Web.Maps.VE v2.0 | Tutorials

Comments are closed