MapQuest Devblog

In this post I will continue my discussion of overlays in the MapQuest JavaScript API 5.2. My last two posts covered a couple of methods for adding rollover functionality to overlays. Over the next couple of posts I will discuss some of the options that are available when working with image overlays.

There are a few things that set image overlays apart from the other overlay types. The one that poses the biggest obstacle is image resolution. Since an image overlay is "pinned" to a map with Lat and Lng coordinates, there is a significant difference in resolution required to display an image properly at different zoom levels. If this becomes an issue for your application, one of the options that is available is the setImageOverlayLevels method provided by the API.

This method, although similar to the method I covered in my last post, uses the InfoWindow of the map rather than a rollover associated with a Point Of Interest (POI). The InfoWindow is populated with the title and content when the overlay is moused-over, and follows the cursor, similar to a tooltip.

The biggest disadvantage with this method comes from the need to step outside of the API to attach a mousemove event. This means that the solution needs to take browser differences into consideration. In order to simplify the code, and because I generally use ASP.NET for most of my work, you will notice that I have utilized a few shortcuts provided by the Microsoft AJAX Library.

Over the next couple of posts I'm going to look at the different rollover capabilities that are available for overlays in the MapQuest JavaScript API. To get started I'll post a simple module that can be imported into any application. To demonstrate, I have included links to an application that uses the module. The original Capture the Flag application can be seen here, and with the new functionality, here.

The module accomplishes two things. First, it uses the altState fields of the overlay to change the alpha value of the overlay, making it more transparent. Second, it accepts a string as an argument, using that as a title which is displayed in a rollover window. The following image is a screenshot of the Capture the Flag application, shown with the mouse hovering over the overlay on the left.

Introduction

The MapQuest Platform provides a powerful means for developers to integrate MapQuest technology into their web applications. In this article, I will demonstrate how to add interactive drawing to a map using the JavaScript-based API. In the resulting application, a user can set up a real-life game of Capture the Flag by drawing components of the game on an online map. You can see the application live here, and you can download the source in a .zip file here.