International Conference on Circuits and Systems (CAS 2015) Web-based Spatial Data Visualization and Analysis Using the New Web Standard 1 Shangming Qiu Haosheng Huang2 1 Department of Computer, 2Research Group Cartography, Guangdong AIB Polytechnic College, Vienna University of Technology, Guangzhou, 510507, China Vienna, 1040, Austria Abstract—Compared to desktop geographic information systems (GIS), current WebGIS are still rather poor in terms II. THE NEW WEB STANDARD AND RELATED WORK of interface and functionality. Much of this discrepancy is due HTML5 is a response to the observation that current to the limitations of current web standard (HTML4). HTML5 web documents are a mixture of features introduced by is being developed as the new web standard to replace HTML4. various specifications and web browsers, and contain many It provides plugin-free graphic supports and enhanced syntax errors, which can be attributed to the limitations of functionality, which make it very promising for the future the current HTML4. HTML5 is being developed to replace development of WebGIS. This article introduces three case studies to investigate whether HTML5 can work effectively in HTML4. It introduces some new syntactic elements, such developing WebGIS. This is necessary as HTML5 is not as video, canvas and inline SVG. These new features are designed primarily for geospatial domains. Results of the case designed to make it easy to include multimedia and studies show that HTML5 can help to develop cross-browser graphical content on the web in a plugin-free manner. and highly interactive WebGIS with true vector graphic HTML5 also introduces many APIs for complex capabilities and enhanced functionality (e.g., spatial analysis). applications. Beyond that, it has been developed with the consideration of mobile devices. All these features make it Keywords-HTML5; WebGIS; spatial data visualization; a promising technology to create complex, cross-platform, spatial analysis and high-performance web applications. Current research in WebGIS mainly focuses on spatial I. INTRODUCTION data visualization using the canvas element and the web Recent years have witnessed rapid advances in socket of HTML5 [2, 5, 6]. Canvas-based visualization is a Web-based geographic information systems (WebGIS), pixel-based approach and does not provide a good which aim at providing geospatial functionalities (e.g., web interactivity. The potential of graphic features of HTML5 in mapping and spatial analysis) to users through a web visualizing spatial vector data with high interactivity has browser. Web technologies have a profound effect on how not been addressed. Also, it has not yet been considered WebGIS are developed. While the first browsers often acted how HTML5 can be used to provide spatial analysis in as a renderer of simple web pages, current web browsers WebGIS. behave like “a runtime environment capable of delivering This article will study the feasibility of HTML5 in rich interactive applications across many application developing highly interactive WebGIS with true vector domains”[1]. Despite these advances, current WebGIS are graphic capabilities and enhanced functionality. Three case still rather poor in terms of interface and functionality, studies will be introduced to address the above concerns. compared to their desktop counterparts [2, 3, 4]. For Each of them covers a key aspect of WebGIS. example, providing cross-platform and highly interactive WebGIS with enhanced functionality (e.g., spatial analysis) III. CASE STUDY 1: ONLINE SPATIAL DATA VISUALIZATION is very challenging. This is probably due to the poor Spatial data can be classified into raster data and vector functionality support in the current web standard HTML4. data. Raster data, such as satellite images, represent the HTML5 is being developed as the next web standard. It world as a surface divided into a regular grid of cells [7]. In aims at improving HTML4 with plugin-free multimedia contrast, vector data model the world as a surface littered support, while keeping it consistently understood by with recognizable spatial objects, which can be represented computers. It also integrates many application programming as points, lines or polygons [7]. In HTML4, different raster interfaces (APIs) for complex web applications. However, formats (such as JPEG and GIF) are natively supported, since HTML5 is a rather new standard that started in 2009 which makes it very easy to publish raster data on the Web. and is still under development, it has not yet been widely However, visualization of vector data is not natively applied in WebGIS. supported in HTML4. In order to visualize vector data on Based on three case studies, this article aims to browsers, plugins are often employed, such as Flash and investigate the feasibility of using HTML5 to create SVG plugins, which leads to compatibility problems. WebGIS with true vector graphic capabilities, high HTML5 introduces many graphic features, which have interactivity and enhanced functionality. high potentials to address the above problems in current © 2015. The authors - Published by Atlantis Press 255 WebGIS. In additional to raster images, it provides canvas solution often needs more scripts for visualizing spatial data. and inline SVG to dynamically visualize graphics on In contrast, SVG-based solution can get more supports from browsers. Canvas is an element defined to draw graphics other related technologies, which make its implementation via JavaScript. It is a raster-based visualization. In contrast, rather simpler. Secondly, in terms of visualization quality, SVG defines several elements to draw basic shapes, paths canvas provides a raster-based view, while SVG employs a and texts in a vector manner. It also supports interaction vector-based one, which can be zoomed without quality with its graphic objects. HTML5 natively supports inline degradation. Thirdly, in terms of interactivity, SVG-based SVG, which makes it easy to visualize vector data on web solution supports users to interact with the spatial objects in browsers in a plugin-free manner. the map view. This feature is restricted in canvas. Canvas and inline SVG have high potentials for online In summary, both canvas and inline SVG can be used to spatial data visualization. They both provide visualize spatial data on web browsers. However, for methods/elements to draw basic shapes, paths, texts and providing interactive and high-quality spatial data images, which can be used to visualize different spatial visualization, inline SVG is preferred to canvas. features in spatial data. The support of graphical effects, such as filling, gradient, and filtering, enables visualizing IV. CASE STUDY 2: REAL-TIME WEB MAPPING spatial data in a meaningful and aesthetic way. The Currently, with the ubiquity of sensors, large sets of following case study is designed to compare canvas-based observations about the world are being generated in a nearly and inline SVG-based spatial data visualization on the Web. real-time manner. Therefore, more and more WebGIS need The spatial data of Vienna (Austria) are employed, to provide real-time visualization of spatial data. Before containing a boundary layer, and a land-use image (in GIF HTML5, several techniques, such as polling and Comet format). The boundary layer is encoded in Geography (long polling), have been adopted for showing real-time Markup Language (GML), and contains the boundary and information. These techniques are often query-driven, other information (such as ID) of each district. where the update request is initiated by browsers. They are In the canvas-based approach, a canvas is defined in an often complex to configure, and lead to high network traffic. HTML page, and JavaScript is used to draw each layer. HTML5 provides web socket to address these problems. FillText function is used to visualize each district’s ID. The Web socket is event-driven, and can be used with functions beginPath, moveTo, lineTo, and closePath are JavaScript. With web socket, a bi-directional channel used to draw each district’s boundary. As each boundary between the browser and server can be set up. An event contains many points, lineTo has to be used for each point. happening on the server can be captured (such as new data Finally, drawImage function is employed for adding the are being stored in the database), and sent to the browser image. Figure 1(left) shows the graphic interface of the instantly. canvas solution. In the following, we design a case study to investigate In the SVG-based solution, we write an XSLT the potentials of web socket in real-time web mapping. (eXtensible Stylesheet Language Transformations) style Emomap (http://openemotionmap.org) is a research project sheet to define symbols (polygons and texts) to represent which collects people's emotional ratings in their daily lives. the boundary layer in the GML data. With this, the GML This case study provides a real-time web map of all the file is then transformed into SVG format. This is done with ratings, and highlights the latest ratings. We use Apache the XSLT processor, which is natively included in current Tomcat as the web server to implement web socket. A browsers. The image is then embedded in the SVG file with servlet which implements the required web socket functions the image element. All the SVG codes are embedded in an such as onOpen, onTextMessage, and onClose is developed HTML page. Figure 1(right) shows the interface of the to deal with user requests, and monitor the update event of SVG solution. It also illustrates the interactivity (e.g., the rating database. On the browser side, JavaScript is mouse clicks, zooming and panning) of the SVG solution. employed to receive real-time updates, and display them on the web map. Figure 2 shows the screenshot of the real-time map. Figure 1. Canvas-based (left) and SVG-based (right) spatial data visualization Several issues can be learned from this case study. Figure 2. Screenshot of the real-time map. Red dots represent the latest Firstly, in terms of implementation, due to the lack of ratings.