Dynamically Load Virtual Earth InfoBox Using AJAX

In this Tutorial we'll cover loading a Shapes InfoBox Title and Description dynamically using AJAX and Page Methods. We will also use a UserControl as our template for rendering the InfoBox Description.

Download the Code

Prerequisites

This article assumes you have a basic understanding of using Web.Maps.VE v1.0. For a basic introduction to implementing Web.Maps.VE you may reference the Getting Started Tutorial.

Before we continue, create a page and add a Map to it.

Dynamically Load InfoBox using AJAX

Step 1: Add a couple Pushpins to the map, and set thier Title to a string in the following format: "LOAD:{0}". Replace the "{0}" with a unique ID representing that Pushpin.

Step 2: Create the GetInfoBoxData Page Method in the page that we'll call using AJAX. Also, create a simple InfoBoxData class in the page; we'll use this class to more easily pass both the InfoBox Title and Description to the client.

Step 3: Add the ViewManager class to the site. This class is used in the GetInfoBoxData Page Method to render the Description to be passed back. This class was written by Scott Guthrie in his post titled "Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios", and it works perfect in this scenario.

Step 4: Create out InfoBoxDescription UserControl that the GetInfoBoxData Page Method will render the Description from.

Step 5: Attach a JavaScript method to the Client-Side OnMouseMove Event. To do this we must first handle the Maps Client-Side MapLoaded Event, and add our OnMouseMove handler within that event handler.

Step 6: Write code that calls the GetInfoBoxData WebMethod and populate the Shapes Title and Description within the OnMouseMove Event handler we just created.

A) First we get the ID to pass to the GetInfoBoxData Page Method, we extract it from the Shape Title. After all, we know that it's in the "LOAD:{0}" format.

B) Then we call the GetInfoBoxData Page Method by passing it our ID value and passing it the success callback method to call upon completion. The Page Method also accepts a failed callback method to call if the method fails for some reason.

C) Also, when calling out GetInfoBoxData Page Method we use a custom MapContext object to pass our callback a reference to the Map and Shape that we'll be getting the Title and Description for.

Step 7: Add our success callback method. This method will recieve the InfoBoxData object from the GetInfoBoxData Page Method along with the MapContext object. In this method we will populate the Shapes new Title and Description.

Step 8: Add our failure callback method

Conclusion

You will no longer have to pass the full Title and Description for every Shape you plot on the initial loading of the Shapes, and can load them on the fly as needed. This some what advanced AJAX functionality is actually rather simple to do.

<< More Web.Maps.VE v1.0 Tutorials