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 release.
- CanvasMap B5 - Completed support for optional properties
- CanvasMap B3 - Includes additional information in the "Reference" section of the documenation and corrections in the tutorials. Also fixed the jQuery error.
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 all of them, except the first one, 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.
- Simple Map to Set Data from a Local File - only uses local data. must open this as a file (double click on it in your file explorer)
- Simple Map to Get Data From a URL - this and the other examples here, require a web server (e.g. "localhost" or a domain name).
- Resizable Map - a map that resizes to fit the browser window and also has selectable backgrounds
- 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.
- Map to Project Geographic Data to Google Mercator
When you have CanvasMap installed and the samples above working, move on to the "Tutorials" page.
There is additional data for the tiled maps and census map available here.