Channels ▼
RSS

Web Development

MyMap: A Portable API for Maps

Source Code Accompanies This Article. Download It Now.


Lionel is a software architect at C2S, a software company based in France and a subsidiary of the Bouygues group. Lionel is also the author of Liogo, an open-source Logo compiler for .NET. Lionel can be contacted at llaske@c2s.fr.


A client who sells real estate wanted us to add interactive maps to his web site to showcase his listings. We immediately thought of using Google Maps. This seemed to be a good choice because it's free and popular. But for how long? Or what if Google decides to add advertisements on its maps? Of course, our client could always switch to another map provider, Yahoo Maps or Microsoft Virtual Earth, for instance, but at what cost?

Because Google, Yahoo, and Microsoft come with similar features, it occurred to us that a "portable" layer would let a web site switch from one map provider to another with a minimum change to source code. This is what I discuss in this article.

Most web sites that support interactive maps have similar features. If we want our portable layer to handle them, it should be able to:

  • Create maps. A map is an image in an HTML page. All providers use the HTML SPAN tag and provide some JavaScript functions to initialize the content of this tag with a map.
  • Set map modes. All map providers support at least three display modes: map (roads only), satellite (satellite imagery), or mixed (two previous modes combined).
  • Set a position on the map. We need a method to show a specific position on the map. The map is centered on that position.
  • Zoom in/out.
  • Add/remove markers. The main interest in using interactive maps is to see one or several items' location. A marker is an icon that you place on the map for this purpose.
  • Geocoding. Locations are usually stored as postal addresses. To place markers for those locations on a map, we need their coordinates (latitude/longitude). Converting a postal address to latitude/longitude coordinates is exactly what "geocoding" does.
  • Display marker information. Clicking on markers should display some detailed information in a tooltip (customer details, a link to a given page, and so on).
  • Delete maps. Map resources should be freed before unloading the page.

MyMap

MyMap is the portable API I created to display maps in a web site with either Google Maps, Yahoo Maps, or Microsoft Virtual Earth. Here is the pseudointerface of this API in JavaScript. Each function matches one of the aforementioned features.

void MyMapGeocode(address, callback);
void MyMapInitialize
    (mapname, lat, lng, zoom, mode);
Object MyMapAddMarker
    (lat, lng, markertype, info);
void MyMapRemoveMarker(marker);
void MyMapSetZoom(zoom);
void MyMapGoto(lat, lng);
void MyMapTerminate();

Table 1 shows the provider-specific object to use and the methods to call for each feature.

Google Maps Yahoo Maps Virtual Earth
MyMapGeocode GClientGeocoder.getLatLng YMap.geoCodeAddress VEMap.Find
MyInitialize GMap2.setCenter YMap.drawZoomAndCenter VEMap.LoadMap
MyMapAddMarker GMarker YMarker VEPushPin
GMap2.addOverlay YMap.addOverlay VEMap.AddPushPin
MyMapRemoveMarker GMap2.removeOverlay YMap.removeOverlay VEMap.DeletePushPin
MyMapSetZoom GMap2.setZoom YMap.setZoomLevel VEMap.SetZoomLevel
MyMapGoto GMap2.panTo YMap.panToLatLon VEMap.SetCenter
MyMapTerminate GUnload
Table 1: MyMap functions for each map provider.

I've implemented this interface for each provider in the respective files mymap_google.js, mymap_yahoo.js, and mymap_vearth.js. (These files are available electronically; see "Resource Center," page 5). Your web application needs to include the appropriate file depending on your map provider.


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.
 
Dr. Dobb's TV