A Minimal Map

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. As you proceed through this tutorial, you'll create a map similar to the themaic Africa map in the examples.

For this tutorial, start with a geographic map example that is not resizable. Then, save a copy of the CanvasMap.css file as CanvasMap_Minimal.css and include this in the HTML file for the example.

Replacing or Turning Off Elements

When you call "initialize()" CanvasMap creates the elements for the basic map. You can call the "SetElement()" function before Initialize() to replace the elements within CanvasMap with your own. This would allow you to create new DIV elements in other places on the page (or that float). You can also call "SetElement()" with "null" to "turn off" elements within CanvasMap.

TheMainContainer.SetElement(CMMainContainer.TOOL_CONTAINER,null); // turn off the tool bar below the title
TheMainContainer.SetElement(CMMainContainer.NAVIGATION,null); // turn off the nagivation controls in the map
TheMainContainer.SetElement(CMMainContainer.VERTICAL_TAB_CONTAINER,null); // turn off the tab controls to the upper right of the map
TheMainContainer.SetElement(CMMainContainer.LAYER_LIST,null); // hide the list of layers that is below the tab controls
TheMainContainer.SetElement(CMMainContainer.BACKGROUND_LIST,null); // hide the background list
TheMainContainer.SetElement(CMMainContainer.SEARCH_PANEL,null); // hide the search panel
TheMainContainer.SetElement(CMMainContainer.MAP_FOOTER,null); // hide the map footer at the bottom of the map

There is also a single call to turn off all the elements except the map.

TheMainContainer.SimpleMap(); 

Note that if you want to debug certain problems, like coordinate issues, you can turn this on and off to an extent. Problems will occur when we start modifiing the CSS file to repostion objects on the page.

Moving Items in the CSS File

After you've turned off the CanvasMap element, you'll probably notice that your map does not start at the top of the page (i.e. there is some white space left by the title and tool bar). To fix this, go into the CSS file you've created and find the "CM_CanvasContainer" style. Notice that it's "top" setting is at about "70px" or pixels. Change this value to "0px" and you'll see the space above the map disappear. Try changing the other settings in this style and you should see your map resize.