Mapping resources: Yahoo! HTTP Geocoder API, Geohashes and Browser-based Geolocation

Links:

• Webmonkey takes a look at Yahoo! Geocoding API
  

  Geocoding is the process of converting human-readable place data -- a city name, ZIP code, or address -- to latitude and longitude points that can be easily plotted on a map.



• Tips & Tricks with Geohashes, another geocoding service, which provides a geohash with gradual precision degradation - instead of latitude and longitude - from human-readable address data.
  
  Not to be confused with xkcd's Spontaneous Adventure Generator.
  
  
  


• Geolocation Redux and a JS Library, a proposal for browser-based geolocation functionality with a JavaScript library to start getting your hands into it. Looks interesting.

Other posts in this series:
Mapping Resources: Google Maps .NET Control, GeoRSS with WCF
Mapping Resources: Mapstraction, Geocommons, GeoCoder.us with C#
Mapping Resources: OpenLayers and OpenStreetMap

Mapping Resources: Google Maps .NET Control, GeoRSS with WCF

Here are two mapping links that've made their way to my news aggregator since the last resouces post, summarized here for your convenience:

• Chris Newman talks about the free version of Google Map .NET Control which lets you add a map control with lines/markers to your ASP.NET webpage. It's a simple download and dll-to-bin-drop away from coding your first map server control in C# and ASP.NET:

  
<reimers:googlemap id="GoogleMap1" runat="server" width="349" height="354" onmarkerclick="GoogleMap1_MarkerClick" />

  
  As you'll notice, web event-handling is standard ASP.NET. The licensed and more complete version of the server control, is available for download and works free on localhost URLs so you can download that and try it as well.


• Eugenio Pace blogged about creating a GeoRSS with WCF Syndication very easily, which he then wrangled into Virtual Earth for a mashup just to show it works. You could take this, couple it with lessons learned from this other article about creating RESTful Web Services with WCF, and just as easily create RESTful GeoRSS services. Cool, no?

Also, an upbeat update last month on the state of online maps, mapping services and features from Channel 8.

Previously on this blog:
Mapping Resources: Mapstraction, Geocommons, GeoCoder.us with C#
Easily get maps on Facebook with Popfly
Open source mapping with OpenLayers and OpenStreetMap
Drawing a Virtual Earth map with Yahoo! Pipes data

Mapping resources

Some links:

• Get To Grips with Slippy Maps - a 24 ways tutorial using Mapstraction, a JavaScript mapping abstraction library which supports GeoRSS and multiple services.


• The mashup-ready GeoCommons.


• How to convert a street address to longitude and latitude (geocoding) via web services - the article focuses on consuming GeoCoder.us services with C# (using XmlDocument.Load()), and makes mention also of Yahoo! Maps GeoCoding API, a similar service.

Also last weekend, I discovered Google Maps added more street data to Malaysian maps. The maps are now more detailed, and complete with street names, down to small lorong-lorong in the city (here in the capital, and it looks like Malaysian small towns are catching up too). Here's an idea; Mashup Malaysian food blogger, Masak-masak's delicious looking posts into a map-enabled dining guide of the Klang Valley!

Previously on this blog:
Easily get maps on Facebook with Popfly
Open source mapping with OpenLayers and OpenStreetMap
Drawing a Virtual Earth map with Yahoo! Pipes data

Elsewhere, an interesting article:
The Rise Of Hyperlocal Information

Easily get maps on Facebook with Popfly

Some time ago, I blogged about creating a Microsoft Virtual Earth map with a geo-enabled Yahoo! Pipes feed.

As an example, I fed a plain RSS feed from IMDb (actors' and directors' birth places) into Pipes, geo-enabled it, and then used the JSON output to programmatically draw push-pins onto a Virtual Earth map (with JavaScript).

Today, I wanted to see how much effort it'd take to do the same thing with Microsoft Popfly. Popfly is an online mashup editor, like the Google Mashup Editor. It uses Silverlight technology.

Well, it was almost effortless. I just needed to drag two blocks onto my new Popfly mashup - one for my Pipes RSS, and the other to draw the Virtual Earth map - connect them and that was it. No programming so far, but if I needed, I could add custom HTML and JavaScript (methinks).



Clicking on preview:



Wow. It's amazing, I know. But wait, there's more. After saving my new mashup, I can use the MashOut function to export my mashup.



Selecting "Share on Facebook" will pop up this dialog which let's you post the mashup to your Facebook profile.



It's so easy.

There's so much in Popfly, that this being the tip of the iceberg is really an understatement. There are many official Microsoft blocks for you to build with. There are also many more custom user contributed blocks that you can use, sort of like cloning someone else's Yahoo! Pipes for yourself. In fact, the Virtual Earth block I used in this example is a custom block contributed by user cschrock.

There is even a Facebook block, and the Popfly team site has videos on using it (and I believe the examples in the videos use maps). Do check them out.

Other posts about mapping:
Open source mapping with OpenLayers and OpenStreetMap

Drawing a Virtual Earth map with Yahoo! Pipes data

In my previous post, I talked about using Yahoo! Pipes to geo-enable your feed, and about how this opens up endless possibilities with online mapping tools like Google Maps via Google Mashup Editor (GME) and Microsoft Virtual Earth.

So, just to prove how easy it is to do some mapping with RSS data, I did a quick and dirty Virtual Earth webpage based on the example I used in the previous post. You can find the finished webpage online here. Here's a screen capture:


The amazing thing is, it's all HTML and javascripts!

So, here's how I did it. Using a sample from the interactive SDK, I created a Virtual Earth map webpage. The map object, when loaded, will grab a JSON feed from our movie stars Pipes example. We use JSON to go around javascript's same-source policy, which restricts the loading of XML from other sites.

Once the JSON object is loaded, it calls the pipeCallback() method which iterates through the result set for each IMDb actor and director, drawing a customized push-pin icon, and adding an item to the list. Make sure you take a look at the source. Pay attention to the VEMap.AddShape() (and VEShape class) and the VEMap.SetCenterAndZoom() methods. The former is used to add customized push-pins, a star &#9733, and the latter, to set the current longitude and latitude in the result set, as the center of the map.

Taking a closer look at the JSON output and at the javascript, you'll notice that I did not choose to use the "y:location" property to extract the latitude and longitude information. Instead, I used the "geo:lat" and "geo:long" properties, which contain the same information. Embedded in the "y:location" property, however, is more geographical information, with which you can use for all sorts of interesting stuff. Here's a fragment of the "y:location" JSON:


{
"country":"United States",
"city":"Chicago",
"lat":"41.88414",
"lon":"-87.632378",
"quality":"50",
"state":"Illinois"
}


If you chose to use this, your javascript would look like this:


var lat = obj.value.items[x]['y:location']['lat'];
var lon = obj.value.items[x]['y:location']['lon'];
var city = obj.value.items[x]['y:location']['city'];


I know our data is quite trivial, but this sample webpage demonstrates how easy it is to create a rich user interface with maps, using tools already available for you online, and, without needing to host your own server data or tool.