CanvasMap
Getting Started Tutorials 3D Reference

Getting Started with Your Own Maps

To start, download the Examples file and save it either to a folder in your web server folder (e.g. "wwwroot") or your desktop. This folder contains the examples you've seen on the CanvasMap web site. In the folder, double-click on the Geographic_World_Countries_Rivers_Cities.html file and it will open in a browser. The map should work even if you are not running in in a web server folder. This is because all of the files used by the web page are pulled from one of our servers (see the "https://gsp.humboldt.edu" in front of all the file include paths). We do recommend moving to a web server solution as soon as you can to remove the problems that come with trying to access data on the Internet without running under a server. Until then, about all you can do is change the settings in the web page and change the URLs for the data you are accessing but the data will have to be hosted on a web server. You may want to setup your own web server on your computer as described in one of the tutorials in the "Special Topics" section at the bottom of the previous web page.

Debugging in a Browser

We're about to edit an HTML page that includes JavaScript. You are going to make mistakes at some point and staring at code is just not the fastest way to fix problems. All major browsers now include integrated source code debuggers which is awesome!

With your page open in a browser, find the debugger:

These debuggers are a bit different from each other. I prefer Chrome's so the instructions below will be for Chrome but all the debuggers are similar.

Across the top you should see "Sources" and "Console". The "Sources" tab will show you your code and allow you to set breakpoints and "step" through your code (more on this later). The "Console" tab will show you errors and then you can click on the errors to go right to the line of code that created the error. For now, we'll just use these two features of the debugger and you'll want to leave it open while editing your pages.

Editing a Map

Open an HTML editor or a text editor like NotePad++ and then open the Geographic_World_Basic.html file. This is similar to the map you've been editing within these tutorials with a little HTML added above and below the map. Try changing the contents of the HTML and then refreshing the web page to make sure you're editing the same page that is displayed in the browser.

Try changing the style of the map in the same way we did in the earlier tutorials. Spend a bit of time with this until you are comfortable editing the file and changing styles.

Minified, Complete, and Individual CanvasMap Files

At the top of the examples, you will see a line to include the CanvasMap files like the following:

<script src="https://gsp.humboldt.edu/CanvasMap/js/CanvasMap.js"></script>

This is a JavaScript file that contains all of the latest core CanvasMap code in one file. This is the file you will typically want to use was you develop your files because you can see the CanvasMap code for debugging. Once you have completed your maps, you can switch to the Minified version "CanvasMap_Min.js". If you want to see the individual files, you can include each of the files that are in the "js" folder in the "CanvasMap" folder.

Versions of CanvasMap

All the versions of CanvasMap are archived on our server at GSP.Humboldt.edu. You can see them on the web at:

https://gsp.humboldt.edu/Archive/CanvasMap/

We recommend working with the latest version and sticking to it until there is a version released with new features or defect repairs that you want to take advantage of.