PointMapper is a scriptable mapping component that can be embedded freely on web pages. Its JavaScript API includes functions to load maps and map layers, to display marks at specified latitudes and longitudes over the current map, to highlight marks, to draw lines and polygons, to set JavaScript callbacks to handle clicks on marks, and to download positions for marks, lines, or polygons in XML from a web server.

As such, PointMapper provides a flexible, low-cost ($40), and light-weight approach to web mapping that allows authors to integrate mapping into their pages as they see fit. Since pointMapper places control of map state and handling of user interaction at the client rather than the server, it provides the foundation for developing mapping applications using the popular client-centered AJAX (Asynchronous JavaScript and XML) style of web application development. The usual benefits of the AJAX approach are realized: user interaction with the map can be freely choreographed to suit the application, with crisp response and minimized server traffic.

This page includes an annotated example.

Requirements (Authoring)

To include pointMapper maps in your pages, you need (1) a web server on which to install the pointMapper server-side kit (any server will do), and (2) rudimentary HTML and web scripting skills. No additional mapping software or expertise is needed.

Requirements (Viewing)

Pointmapper relies only on Javascript and the ubiquitous Macromedia Flash player. No specialized software need be downloaded to the client browser for viewing the pointMapper maps. PointMapper maps are represented in the Flash vector format, and contain an order of magnitude more detail per kilobyte of download than the raster maps typically found on the web. For example, the download size of the Manhattan map below is only 67 kilobytes.

Image Annotation with pointMapper

PointMapper supports map projections (allowing points to be specified in latitude and longitude) and compact vector maps, but it also includes options for displaying images without projection data, and images in the JPEG format (any non-progressive jpg can be used). When projection information is missing, point locations are specified by image coordinates rather than latitude and longitude. So, PointMapper can be used as an image annotation tool, as well as a mapping tool.

An Annotated pointMapper Example

The map to the right was included on this page by the following HTML:

<script type="text/javascript" language="JavaScript">
var pm_class = "whatismap";// style properties for the map 
var pm_color = "FFFFee";// background color for the map 
var pm_location = "pointmapper/2.0";// pointMapper location with respect to this file location
</script>
<script type="text/javascript" language="JavaScript"
src="pointmapper/2.0/m.js">// loads pointMapper 
</script>
<script type="text/javascript" language="JavaScript">
pm_loadMap('../basemaps/manhattan.1.xml');//loads the map (path relative to pointMapper)
</script>

Please click on the links that follow in the order in which they appear in the document. This link shows a location on the map: American Museum of Natural History. Here is the HTML that implements the link:

<a href="javascript:pm_setLatLong(40.7814,-73.974);">

American Museum of Natural History</a>

In the examples below, the javascript call itself serves as the link text, eg

pm_setLatLong(40.7814,-73.974);

And here is a call that removes the highlighted point (called the "indicator").

pm_hideIndicator();

To load a set of points from an XML file:

pm_loadPoints('../../lowermanhattan.xml');

The XML file contains one element for each point to be displayed, and assigns a latitude, longitude, identifier, and optional rollover text. The details should be apparent from this example.

Another call is available that displays a set of points in a javascript array, instead of loading them from XML (so XML is not required for this effect).

pm_zoomXY(0,100,-331,-250);

zooms into a particular area of the map (zooms can be given in either latitude/longitude or image coordinates; the Manhattan map is tilted from the North/South axis, so the latter works better).

pm_highlight(14);

highlights the point with id "14" (in this case, the New York City Fire Museum)

And to complete our example, the following script sets a callback for clicks on dots:

<script>
function exampleCallback(dotid)
{
   alert("Callback:"+dotid);
}
pm_setSelectionCallback(exampleCallback);
</script>

Note that this callback is invoked when you click on dots, because the script above appears in the HTML for this page.