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()