A bit of diversion from my typical posting. I've been tinkering with the site for the Handbook and wanted to share a bit of the process and design that went in to some eye candy.
As I explained in my previous posting, I'm trying to achieve a regionally-balanced coverage for the Handbook. To make that balance manifest, my vision was to include a map of the world, adorn it with push pins representing the location of each system, and then provide a mechanism for navigating from each city to individual systems found at that location. When I set out, I had absolutely no idea how I was going to do this, but rather I expected that when the time came, I'd find a way.
A couple of nights ago, having slogged through enough paper and itching to do some programming, I decided that the time had come. Some time ago, I'd decided upon a suitable map which I then purchased from The Living Earth, a satellite composite of a cloud-free world in a cylindrical projection.
My next task was to build a suitable data model to manage locations. I'm using MySQL for the site, behind which lies a database with a modest schema consisting of about five normalized tables (which, of course, I'd modeled first with Rational Software Architect). One of those tables provides an abstraction of each system, including its name, genre, type, status, and location. The location key points to another table that collects city, state, and country names, together with simple Cartesian coordinates representing each location's placement on a given map.
Before connecting the database to the page containing the map, I did a few experiments to settle on a simply way to render the pushpins and provide a popup menu for each. In Photoshop I whipped up a 5x5 pixel graphic for the pushpin and then used a div tag to position that image on the map. Next, I needed to attach a popup menu to that graphic, which Dreamweaver made trivial, as this was a behavior that one could drop in with a simple wizard. Studying the code that was plopped in, I simplified it a bit by hand, tweaked the appearance, then declared victory for this experiment: I knew that what I wanted to render was possible.
That finished my coding task, leaving me only to set the X/Y location of each city/state/country, an effort that I eyeballed with the help of maps from Encarta and Yahoo.
You can see the results here (remember, you'll need to be logged into the Handbook first).
Fun With Maps
gbooch 120000P81R 658 Visits