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.

• 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
• 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 Custom Elements - How to add your own elements on top of the CanvasMap
• 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.
• 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.

There is additional data for the tiled maps and census map available here

Web Servers

CanvasMap tyipcally requires a web server to run. You can modify your JSON files to allow CanvasMap to run locally on a computer without 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) 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 "http://localhost/CanvasMap/SampleMap.html".

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

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

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

• 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)

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 B16 - Fixed a problem with old tile sets not drawing.
• CanvasMap B15 - Contains additional tutorial information. Further checking was added to keep the browser from requesting tiles that are not there.
• CanvasMap B14 - Fixed problem with OSM tiles having a "gap" in FireFox. They also now display at fractional zoom levels (e.g. 1.5). Also limited the "zoom to" range to the MaxBounds if set in the current view.
• CanvasMap B13 - Fixed problem with the popup window's "triangle" being off of the mouse position. The new implementation requires two files "triangle_up.png" and "triangle_down.png" that are in the images folder.
• 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.

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

When you have CanvasMap installed and the samples above working, move on to the "Tutorials" page.