
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.
Learning CanvasMap
The first three tutorials will get you familiar with how CanvasMap works and how to control it from JavaScript. Then, download CanvasMap from one of the links below and go on to tutorial 4 where you will add your own data to your own CanvasMaps.
Example Maps
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).
- Simple map - a static map made wtih just a global countries shapefile
- 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
- US County Census Map - A Map with a Bunch of Features From CanvasMap
- Global Country Map - A web mercator map with charts for population
- Historical Map of California - Shows how to add points in the client-side JavaScript code (a work in progress).
- States of the USA - Shows animation using feature zoom level properties.
- Resizeable Map with Sticky Elements - How to add your own elements on top of the CanvasMap
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
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).
To learn how to setup a web server on your local machine, go to the bottom of the tutorials page and view the tutorial on "Setting Up a Web Server".
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.
- CanvasMap B12 - Fixed the error on pressing the "Home" button, fixed issues with the info box and polyline layers, added optional mobile device support with the Hammer.js library (tutorial on this coming soon). Also did some improvements on the tutorials and examples.
- CanvasMap B11 - Added a resize example with sticky elements
- CanvasMap B10 - Additional documentation and examples.
- CanvasMap B9 - Added an animated tutorial
- CanvasMap B8 - Rolled the tutorials and upgraded the US Census example with ColorBrewer colors, an in map legend, and other features. I have not completed the new tutorials and let me know if you have additional suggestions.
- CanvasMap B7 - Added "Country" example with dynamic chartss
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:
- 3D: Three D JavaScript in development
- 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
- At the root are some test files that you are welcome to look at if you like but these are where I do testing and development and they will be replaced by templates in the beta release (coming sometime before next fall!).