Design Details

Below are some additional details on the design of CanvasMap.

Design Approach

CanvasMap uses an Object Oriented Design with the ability to both override object methods and create new classes that inherit from super classes. This can be achieved in JavaScript using the "prototype" approach (see JavaScript: The World's Most Misunderstood Programming Language). This approach is similar to other languages and straight forward. Other approaches were not used because they either limited inheritance or were difficult for novice programmers to work with.

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.

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: This includes creating web sites for research and final projects for sponsors
4. Natural resource managers

Goals

• Make it relatively easy for GIS students 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 desktops 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
    

Current Features

Below is a list of the existing features in features we would like to see in a JavaScript-based web map:

Needs

• Scene:
  • Setting the background color (fillStyle)
• View:
  • Setting the range of zoom levels and extent
• Layer types:
• Point layers:
• Standard marks (circle, squares, triangles, stars)
• Setable styles, can be different for each feature
• Icons from image files
• Settable images, can be different for each feature
• Data from:
• GeoJSON
• Client-side JavaScript
• Labels
• Polyline and polygon layers:
• Stylize fills and strokes
• Setable for all or individual features
• Mouse over and selected styles
  • Settable for all or individual features
• Data from:
• GeoJSON
• Raster layers:    
• JPG, PNG
• OpenStreetMap tiles
• Pyramids of tiles
• Vector
• Raster
• All vector layers:
• Override: MouseDown, MouseMove, MouseUp, others?
• Info balloons based on attributes or custom content
• Search on attributes -> selection
• View attributes in a table
• Access to get and set attributes
• All layers:
• Zoom to bounds (if bounds available)
• Conversion of coordinates between geographic and projected systems
• Control of the style and layout from CSS where possible
  • Sizing the Canvas itself and inability to get the width and height from a CSS file limit this.
• GUI
  • Display of the current spatial reference
  • Informational popup windows with HTML content from attributes or set by JavaScript
  • Map Panels:
    • Title bar
    • Tool bar with select and pan tools
    • Footer with credits, coordinates, and spatial reference
    • Layers panel with access to:
      • Settings: fill and stroke style
      • Zoom to bounds
      • Delete
    • Background tile selections
    • Search panel
    • Easy to replace or remove standard map panels
  • Mouse for zoom in/out, pan, and mouse wheel for zooming
  • Maps that can flow with HTML content or be resizeable
  • Limit zoom levels and visible area
  • Change styles for map elements
  • Replace map elements with your own
• Map elements:
  • Scale bars
  • Coordinates
  • Legends
• Create new layers and new map elements

Possible Extensions:

• 3D renderings
  • This could include a "solution" to interactive, dynamic projections by using the GPU to project on the fly (rasters and vector data)
• North arrows that point north
• Graticule Layer
• More projections - finish Proj4
• Raster histograms?
• Editable vector data: points, polylines, polygons (how to make persistent?)
• Label layers for polylines and polygons (create in BlueSpray?)
• Point clustering layer?
• Save "maps" to a server and then load them again (i.e. a big JSON object that includes the layer, scene and CanvasMap settings).

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?
• 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?

Planned Changes

Below is a list of the changes that are planned for Canvas map.

• Move the info box dimensions to a CSS style (completed, need to make sure it is OK to roll the CSS file)
• Separate the CanvasMap web site from CanvasMap and just release the CanvasMap files
• Change the CanvasMap structure to a more commonly used folder structure:
  • js - JavaScript files
  • images - Images
  • css - Style sheets
  • examples - examples of existing CanvasMaps at the root for the user to modify
• Move the private functions into the constructors where possible
• Make any properties that are private, private within the constructor.
• Remove the View parameter in SetURL() as we can get the view from the CanvasMap's scene