Channels ▼
RSS

Tools

Building Google Map Mashups in .NET


Adelene Ng is a senior staff software engineer with Motorola. She holds a Ph.D. in Computer Science from the University of London. Adelene can be contacted at ng_a@hotmail.com.


Google Maps is a free web mapping service from Google that powers many map-based services, including the Google Maps website and embedded maps on third-party websites via the Google Maps API. Google Maps offers street maps, a route planner, and an urban business locator for numerous countries around the world. With the Google Maps API, you can easily incorporate the Google Maps technology into a custom website. In this article, I create a mashup application called "GeoMapper" to explore a number of technologies used to display the map location of a photograph that has GPS embedded metadata. All digital photographs today embed the camera settings and scene information as metadata. The specification for this metadata is the Exchangeable Image File Format (EXIF). Examples of stored information include shutter speed, exposure settings, date and time, focal length, metering mode and whether the flash was fired. In addition, some digital cameras are GPS-enabled. This means the camera comes with a built-in GPS receiver. Pictures taken with such units will have their GPS location data embedded in the photos as EXIF. For non-GPS cameras, pictures can also be geotagged by getting a GPS module that connects to the camera. Once the photograph is geotagged, its location (map, satellite or terrain) can be displayed via Google Maps. For non-geotagged images, given the address, postal code and country, the GPS information can be queried via the Google Maps Web Service and the data returned can then be stored as part of EXIF metadata associated with the image in question. The newly geotagged photograph's location can then be displayed via Google Maps using the embedded browser. The complete source code and related files for GeoMapper are available here.

To create the GeoMapper application, I use a number of open source libraries, applications, and web services, including:

  • ExifLibrary for .NET
  • Exiv2
  • Google Maps Web Services
  • GeoNames Web Services
  • NLog

The idea behind GeoMapper is to take the embedded GPS location data (if any) within the image file and associate this with a street map. This lets users view the location of where this image was taken. If the image does not have any embedded GPS location data, the application lets users enter the street address and postal code together with the country where the picture was photographed. The application then retrieves the latitude/longitude values. The image file can then be updated with this GPS location data and the corresponding street map displayed.

To extract EXIF information, I used the ExifLibrary for .NET. Granted the .NET Framework already has utilities to extract EXIF information, but those utilities only return raw data and tags. More processing is required for this information to be used in this application. For example, if I wanted to extract shutter speed information, I would need to know the tag number, extract the tag, and then convert the data from ASCII to a number. The ExifLibrary for .NET abstracts away all these steps from the programmer.

In addition, I used Exiv2 to write International Press Telecommunications Council (IPTC), Extensible Media Platform (XMP) and EXIF photo metadata back to the selected image. I also utilize the Google Maps HTTP geocoding service to retrieve latitude and longitude information. This is a REST (Representational State Transfer) query. All the parameters that are passed to the webservice are included within the query string of the request. The base request URL is http://maps.google.com/maps/geo?. Likewise, for the retrieval of altitude information, I use the base REST query to http://ws.geonames.org/. Additional parameters are passed to this REST query to specify which digital elevation model to use. Once the GPS location information is made available to the image, the map associated with the selected image is displayed via the http request, http://maps.google.com/maps?q=<latitude>,<longitude>.

To display the thumbnail view of images from the image folder, I integrated Marc Lievin's Image Thumbnail viewer. For logging and tracing, I use NLog, a logging library that is simple and flexible to use, with a programming interface similar to Apache log4net. I use this to write all diagnostic messages to a file for logging and tracing purposes. Finally, I developed the application in Visual Studio using C#.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video