Changing the Contents of CanvasMap Elements

You can change everything about the look of a CanvasMap by changing element's styles, hidding elements, and replacing them. Below are a couple of simple topics to get you started.

Change the Contents of an Element

You can customize the contents of some of the elements, such as the MapHeader or ToolTitle. After calling Initialize() you can get the element and then set its HTML

1. Changing the contents of the footer

var PanelFooterElementID=this.GetSetting("MainContainer","PanelFooterID");
var PanelFooterElement=document.getElementById(PanelFooterElementID);
PanelFooterElement.style.textAlign="right";
PanelFooterElement.style.marginRight="5px";
PanelFooterElement.innerHTML="Muhl, Kimble, Bean, and Graham<br>19th of August, 2015";

Change the Style of an Element in the CanvasMap

Since CanvasMap is made up of DOM elements, you can change the appearance of all the elements of your CanvasMap in a variety of ways:

1. New CSS file

If you want to change all the element's styles, you can save the CanvasMap.css file with a new name and/or new folder and point your HTML file to the new CSS file. Then, change the file as desired. If you look through the CSS file, you'll see that the styles are all named after the elements they represent in the map (see the first tutorial for an introduction to this and then the Reference section for details). Using this approach, you can change all the backgrounds, outlines, fonts, and even positioning of the elements.

2. Change one element

After calling Initialization() you can change the style of any element as follows:

var PanelFooterElementID=this.GetSetting("MainContainer","PanelFooterID");
var PanelFooterElement=document.getElementById(PanelFooterElementID);
PanelFooterElement.style.textAlign="right";
PanelFooterElement.style.marginRight="5px";
PanelFooterElement.innerHTML="Muhl, Kimble, Bean, and Graham<br>19th of August, 2015";

Change the Icons Used by CanvasMap

You can change the icons used by CanvasMap by overriding the icon variables in the class that implements the tool. For instance, the tools along the top of the MainContainer are contained in CMPanelTool.