Web.Maps.VE v1.0 Tutorials

Dynamically Load Bing Maps InfoBox using Ajax

In this tutorial we'll cover loading a Shape's 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 Code: AjaxDynamicInfoBox.zip

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.
Image001.png

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.
Image002.png

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.
Image008.png

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

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.
Image003.png

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

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.
Image005.png

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.
Image006.png

Step 8: Add our failure callback method
Image007.png

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.

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

Comments

No comments yet.