This project has moved. For the latest updates, please go here.

Web.Maps.VE v1.0 Tutorials

Basic Event Handling

Now that you have a basic understanding of how to place a Map on the page and plot some Pushpins; we will go over the basics of handling map events that are generated by the map based on user interaction.

The different Map events that are raised and can be handled are:
  • OnClick – This event is fired each time the user clicks on the map.
  • OnChangeMapStyle – This event is fired each time the map style (Road, Aerial or Hybrid) is changed.
  • OnChangeView – This map is fired each time the map is panned around or zoomed in or out.
  • OnEndPan – This event is fired each time the map is panned around.
  • OnEndZoom – This event is fired each time the maps zoom level is changed.
  • OnObliqueEnter – This event is fired when Birdseye imagery becomes available for the current map view.
  • OnObliqueLeave – This event is fired when Birdseye imagery is no longer available for the current map view.

You can also look at the Web.Maps.VE v1.0 Sample Web Site for more examples of handling each of these events.

Download the code: BasicEventHandlingCode.zip

Prerequisites

This article assumes you have already gone through and understand the Getting Started tutorial. We will use the code from the Getting Started tutorial as our basis for this article.

Before we continue:
  • Open up the Getting Started tutorial code.
  • Delete the code within the Page.OnLoad event handler that adds a point to the map.

Attaching an Event Handler

We will attach an event handler to the map for the OnClick event.

Set the OnClick property of the <Simplovation:Map /> tag of our control to Map1_Click:
Image001.png

Create out event handler stub within the code for the page:
Image002.png

As you can see, the OnClick event of the Simplovation.Web.Maps.VE.Map object takes an event arguments parameter of type AsyncMapDataEventArgs. This object contains information about the current state of the Map in the web browser (on the client-side) at the time the event was raised. All of the events that are listed above accept the AsyncMapDataEventArgs event arguments parameter.

Basic Event Argument Properties

There are a few properties of the AsyncMapDataEventArgs object, but the main ones you will probably use are:
  • zoomLevel – This contains an Integer value representing the current zoom level the map is at.
  • latlong – This can contain two different values depending on the event that was fired:
    • Normally this contains a LatLong object representing the current latitude/longitude point the map is centered on.
    • For the OnClick event, this contains a LatLong object representing the latitude/longitude point the user clicked on the map.

Add a Pushpin to the map

To add a Pushpin to the map, you just create an instance of the Shape object, set it’s properties, and then add it to the Maps Shape collection property.

Example Code:
Image003.png

Zoom In when Clicked

You can also modify most of the Map properties within the Map’s event handlers.

Here is some example code of zooming the map in one level during the OnClick event:
Image004.png

Last edited Apr 26, 2014 at 5:44 PM by crpietschmann, version 2

Comments

No comments yet.