Introduction

This tutorial will introduce you to a standard HTML file that includes a CanvasMap. Then, we'll change the name of the layer for the map. Take a look at the code in the panel on the left below. This is a standard format for how all the CanvasMap examples are written with additional comments added. At the top are includes for the CSS file for the CanvasMap and the JavaScript (".js") files that are needed. The file starts with a typical DOCTYPE, HTML, and HEAD tag. Then, the CSS file for CanvasMap is linked to. The JavaScript includes are the files for the CanvasMap library. Each of these files is a class with a specific function that we'll talk about in future tutorials. Below the JavaScript includes is the "OnLoad()" function, this is executed after the page is loaded and is where all the code is located to setup the CanvasMap. Below the OnLoad() function you'll see that the HEAD is closed and the BODY is opened with the "OnLoad()" function specified to be executed as the BODY's "onLoad" event handler. Finally, we have the DIV element that will contain our entire map.

Push the "Try it" button below and you should see the map on the right "blink". When you press "Try It" the code on the left is put into an "IFRAME" on the right just as if you were opening it in a browser. We'll use this in a number of the tutorials to make it easy to play with the map and learn how to customize it (thanks to W3Schools for showing us how to do this). You can also click on "Open In New Window" to have the code execute as an independent HTML page and we'll use this in a future tutorial to use the debuggers that are now built into web browsers.

Changing the Layer Name

Take a look at the code above and go to the section marked "2.3.3 Add layers to the map". A few lines down, you'll see the line "TheCountryLayer.SetSetting("Item","Name","Countries");". This is the line that sets the name that appears in the LayerList to the right of the map. Change the name "Countries" now while being careful not to remove the quotes. Then, press "Try it" and the name should change in the LayerList. Try this several times and then move on to the next tutorial.

Our thanks to Natural Earth for the data used in this tutorial.