Mapper 2.0  5/30/05

The Tinderbox community comes through once again! Not long after I posted a quick exploration of exporting the Tinderbox map view to the web I began getting suggestions and further thoughts. Mark Anderson stepped up and did what I couldn't because of time and expertise-- he figured out how to get Javascript to wrangle Tinderbox's attributes into a proper display. And as this is a debugging process, he found a couple of challenges that I hadn't tested for.

from Mark

Since Mark Anderson doesn't have a blog, I'm posting a bit about the process as he described it to me in email. Basically, rather than have Javascript somehow find and then be able to change the CSS attributes once they're in the page, he used Javascript to build the page.

Clever! That results in code that is much cleaner and a bit less flexible than what I'd contemplated. I'd figured that if the page was exported directly (in its nice-but-miniature form) and javascript was used to *fix* it, then JS could be used to scale it flexibly by changing the multiplier. I suggested that and he then built another version which is ready to 'zoom'.

There were a few other challenges he overcame. For one, it's possible to get negative values for map position... shame on me for not flinging notes to the far reaches of the map view to find that. While it's okay to have negative positioning values in CSS, you don't get to see them-- Mark's code shifts all the values to positive so that notes don't start off the web page. Also, my guesstimation of "3 em" per TB map unit is just that-- an estimate.

I'm so glad he took this on, and that Mark Bernstein apparently chipped in a few suggestions ... as the next t.org post shows, there's no way I could do this coding now.

Here are some other 'gotchas' he described. Did you find them in my code? <grin>

1. You need to set the Map <div> to sit 'absolutely' below the title. I've hard wired this in both the TB (user attributes) and the templates (fixed values) but the latter could be automated.

2. You must have declared the <style> and <div> tags *before* the JS addresses them . This explains the order of some of the tags.

3. CSS 'outset' for buttons doesn't use TB or CSS colours - though you can supply the latter if you could figure how to work shades of the 'chip' colour (too much fiddling IMO). The result is flat colour button 'sides' - not the nice TB emboss shapes.

4. CSS buttons are added outwards (button gets bigger). In TB, the border is applied inwards.

5. The strange check for colour #6f0000 is a trap for TB's undefined colour value. Why #6f0000 I've no idea.

Some Assembly Required

One of the challenges I saw in my initial experiment was to make the solution drag-and-drop, plug-and-play, or what have you. I wanted someone to be able to take it and use it with their existing file and then forget about it. Mark's solution almost (but not quite) does that.

MapMyChildrenJS uses a couple of User Attributes that don't come in a new Tinderbox file, and that means that you have to add them. It's near enough that you can define them once, give them some defaults, and be ready to go, but if your file doesn't have those attributes, the result will be functional but not pretty. In my case the result was too big, and some text wrapped strangely. Not a fatal flaw by any means.

The new attribute is: MapNameFontSize , a number attribute spelled and capitalized exactly so, and with a default of "12". Without this the resulting map seems to be large.

Look at Mark's test file to see some other attributes. Most of them seem to be for testing, but there are a couple more that deserve a look, like TitleFontSize.

MapMe files

There's still no way to get link lines going, which is sad since finding patterns in link lines is a major source of serendipity when using Tinderbox. Since adornments aren't exported at all, there's also no way to display them. Even with those limitations, these templates could work well for the occasional export of a cool map view or for Tinderbox hypertexts which rely on the basic diagramming that the Map View allows.

Note that the file names are different, so if you would like to use the old (flawed) templates I came up with, they're still around. The new files are: