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 Credits

var Credits=TheMainContainer.GetElement(CMMainContainer.MAP_CREDITS);
Credits.style.textAlign="right";
Credits.style.marginRight="5px";
Credits.innerHTML="Muhl, Kimble, Bean, and Graham<br>19th of August, 2015";

2. Changing the Displayed Spatial Refernce

var SRS=TheMainContainer.GetElement(CMMainContainer.MAP_SRS); 
SRS.innerHTML="Universal Transverse Mercator, Zone 10 North"; 

3. Changing the Coordinate Units

See the reference section for the CanvasMap class for the other coordinate unit types.

TheMainContainer.SetCoordinateUnits(CMUtilities.COORDINATE_UNITS_METERS);

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 SRS=TheMainContainer.GetElement(CMMainContainer.MAP_SRS); 
SRS.innerHTML="Universal Transverse Mercator, Zone 10 North"; 

Change the Images Used by CanvasMap

You can change the images including the tool icons, by changing the ones that are specified when you call SetSetting("MainContainer","ImageFolder",Path) or create a new folder with images that have the same names as those in the default folder that comes with CanvasMap