Channels ▼


Building Google Map Mashups in .NET

User Interface Flow

Double clicking on the GeoMapper application brings up Figure 3.

[Click image to view at full size]
Figure 3: GeoMapper MashUp Main Window.

To navigate to the directory containing my images, select File --> Images Folder from the drop-down menu. When the Browse for Folder dialog pops up, select the folder containing the images. A thumbnail view of the images will be displayed (Figure 3). Single clicking on any thumbnail image will show the chosen image in the selected image area, with its metadata displayed on its right (Figure 4).

[Click image to view at full size]
Figure 4: Image Selection with no embedded GPS location data.

If the selected image does not have any embedded GPS location data, no map is displayed. To add GPS location data to this image, select Images --> Edit Data from the menu. This will bring up a form (Figure 5A).

[Click image to view at full size]
Figure 5: Adding GPS location/Artiste Information to Image Metadata.

The default country and country code is currently set to Singapore. Enter the address and postal code and click on the GetGeoCoordinates button. The GPS latitude, longitude in both decimal and sexagesimal will be displayed in the GPS box. The altitude can be obtained by clicking on the Get Altitude button. Artiste information can also be captured by clicking on the Artist Info tab and filling in the artiste information (Figure 5D). To update the image metadata with GPS location and artiste information, the OK button is clicked. A map is now displayed in the embedded browser (Figure 6).

[Click image to view at full size]
Figure 6: Map associated with image.

A more detailed view can be seen by clicking on the zoom key (+ circled in red) on the embedded browser (Figure 7). Satellite (Figure 8) and terrain (Figure 9) views can also be shown by clicking on the appropriate buttons (circled in red) in the embedded browser.

[Click image to view at full size]
Figure 7: Zoomed Map View.

[Click image to view at full size]
Figure 8: Satellite Map View.

[Click image to view at full size]
Figure 9: Terrain Map View.

When a selected image already contain GPS location data, a map with a location marker will be displayed in the application's embedded browser (Figure 10).

[Click image to view at full size]
Figure 10: Image Selection with embedded GPS location data.

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.