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 Setting the Map Extent

3. Styling Data In A Map - colors, lines, fills, marks, and icon images

• 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

• 5.1 Setting Up For Creating Your Own Maps

• 5.2 Adding Vector Data

• 5.3 Setting Properties

• 5.4 Adding Raster Data

6. Google Mercator and OpenStreetMap Tiles

• 6.1 Projecting data to GoogleMercator

• 6.2 OpenStreetMap Tile Layers

• 6.3 Making the Map Resizable (change sticky code when we move it to CSS)

• 6.4 Changing the Contents of CanvasMap Elements

7. 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.

• 7.1 A Minimal Map

• 7.2 Setting the allowable zoom range and map extent

• 7.3 Adding Layers on Top of Layers (unfinished)

• 7.4 Adding a Scale Bar

• 7.5 Adding a custom coordinate element that updates on MouseMove

• 7.6 Changing the Scene's Background Color

• 7.7 Accessing attributes to create a custom information box

• 7.8 Giving each feature a unique style with SetFeatureProperties()

• 7.9 Adding custom controls to change the map (Population/GDP)

8. Creating a UTM Map (US Historical)

• 8.1 Creating a UTM Map with a Tiled Raster Background

  8.2 Creating a UTM Projector

• 8.3 Adding Points with Images as Icons

9. Working with Large Data Sets

• 9.1 Displaying Different Resolution Data Set at Different Zoom Levels (done?)

• 9.2 Raster Pyramids II

• 9.3 Vector Pyramids

10. Overriding Events

• Interacting With Other Elements (done?)

11. Animation (done?)

Create and control simple animations with CanvasMap.