A Geospatial Data Viewer Using OpenLayers and Local File System Data

Using HTML and JavaScript, an application was developed for display and query of geospatial data exclusively located on the local file system. OpenLayers and JQuery are the two primary JavaScript APIs used in the development of the application. By design, the application runs in Firefox and mimics a stand-alone desktop application.

Geospatial data utilized in the application includes raster data and complex vector data. The raster data includes satellite imagery, a raster base map, and several raster maps used as overlays. Raster data formats used include single image PNGs files and TMS-based files. The storage format utilized for vector data is GML. Additional aspatial data is stored in JSON formatted files. All data used in the application is loaded from the local file system at run time.

Functionality of the application includes selection of features from a list or from the map. The application provides the option of switching between a satellite image, a raster base map, or no base map. Three raster overlays are available for display with the option of the user setting the transparency of these overlays. Vector overlays are available for display on the map. One vector overlay feature available for display is a UTM grid that dynamically draws UTM grid labels whenever map panning occurs.

Additional functionality included in the application is the ability to determine elevation at the cursor location in the map view. Drawing a DEM to a HTML5 canvas and then reading the pixel value of the canvas that represents the geographic coordinate of the current cursor position allows for this functionality.

This presentation shall include details of the application user interface design, functionality, implementation approach, and issues in using HTML and JavaScript for accessing local file system data.