CanvasMap
Getting Started Tutorials 3D Reference

Getting Started

CanvasMap is a very flexible and relatively easy to use JavaScript library for publishing interactive and "static" maps on the web.

This documentation does assume that you are somewhat familiar with HTML, the DOM, and JavaScript. It also helps to have experience with one of the browser based debuggers and working with classes in JavaScript.

Example Maps

Below are example maps that show you some of the capabilities of CanvasMap. Check out the examples now. After you download CavnasMap, you'll be able to use these examples as starting points for your own maps.

  1. Simple Map - this and the other examples here, require a web server (e.g. "localhost" or a domain name). See below for more information on web servers.
  2. Map of Africa with Custom Feature and Attribute Settings - shows how to modify the map with directly changing settings for features and using attributes to change settings.
  3. Map of Africa that is Interactive but Static - Shows how to make the map static (can't be moved) and change symbology based on user input.
  4. Resizable Map - A map that resizes to fit the browser window and also has selectable backgrounds.
  5. Resizeable Map with Custom Elements - How to add your own elements on top of the CanvasMap.
  6. Map in UTM Projection - Shows how to create maps in any spatial reference and how to add graticules and north arrows.
  7. US County Census Map - A map with information displayed outside the map area.
  8. Global Country Map - A web mercator map with charts for population.
  9. Historical States of the USA - Shows animation using feature zoom level properties.
  10. Map to Project Geographic Data to Google Mercator - CanvasMap does all GeoJSON data to be projected on the fly but it's not really recommended for performance reasons.
  11. A map with pyramided data - note that the pyramided data is quite large so this demo only runs from our web server. You can create your own pyramided data withe BlueSpray.

The examples are available here. Download the examples and CanvasMap (below) and unzip them into the same folder to use them.

Web Servers

A web server is required to have a web site hosted on the World Wide Web (a.k.a. The Internet). Your organization may be able to provide a web server for you or you can use one of the hosted solutions available on the Web. You can also use your local computer for initial development and testing of your maps.

1. If you have a web server

If you have a web server setup and ready to go, you can use all the CanvasMap samples and tutorials as they are. Note that most modern operating systems, including MS-Windows, allow you to setup a web server on a regular workstation and develop web applications without having a full web server with a static IP address. On MS-Windows, use the web to find the latest information on installing Internet Information Server (IIS) for your version of MS-Windows and then put the CanvasMap files into a folder in the "C:/inetpub/wwwroot" folder. Then, you'll be able to access your files with a URL that looks something like "https://localhost/CanvasMap/SampleMap.html".

2. Hosted Solutions

There are a number of web sites that allow you to create your own web site including maps based on CanvasMap. We use Reclaim Hosting which focuses on educational web sites. There are a large number of other hosting solutions including DreamHost and GoDaddy.

3. Running CanvasMap Locally

All MS-Windows and LINUX based computers support web server software. In MS-Windows, you'll need to install Internet Information Server (IIS) and on LINUX you'll need Apache. This will take some time to setup and we do recommend getting some help and advice as web server software can create security issues.

4. Running CanvasMap without a Web Server

Until you have acess to a web server, you can run CanvasMap without a server by adding a variable name to the start of your JSON files:

Where "FileName" is the name of the file. This turns you regular GeoJSON file into a big JavaScript object stored in the variable named "FileName". Then, all you have to do is specify "FileName" in the SetData(FileName) function call when you setup your layers instead of setting a URL.

Below is a sample that shows how to setup files to work localy on your computer without a web server:

Getting CanvasMap

Version 2 of CanvasMap

The new version of CanvasMap includes an updated internal architecture, and some support for animation. The files have been reorganized and the design simplified and made consistent. All of the design elements of CanvasMap except the DOM Canvas element width and height have been moved into a CSS file. The Canvas element width and height cannot be set from CSS so it is placed inside a DIV tag which can have CSS tags and CanvasMap will automatically fit the Canvas element to it's enclosing DIV tag. If you are updating from the previous version of CanvasMap, you'll need to make the following chnages to your HTML files:

First, you'll want to download the CanvasMap "Zip" file from the list below. You'll usually want to get the release that is at the top of the list which is also the latest reelase.

Then, decompress it onto a folder in your web-root folder.