Architecuture of CanvasMap

Below are additional details on the design of CanvasMap.

• Requirements
• 2D Core Classes
• Implementation
• Specific Areas:
  • 3D Core Classes
  • Projection Support
  • Tiling Design
  • 3D Extruded Paths

Target Users

The target users for CanvasMap are developers of web sites that include spatial data. This assumes that the users have some working knowledge of HTML, CSS, JavaScript, and the DOM. Users should also have basic knowledge of using a GIS application such as QGIS or ArcMap.

The prioritized list of users is:

1. Students learning to create web maps based on geospatial methods and data
2. Students creating web sites for projects, including research
3. Faculty creating web sites for research and final projects for sponsors
4. Natural resource managers
5. Any one else wanting to put spatial data on the web.

Goals

• Make it relatively easy for users to learn and implement high-quality web-based maps. Learning includes:
  • JavaScript, HTML, and CSS technologies
  • Good design and documentation practices
  • Debugging and performance optimization techniques
• Enable the creation of natural resource web applications that include:
  • Small to large data sets (occurrences, polygons, rasters)
  • Display of real time and near-real time data
  • Interactivity for data exploration
  • Enterprise applications (i.e. web services)
• Minimal support required
• Provide standard GIS classes of functionality: Layers, Projections, Symbology, Map Elements
• Provide broad based support for desktop and mobile devices

Strategies

• Create a simple and clear design structure that can be extended over time
• Use standard Object-Oriented Design methods to allow for extension by target users
• Where possible, use existing libraries, particularly ones that are free
• Create a "mini-GIS" system the users can interact with to see the capabilities of the system
• Allow full customization of the interface
• Don't support everything, instead forward folks to other solutions including OpenLayers

Tactics

• Based on standard HTML/DOM "DIV" and "CANVAS" elements
• CSS to contain the styles for the DOM elements when possible
• Traditional JavaScript classes for code implementation
  • Using prototype-based inheritance
  • Also allow for overriding functions
    

Design Issues

The design is stable and documented in the tutorials. Current design issues include:

• Should a "Tools" super class be created to allow custom tools?
  • Yes, a CMToolHandler class is now available
• Should a "MapElement" super class be created for Scale Bars, North Arrows, etc.
• Should a "Transform" base class and associated classes (buffer, overlay, etc.) be pursued?
  • The existing libraries for spatial transforms failed so we are currently experimenting with a web service to provide transforms
• We are still supporing the Microsoft Internet Explorer browser at this point. When this is dropped, we should be able to roll CanvasMap to support the formal "class" definitions provided in ECMAScript 2015. However, note that this is simply laid over the existing "prototype" interface so additional improvements in speed and memory footprint should not be expected.

Folder-Level Organization

Within the CanvasMap website, there are the following folders to organize CanvasMap files:

• CanvasMap - this is the core CanvasMap library for creating 2 dimensional (2D) maps. The classes contain some code for 3 dimensional (3D) mapping as some files only needed small modfications for 3D. '
• 3D - This is the extension to create 3D maps. Some of these are subclasses of 2D classes while others are unique to 3D.
• Development - files that are still being developed and should not be used in production maps.
• Documentation - the tutorials and reference documentation. This includes some examples that are used within the tutorials.
• Examples - Examples for using CanvasMap
• ExampleWebPages - full HTML web pages with maps and other information (roll into Examples?)
• Exnteions - extensions to the core CanvasMap code including the Editor
• Tools - these are tools that use CanvasMap including the projection explorer

At the root of the CanvasMap website folder are:

• Mimified versions of 2D and 3D CanvasMap
• BuildMini.bat - scripot to build the mimified versions of CanvasMap
• Some HTML files for testing and development
• HTML files listing the includes for the Indivudla files. These are used by the Java script that produces the BuildMini.bat file.

Note that there are also two Java programs to build the BuildMini.bat file and to create the reference documentation from the JavaScript code.

File Naming

All javascript files in CanvasMap are precedded by "CM" to minitmize collisions with other libraries. "CM2" indicates a file that contains code specifically for 2D maps while "CM3" indicates code specifically for 3D maps. Files with just "CM" are general and used by both 2D and 3D maps.

The first name after "CMX" indicites the type of class contained by the file and typically the main base classes it is derived from (e.g. "CMDataset", "CMPanel"). This approach groups the classes that are related together for easy identification.

Finding Classes

One of the issue with any extensible architecture is how code finds appropriate classes for specific oeprations. An example would be how to populate a menu to add new items to a scene. Wihtin the CMDefs.js file is an array of the currently registered classes. Any new class can simplly add code to register additional classes. Then, other classes can call CMDefs to see which classes meet its needs.

CMDefs.RegisterClasses("CM3Camera",[
 { Name:"Perspective Camera",Class:"C3CameraPerspective"},
 { Name:"Orthographic Camera",Class:"CM3CameraOrthographic"},
 ]);