continued

Start the process of adding a map to the page by editing the Maps section of the page.

Click on the little "edit" link on the right-hand side of the page, at the end of the "Maps" section heading line — or just edit the whole page (with the "edit" tab at the top of the page) if there's isn't already a Maps heading.

Here's how the wiki page will look when you've just started editing the Maps section:

Once you're in editing mode, to create a map in the page click on the little "make a map" link just below the row of the editing tool icons. This starts up the map extension within the wiki editing page.

(Macintosh users may have to use the free open source Firefox web browser for map editing, if their version of the Safari browser gives an error message at this point.)

The map extension gives you two navigation options. You can jump in by an address search if you have that information. Or you can graphically zoom and scroll to the map area you'd like, starting from the world overview.

Here we enter the street address of the Urban Ecology Center, and then click "search", to jump in:

The map extension works with the Google Maps server to call up the map area corresponding to that address, and then displays it in the wiki editing page, complete with a marker and caption.

You can directly edit the caption in the bubble, adding the building name and architect, for instance (linked internally with double square brackets).

Click the "save and close" link at the bottom of the caption bubble to save that step and close the caption bubble.

To fine-tune the marker position, you can simply drag the marker around in the map. To refine the map extents, you can zoom and scroll around like any Google Map.

Now, observe that there is a bunch of mappish code on the page, below the map graphic itself. Scroll down a little if necessary so you can see all this text, from its open tag, <googlemap>, through to the closing tag, </googlemap>.

In some ways the wiki technology style is like erector-set-style. While the live in-page graphic editing of the maps is very cool and high-tech, the next essential step is a real throw-back, a bit primitive, or shall we say, "elemental"?

To complete the process — to actually save the map and have it appear in the building wiki page — you have to copy the code from <googlemap> through to </googlemap>, inclusive, and paste that in to the regular wiki text editing field.

Luckily, you don't have to read it or know what it says. Just copy the code as a block and paste it in the text editing field, so it looks about like this:

Then, to finish getting the map onto the wiki page, be sure to save the updated text on the page. Click the usual Save Page button below the text editing area.

To change the style of the map, from satellite photo to street line drawing, or hybrid, use the radio buttons below the graphic map editing area.

After any change to the map with the map editing tools, remember, the entire block of map code needs to be copied and pasted in to the main text editing area. That's the erector set nut-and-bolts part.

To show two map views, such as both a street map and a satellite image, just use the "make a map" tag twice, being sure to copy and paste both blocks of map code into the page text, and then to save the page text to see results.

The maps will show up on the wiki case study building page, something like this:

Cool!

Next we'll collect and add a third-party image to the wiki page.   >>>

Discuss this article in the Architecture Forum...