MapQuest Devblog

"In theory, there is no difference between theory and practice. But, in practice, there is." - Jan L. A. van de Snepscheut

In theory, the project to place RSS news feeds on a map could be very easy. GeoRSS is standard for encoding geographic locations in RSS feeds. RSS feeds that have this encoding are the perfect data source for this project. But, in practice, the feeds I've been looking at do not have GeoRSS information. So, I'm going to start by seeing what I can get done without GeoRSS.

The source of news that I'm working with is the AOL national news RSS feed. The description element of each feed starts with a location. I extracted the location, geocoded each location with the MapQuest (MQ) geocoding service, and then placed point of interest (POI) markers on the map.

In my last post, I laid out my design for MapNews. In this post, I present the working application and code I've written based on the MQ client Javascript tool kit. The following screen shot of MapNews shows POI markers for cities that have news stories in an example feed. I've clicked on the POI marker for Salt Lake City to expose links to news stories in the information window.

"If you don't know where you are going, any road will get you there." - Lewis Carroll

Like many developers I often start a project by jumping in and writing code. For this project I'm going try something a little different and create a road map for my mapping project.

My project is named MapNews. In my prior post, I covered the project concept: present a map with markers/information windows which show news headlines by location.

Doing the design up front is a bit of a jump off of a cliff for me. I've had only a light reading of the MapQuest Platform documentation and am going to proceed to layout the design. This should be interesting; as the project unfolds, I'll be able to look back and see my misconceptions exposed.

Part 1 - Concept and Prototype

"You've got your chocolate in my peanut butter! You've got your peanut butter on my chocolate!" - Reese's Peanut Butter Cups commercial.

Two guys in the Reese's commercial found out how much fun it is to combine your two favorite things. I, too, have discovered this phenomenon. For me, the combination is a mashup of maps and news. While this mixture might not be quite as good as a Reese's Peanut Butter Cup, it's pretty close in my book.

I have always enjoyed the newspaper section where you can read about what is going on your state or other states. Following this concept, my idea is to display a map with markers and information windows on places for which news is available. The information window will show headlines and allow click-through to the underlying story.

The source of news I plan to use is AOL RSS news feeds. The RSS feeds often have a place name associated with a news items. I'll extract and geocode the locations and then populate the map with markers for newsworthy places.

This is my first time using the MapQuest APIs so I tried a few baby steps to get the development process moving. I created the following static prototype of MapNews:

This prototype shows details for a particular zip code. I've decided that this isn't quite the right model as this is pulling in news for a selected location. It seems to me that a better model is a push model. The map should be zoomed out to the entire US to show which locations have associated news. You can then click on the locations that appeal to you and view the headlines.

The other concept shown is selection of news channels (national, business, and sports). These should map directly to specific RSS feeds, so I'll keep that.

The process for building this prototype was straightforward. I created an account at the MapQuest Technical Resource Center and obtained an API key and downloads of the Javascript API and documentation. I was able to produce this prototype after reading the first couple of pages in the Advantage API Javascript Developer Guide. I, therefore, won't cover those details here.

I worked with the HTML page on my local file system without moving the page to a web server. This required configuring my account to allow blank referers. After making the account changes, it takes an hour or so for the settings to propagate to the MapQuest servers. Allowing blank referrers should be avoided as it allows anyone to obtain and use your API key. Correcting this is high on my To Do list as I build out MapNews.

The next step is developing a design to identify the components and architecture I'll use to bring MapNews to life.

I've always liked maps, but I've always been disappointed with the content. Sure, knowing road names and where to find a gas station is great. But I'm an outdoors kind of guy, and what I really want to see is cool biking and hiking routes. That's why I'm so excited about Keyhole Markup Language (KML) and the MapQuest Platform; the combination of the two lets users, as opposed to mapmakers, supply map content. Overlaying a map with KML data opens up many possibilities for uploading, sharing, and finding user-generated content. Couple this ability to share data with the vast number of people carrying GPS-enabled devices and you have a perfect storm for sharing off-road routes.

In this article, I show how to read KML files and create map features by using the MapQuest JavaScript API. The example I'm presenting is a KML file that describes the route for the Appalachian Trail (AT) and the location of shelters hikers use for overnight stays. I've focused on my favorite part of the trail, which is the section between Front Royal, VA, and Harper's Ferry, West Virginia. The source code for the example is listed at the end of this article. The following screen shot shows my custom AT map in action: