Tutorial: How The Code Works

There is an example file called "Map_Simple.html" that demonstrates the following steps to create a simple map.

• Create a new HTML page with a "head" and "body" section
• Import the JavaScript ("js") files you want to use in the "head" section. This will include:
  • CanvasMap.js
  • CMView.js
  • CMScene.js
  • CMLayer.js
  • Additional layers for those you wish to support
  • JavaScript for jQuery
  • JavaScript files for jQuery UI
• Add "div" tags for any other mapping elements you desire. Supported elements are:
  • Canvas element for the map
  • Div element for a LayerList
  • Div element for Information
• Create a "script" tag in your "head" section and add the following:
  • A global variable for the CanvasMap object
  • An "initialize()" function that includes the following:
    • Create the CanvasMap object
    • Set the IDs for your elements into the CanvasMap object
  • Call CanvasMap.Initialize()
  • Setup the bounds you wish the map to be for and call SetMaxBounds().
  • You can also call ZoomToBounds() at this point to center the map on the desired area
  • Add the layers you desire
  • Call CanvasMap.StartMap()