Map Weasel Tutorial
Introduction
(Copyright 1999-2002 Interactive Information Ltd)

Map Weasel is a package of software and mapping designed to make it easy for you to add sophisticated mapping to your website.

The Structure of a Mapping Application

When you build your mapping application, you will create a number of web pages. In at least one of those pages will include some of our map-handling software: the Easel applet (a Java program which displays the maps) and some Javascript code that goes with it.

The applet knows how to fetch the maps it can use and dislay them in a web page. So when you are building your application, you can just imagine that all the maps you will be using are stored inside the applet: you simply have to tell it how you want it to use them.

System Structure

Building your map-based interface is mostly a matter of writing a small amount of Javascript to control the applet and tell it what data you want plotted on the map, and how that data should appear. You can also specify how the maps and things displayed on them react to user actions, such as clicking with the mouse.

The standard JavaScript libraries we supply with Map Weasel handle all the details of interacting with the applet. They provide a framework for building interfaces that lets you create sophisticated applications just by writing a few small functions in Javascript.

The Tutorials

Each tutorial (except this one!) is based around a simple example application of Map Weasel. This appears in this main window, alongside some instructions, so that you can try it and see how it behaves.

The tutorial also uses three smaller windows.

Explanation Window
This contains a detailed description of how the application was programmed to do what it does. For most tutorials, the Explanation Window opens automatically when the example application starts, but since this tutorial doesn't have an example application, you will only see the it if you click here.
Code Window
This displays an annotated version of the HTML and JavaScript that make up the example application
Comment Window
This will, if requested, display more detailed commentary on something in the Code Window.
Where the tutorial text refers to a particular feature of the application, it contains a link which will display the actual code in the Code Window. Here is an example link: [blankpage:S2], and if you have chosen to open the Explanation Window, you will see some others. Although for this tutorial those links only relate to some rather pointless text, they do show how comments in the Code Window include links (marked with More Information...) which display detailed commentary in the Comment Window.

These four windows --- the main Application Window, the Explanation Window, the Code Window and the Comment WIndow --- will in turn let you explore what the example application does, tell you how it was built, let you see the code that does it, and give you more details on that code.

Finally, each tutorial suggests some short exercises. Most are based on making simple changes to the tutorial examples. Doing them will help you learn how and where you can change things to achieve a particular effect. This will make it easier for you to use one or other of the examples as a starting point for building your own map-based interfaces.

What To Do Now

Map Weasel uses a number of familiar terms in specific ways. Please take a few moments to look through The Glossary.

To help you find the various files in this tutorial, the names of files you might want to view or edit are given at the bottom right of the page. The file names start from wherever you installed the Map Weasel distribution, using the Web convention of separating parts of the name by `/' rather than the Windows `\'. Thus this page is tutorial/index.html. Make sure that you can find this file, so that you will know how to find parts of the tutorials later on.

Once you're sure you can find the files, it is time to move on to the first tutorial:

tutorial/intro/index.html

intro/index.html