This zoomable map keeps its location list and controls in a
sidebar. I designed the map’s interface to be intuitive, visually
unified, and never cause the map itself scroll out of view.
Stylistic tweaks include custom drop-down selects when editing
locations and inline popups for notifications, password checks,
etc.
The map demonstrates many different web technologies. It was
built with the Google Maps API, which normally draws with
a Mercator projection—that means its maps are centered
at the equator. This works well for most parts of the world, but
makes a mess out of Antarctica, splitting it in half and
stretching it across a map’s bottom edge. I wrote made a
custom projection to show it centered at the pole.
Since the map was already set up to AJAX load terrain
pictures, it made sense to also have it
AJAX load locations for the sidebar. This required custom routines
to read Google Earth KML files. Server scripts make the map
editable, letting a user edit and add locations when signed in.
Clicking on a sidebar entry pops up information on an Antarctic
location. Originally the the browser’s ‘back’ button did not go
back to the last location viewed—instead, it unloaded the entire
map! This is a common problem with AJAX sites—you can load new
information without loading a new page or changing the browser’s
location bar URL, but web browsers only know how to go forward
and backward when the location bar changes. I fixed this by
integrating the Really Simple History framework, which
gives each location its own local URL—also
allowing direct
links to map locations.