Getting Started with Your Own Maps

Now is the time to download CanvasMap from the "Getting Started" page if you have not already done so. If you have access to a web server, download CanvasMap to a folder within the web root (e.g. wwwroot) and unzip it.

If you are at Humboldt State University, you'll want to contact IT to have your "public_html" folder created within your "U" drive. The public_html folder is available on the web through the URL "http://users.humboldt.edu/<login>" where "<login>" is your HSU login. Then, download CanvasMap into a folder within your U drive and unzip it.

If you don't have a web server available, you can use CanvasMap from your file system but this will have limited access to data. 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 preiovus web page.

Accessing the Map Through a Web Browser

At the root of the CanvasMap folder, you should see a file named "Map_Tutorial_2.html". Double-click on the file and it will open in a browser. If you don't have a web server available, skip the next step.

To have your web page accessed through a web server you'll need to replace the start of the file path in the URL with the domain name and web-based path to your file. The "public_html" folder at HSU, this means replacing something like "U:\public_html\" with "users.humboldt.edu/<login>/". If you're running on your own web server, it will look more like "C:\inetpub\wwwroot\" which you'll want to replace with "localhost/". The exact syntax will vary a bit with the operating system and browser you are using. When you find the right approach, you'll want to save it for later!

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 "Map_Tutorial_2.html" file. This is similar to the map you've been editing within these tutorials with a ltitle 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.