Interactive web design for spatio-temporal data - Google Sites

Interactive web design for spatio-temporal data Multdimensional Geospatial Modeling MEA592 Vaclav Petras December 7, 2013

1

Introduction

Online publication is important for spatio-temporal data as well as for any other data. However, there is a lack of general tools for spatio-temporal data visualization on web. This project provides set of tools for easy-to-use online interactive visualization without a need for special server-side tools. The project consists of two parts where one part is a set of interactive web map applications developed using Leaflet JavaScript library and the other provides tools to export spatial data for publishing from GRASS GIS.

2

Methods

GRASS GIS1 export tools were implemented in Python using GRASS Python API. To visualize map online using Leaflet, map needs to be in an image format accepted by all web browsers and because it is a map it cannot be lossy compressed, so the ideal option is PNG. However, the only projection accepted by Leaflet without special plugins is Pseudo-Mercator (EPSG:3857), so the map has to be exported in this projection. Therefore, it was necessary to first reproject the map into this projection. The export tools do the reprojection automatically and in order to do that, they first create temporary GRASS database with Pseudo-Mercator location. Web pages were implemented in JavaScript, HTML and CSS (HTML5) using Leaflet2 , jQuery3 , and jQueryUI4 JavaScript libraries. The configuration for web pages is done by a file generated by GRASS export tools. This file is linked to the web page as standard JavaScript file in order to preserve the possibility to open web page at local computer without the need for a web server.5 1 http://grass.osgeo.org/ 2 http://leafletjs.com/ 3 http://jqueryui.com/ 4 http://jquery.com/ 5 To load text files such as JSON, CSV or other in JavaScript, a web server must run even on local computer because of security measures in web browsers.

1

Vaclav Petras, MEA592, 2013

Figure 1: Graphical user interface for module r.out.leaflet r.out.leaflet strds=elevation_jr output=.../elevation_jr_map/data

Figure 2: Example command for module r.out.leaflet

3

Results

I implemented two modules r.out.png.proj and r.out.leaflet and a reusable library which is shared by these two modules. The source code (directly usable as GRASS script) is publicly accessible from the Git repository at GitHub: https://github.com/ncsu-osgeorel/grass-web-publishing The other part of the project are two Leaflet web pages implemented by me. One is for visualization of animation and the other is for visualization of detailed information about a raster map. The source code (directly usable as web pages) is publicly accessible from the Git repository at GitHub: https://github.com/ncsu-osgeorel/GRASS-Leaflet-Publishing Both parts are free and open source and are licensed under the GNU GPL license. The Leaflet visualization tool was tested with an almost 4-million-pixel image (2400×1650 pixels). The both web pages were tested with up to 10 maps.

4

Discussion

Maps with large amount of cells require tiling which is not currently provided by this set of tools. The addition of tiling functionality and the use of tiles is the clear next step. Export defined not by module parameters but by a GRASS workspace file seems to offer more convenient for the user, so implementation 2

Vaclav Petras, MEA592, 2013

(a) Layer manager for base layers and several overlay (b) Layer manager only for base layers used in anilayers mation web page

Figure 3: Layer manager

Figure 4: Histogram and statistics of the current map

3

Vaclav Petras, MEA592, 2013

Figure 5: Change opacity control and download options

Figure 6: Animation control including control of layer opacity of export dependent on GRASS workspace should be considered. A GRASS workspace file can be also used to auto-generate 3D outputs which can be than added as a additional map information. This set of tools relates to GRASS wxGUI Animation Tool and thus the connection to this tools should be made in order to avoid functionality duplication nd perhaps user confusion. All possible improvements mentioned above are mainly extension to implemented GRASS export modules. Besides this, several improvements can be done on the web applications, too. The animation web page does not currently show the additional information. Moreover, it can also split the view and show one large image alongside with map. Additionally, it also could provide optional automatic zooming (or panning) to just showed layer as it is switched by time slider or automatic timer. Another improvement which would improve the user interface is a better loading of maps because current loading method causes flickering when the animation runs for the first time.

5

Conclusion

This project offers possibility to export multiple raster map including their details using one single GRASS module. Exported maps can be directly used for web page developed within this project. One web page 4

Vaclav Petras, MEA592, 2013

(a) Floating point raster map legend

(b) Category raster map legend

Figure 7: Map lagend shows maps as an animation, the other shows them as independent layers accompanied with details about a map such as histogram or metadata.

5