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.

You Don't Have to Have a Web Server

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) and then put the CanvasMap files into a folder in the "C:/inetpub/wwwroot" folder and you'll be able to access your files with a URL that looks something like "http://localhost/CanvasMap/SampleMap.html".

2. If you don't have a web server

If you don't have a web server ready to go, do not worry, the only change you have to make to your code is you have to add a single line to each of your GeoJSON files. We recommend adding a line that appears like:

  • var FileName=

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 using SetURL(URL).

The first tutorial uses data that can operate without a web server but from there you'll need to make the change noted above.

Getting CanvasMap

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. You'll find a number of files and folders. The files are different maps and are part of the tutorials. The folders are as follows:

  • Documentation: Contains this documentation
  • GISData: Contains data for the tutorials
  • Images: Contains images for CanvasMap
  • Includes: These are the JavaScript files and CSS files that make up CanvasMap

You can try the sample maps below and they should work if you are on a web server. If you are running localling, the maps that use data from a URL on a local server will not work until changes are made.