You, Too, Can Create Interactive Maps
2 Mar, 2008 By: Andrew G. Roe,P.E.Even those with no programming training can use the widely available application programming interfaces to create maps.
Most of us are fairly adept at working with maps. After all, the GIS, engineering, and architecture fields are largely focused on drawings, maps, and associated data. Likewise, most of us have probably used Web-based mapping services such as Google and MapQuest to find directions to a restaurant, and shared this information by copying and pasting screenshots, driving directions, and Web links.
But did you know you can publish your own interactive maps and embed them in a personalized document or Web page? The technology has become more accessible in recent years, so you don't need to be a Web programmer to create an interactive map — one that allows you to zoom and pan in real time.
The Technology
First, let's review how the technology works and how it has evolved to become so accessible. For those who are intimidated, bored, or nauseated by anything related to computer programming, I promise to be brief. If you can make it through this article and copy and paste text, you should be able to handle creating an interactive map. For those of you familiar with Web programming, much of this will likely be review.
Web pages are typically driven by HTML (hypertext markup language) code. The flashy pictures, maps, and text you see on Web sites are supported in the background by code that determines how the items appear. In the early days of the Internet, programmers had to generate hundreds of lines of code to build a simple Web site. Development tools introduced in the late 1990s simplified Web development for the masses and put many professional Web programmers out of work.
In 2005, Google released an application programming interface (API) for Google Maps and published an online user guide. The Google Maps API enables you to add an interactive map to a Web page or other document by generating some fairly simple JavaScript code. What's JavaScript? In short, it's a programming language that helps process and integrate HTML data.
Google wasn't the first to offer this capability, and others have also followed suit. MapQuest also has an interactive API and last year introduced an updated version, Advantage API 5.1, which enables you to create and interact with custom lines and shapes such as polygons, rectangles, and ellipses. The University of Minnesota Mapserver offers even more capabilities, albeit with a steeper learning curve. The Open Geospatial Consortium provides access to a wide variety of open-source JavaScript code and public data sources.
The Google and MapQuest APIs come with some licensing restrictions. Google, for example, will issue you a free code to publish interactive maps on Web sites that are free to consumers and generate no more than 15,000 geocode requests per day.
Try It Right Now
For demonstration purposes, let's look at the GoogleMaps API. All you need to try this is a text editor and a Web browser. In your text editor (Notepad or something similar), copy and paste the following code into a blank file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="http://maps.google.com/maps?file=api&v=1&key=[your API key]"
type="text/javascript"></script>
</head>
<body>
<div id="map"
style="width: 500px; height: 500px; border: 1px solid #979797">
</div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-93.15, 45), 6);
//]]>
</script>
</body>
</html>Save the file as a text file, but with the extension .htm (e.g., GoogleMapTest.htm). Open the file in a Web browser, and you should see a map of the Minneapolis–St. Paul area.
 After using the code to pull up this map in a browser, you can use Google's panning and zooming tools just as you would on Google's Web site. |
How does it work? Without diving into too many details, we see that the first few lines of code specify that this is JavaScript code and access Google's Web site to obtain access to the Google Maps API. The API exposes programmable objects that can be accessed and manipulated through code. For example, the GSmallMapControl object is the control in the upper left corner of the map that allows you to pan by clicking on the arrow buttons and zoom by clicking the + button. The GPoint object specifies the latitude and longitude of the location displayed, followed by the zoom level. Change these values to your location to see how it works.
Google has simplified the process even further by providing a link that allows you to copy and paste HTML code without even opening a text editor. (Click "Link to this page" on the Google Maps Web site to try that out.)
For more complex applications, programmers are now using Asynchronous JavaScript and XML (AJAX), which exchanges segments of data behind the scenes so that entire Web pages do not have to be reloaded each time data is requested from the server. AJAX is not a programming language, but a group of inter-related techniques for increasing responsiveness and interactivity of Web pages.
And the possibilities expand from there. You can embed interactive map links in Web pages, CAD drawings, spreadsheets, and word processing documents. You can also add other controls and capabilities with a little more JavaScript programming. We'll look at more complex applications in future columns, but for now, perhaps this primer triggers some ideas for your own use.
For Mold Designers! Cadalyst has an area of our site focused on technologies and resources specific to the mold design professional. Sponsored by Siemens NX. Visit the Equipped Mold Designer here!
For Architects! Cadalyst has an area of our site focused on technologies and resources specific to the building design professional. Sponsored by HP. Visit the Equipped Architect here!
|
|
|
