1. Introduction to CanvasMap

This tutorial will show you examples of maps that "flow" with content and "resizeable" maps and the full, default, interface for CanvasMap. The following tutorials will show you how to customize aspects of the map and add your own data.

2. Layer Names and Map Extent

• 2.1 Changing Layer Names

• 2.2 Zooming to an Area

3. Styling Data In A Map

How to change the fill color, line color, marks, and icon images for map data.

• 3.1 Styling a polygon layer

• 3.2 Styling a polyline layer

• 3.3 Styling a point layer

4. Design of CanvasMap

• 4.1 Structure of a CanvasMap Web Page

• 4.2 DOM Elements in CanvasMap

• 4.3 JavaScript Classes and Objects

5.Creating Your Own Maps

How to create maps with your own data, work with CanvasMap settings, and add labels and rasters to maps as in the geographic map of Africa example .

• 5.1 Setting Up For Creating Your Own Maps

• 5.2 Adding Vector Data

• 5.3 Setting Settings

• 5.4 Giving Each Feature a Unique Style

• 5.4 Labels and Collision Checking

• 5.5 Adding Raster Data

6. Customizing the look of the map

How to change the appearance of the may by turning elements on and off, stylizing them with CSS, and changing the contents of the map elements as in the thematic Africa map example.

• 6.1 A Minimal Map

• 6.2 Changing the Background Colors

• 6.3 Limiting the Area the User Can View

• 6.4 Adding Layers on Top of Layers

• 6.5 Adding a Scale Bar

• 6.6 Adding a custom coordinate element that updates on MouseMove

• 6.7 Accessing attributes to create a custom information box that updates on MouseDown

• 6.8 Giving Each Feature a Unique Style From a Legend

7. Google Mercator and OpenStreetMap Tiles

How to create a simple map with the Google Mercator (a.k.a. Web Mercator) projection and backgrounds that use the OpenStreetMap tile standard. Then, how to add custom elements to the map to control the foreground and background layers.  Then, how to make maps resizable and how to add tools for drawing rectangles, ovals, and polygons.

• 7.1 Projecting data to GoogleMercator

• 7.2 OpenStreetMap Tile Layers

• 7.3 Making the Map Resizable

• 7.4 Changing the Contents of CanvasMap Elements

• 7.5 Adding Custom Controls to Control the Visiblity of Layers

• 7.6 Adding Drawing Tools
  

8. Creating a UTM Map

How to create maps in any projection, add north arrows and graticules, and add custom points using JavaScript.

• 8.1 Creating a UTM Map

  8.2 Creating a UTM Projector

• 8.3 Adding Points with Images as Icons

• 8.4 Adding North Arrows and Graticules

• 8.5 Putting CanvasMap Web Pages into other Web Pages with iframe Tags

9. Working with Large Data Sets

How to keep your maps running with increasingly large datasets.

• 9.1 Displaying Different Resolution Data Set at Different Zoom Levels

• 9.2 Raster Pyramids II

• 9.3 Vector Pyramids (Needs to be updated)

10. Overriding Events

• 10.1 Interacting With Other Elements

• 10.2 Making layers hidden, unselectable, and editable

11. Animation

Create and control simple animations with CanvasMap.

• 11.1 Introduction to Animation

• 11.2 Animating Spatial Data