JavaScript Objects and Classes

The design of CanvasMap is based on Object Oriented Design principles implemented with JavaScript and the Document Object Model (DOM).

JavaScript Object Containment

The figure below shows how CanvasMap aggregations or contains it's JavaScript objects and DOM elements. All the JavaScript objects are contained within an overall CanvasMap object. This is the primary object to use. The CanvasMap object then contains a "Scene" which contains "Layers". The Scene can be thought of as a scene or area on the ground and is the same as a Scene in BlueSpray or a "Data Frame" in ArcGIS. The layers contain the actual spatial data. There can be a variety of types of layers and you are welcome to create your own. The layers are linked to their entries in the "Layer List" called "Layers Element". The Scene also contains the "Views" that the Scene appears in. The Views are linked to the HTML Canvas element that they will draw into. There are also a variety of support classes for putting up JavaScript "Dialog Boxes", projecting data, and other utility functions.

• CanvasMap - Contains the JavaScript objects and references to all the DOM container objects
  • Canvas Map DOM ELements - CanvasMap maintains an internal array with all of the DOM elements it is using
  • Scene - Contains the layers that are displayed in a view
    • Map Elements - Additional optional elements such as scale bars and north arrows that need to communicate with the Scene
      • Map DOM Elements - Some map elements will have one or more DOM elements
    • Layers - Various types of spatial informatoin that are displayed for the user (e.g. points, polygons, rasters)
      • LayersList Element - The DOM element that displays the layers to the right of the map
    • Background Layers - One layer from this list can be displayed behind the other others
      • Background Element - Displays the list of background layers for the user to select the current background
    • View - Handles coordinate conversion and painting of spatial information into the Canvas Element.
      • Canvas Element - the HTML 5 Canvas element that shows spatial data to the user and lets them interact with it
  • Projector - Optional projector that will be used for coordinate conversion
• Dialog - A class to hope put up dialog boxes to obtain settings from the user
• Utilities - The rest of the utility functions that are used by mutliple classes

Files

All files are prefixed with "CM" for "CanvasMap". This is to reduce collisions with other JavaScript libraries.

The JavaScript files follow the same naming convention as show in the diagram above. Each file contains one class which is the same name as the file it is in. When a new class is created, it uses the name of its superclass to start its name. Thus, STLayerGeoJSON inherits from STLayer. This means all the functions that are available in an STLayer are also available in an STLayerGeoJSON class. The STLayerGeoJSON class will then replace or "override" the functions it needs to in STLayer.

Inheritance

The inheritence for STLayer is:

• CMLayer
  • CMLayerGeoJSON - displays GeoJSON data
  • CMLayerRaster - displays a georeferenced raster
  • CMLayerPyramid - displays optimzed vector and raster tiles from BlueSpray
  • CMLayerPyramidOpenFormat - displays OpenStreetMap raster tile format

Other layer types are in the works and you can easily create your own by overriding the functions in CMLayer.

There is a similar inheritance tree for projectors:

• CMProjector
  • CMProjectorGoogleMaps - special projector that exactly replicates the projection used by GoogleMaps and the OopenStreetMap tiles.
  • CMProjectorUTM - Projector for Universal Transverse Mercator with functions to set the datum, zone, and south parameters.
  • CMLayerProj4JS2 - An adaptation of the Proj4JS library to run within CanvasMap. This is a work in progress.