<!-- ------------------------------------------------------------------------
--
-- This file was created by rjc from system/tutorial_mapping/intro/index.html
-- on 2003/08/27 09:13:45.
--
-- Copyright 1999-2002 Interactive Information Ltd, All Rights Reserved
-- http://information.overlaid.com
--
-- ------------------------------------------------------------------------
--
-- Version: 2.3.0 for Map Weasel
--
-- --------------------------------------------------------------------- -->
<head>
<title>Introduction</title>
<script src="../tutorial.js"></script>
<script src="../tutorial_structure.js"></script>
</head>
<body bgcolor="white"
text="midnightblue"
link="#9d0052"
alink="#39c8ff"
vlink="#9d0052"
>
<img align=right width=150 src="../../media/white-bg.gif">
<h1 align=left>
Map Weasel Tutorial<br>
<small>Introduction<br>
(<small><small>Copyright 1999-2002 Interactive Information Ltd</small></small>)<br>
</small>
</h1>
<pre>
</pre>
<p>
Map Weasel is a package of software and mapping designed to
make it easy for you to add sophisticated mapping to your
website.
<h2>The Structure of a Mapping Application</h2>
<p>
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.
<p>
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.
<p>
<div align=center>
<table border=1 cellpadding=5>
<tr><td><img src="structure.gif">
<h3 align=center>
System Structure
</h3></td></tr>
</table>
</div>
<p>
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.
<p>
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.
<h2>The Tutorials</h2>
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.
<P>
The tutorial also uses three smaller windows.
<DL>
<DT>Explanation Window
<DD>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 <em>have</em>
an example application, you will only see the it if you
<A HREF='tutorial.html' target=tutorial
OnClick='parent.tutorialLink(this); return(false)'>
click here</A>.
<DT>Code Window
<DD>This displays an annotated version of the HTML and JavaScript
that make up the example application
<DT>Comment Window
<DD>This will, if requested, display more detailed commentary on
something in the Code Window.
</DL>
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: <b><a href='blankpage_source.html#S2' onClick='return sourceLink(this);'>[blankpage:S2]</a></b>,
and if you have chosen to
<A HREF='blankpage.html' target=tutorial
OnClick='parent.tutorialLink(this); return(false)'>
open the Explanation Window</A>,
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
<tt>More Information...</tt>)
which display detailed commentary in the Comment Window.
<p>
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.
<P>
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.
<h2>What To Do Now</h2>
Map Weasel uses a number of familiar terms in
specific ways. Please take a few moments to
look through
<A HREF='../glossary.html' target=glossary OnClick='return parent.tutorialLink(this);'>The Glossary</A>.
<p>
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 `<tt><b><i>/</i></b></tt>' rather than the Windows `<tt><b><i>\</i></b></tt>'. Thus this page
is <tt><strong>tutorial/index.html</strong></tt>.
Make sure that
you can find this file, so that you will know
how to find parts of the tutorials later on.
<p>
Once you're sure you can find the files, it is time to
move on to the first tutorial:
<script>
var next = tutorial_info["intro"][1];
var ninfo = tutorial_info[next];
if (ninfo != null)
document.writeln("<a name=nextlink target='_top' href='../"+next+"'>"+ninfo[3]+"</a>");
else
document.writeln("Unknown!")
</script>
<div align=right>
<tt><strong>tutorial/intro/index.html</strong></tt>
</div>
</body>