SVG STANDARD FOR ENVIRONMENTAL APPLICATIONS

Transcription

1 SVG STANDARD FOR ENVIRONMENTAL APPLICATIONS I. P. S. Cabral, L. M. G. Gonçalves, J. P. Medeiros, R. F. Amaral. Universidade Federal do Rio Grande do Norte UFRN P.O. Box Natal RN, Brazil. Abstract. This paper proposes the use of SVG standard for environmental applications through on-line generation of maps that can be visualized in browsers. Recently, web-based GIS with the rapid expansion of internet and the World Wide Web is regarded as one of important issues for web application, and several GIS products running on web browser have been announced. The system used in this study has two main differences from other web-based GIS applications. It s real-time and gets data from sources simultaneously in exact time intervals that users defined previously, and secondly, all the developing and publishing tools used in the system are open sourced. Aim of this study is to create a web-based, free and open sourced GIS that can work with different data formats by exchanging and presenting data as a real-time map on web. 1. INTRODUCTION In the present work, we describe the main characteristics of SVG (Scalable Vector Graphics) standard, presenting in a brief way how the same can be applied on execution of geoprocessing routines directed toward environmental applications, with the use of maps in vectorial format. There will be presented introductory concepts relative to SVG and also some advantages of using it to describe geographic information. We will show how the considered standard allows the development of an interactive GIS (Geographic Information System), demonstrating through examples of its use, realized on the region of Parrachos de Maracajaú, RN, Brazil. Some problems related with SVG will also be presented and we shall discuss procedures to optimize the representation of maps for user. Such procedures are necessary because the maps are generated in real time and visualized on browsers according to a determined region and a specified layer Area of Study and Objectives The area of the map shown with a red circle on Figure 1 is the region that includes within the Parrachos de Maracajaú, one of the coral reefs areas existing on RN coast, located on Northeast of Brazil, nearby Natal. The main goal of this project implementation on this region is to make possible the control of events related with the uncontrolled use by visitors who, without proper information, are contributing to the total devastation of this region (Farias, 2004). Such information would be of great value for environmental management organs, as well as to research community in general.

2 Figure 1: Area of Study Some objectives with this study execution and development of this work are: Integrate monitoring data of the corals in a GIS; Develop a web-based system; Implement a real-time response system; Verify the advantages and disadvantages of SVG using on environmental applications; Create a map that can be handled in interactive way. The benefits of the proposed system are: Monitoring cost reduction; Possibility of data access by internet from any place of the world; Reduction of time and efforts to reach data; Centralization of database to provide a common source of information. 2. SCALABLE VECTOR GRAPHICS To generate maps it is necessary to use graphic representations. Traditionally, the applications directed to Internet exhibit images in two matrix formats, gif and jpeg. These are alternative formats for compressing data from bitmap standards, which are useful for matrical images, but for vectorial images are static, possibly with big size beyond not allowing good data handling. Actually there are only two other methods to visualize 2D (two dimensions) vectorial graphics for applications directed to Internet. The first one is the Macromedia flash that is more used for animations and is not so indicated for the work with geographic information and the second, according to Conford (2003), is the VML (Vector Markup Language) that was launched by Microsoft and is supported only by Internet Explorer, making its adoption limited to Windows platform users. SVG is a standard, recommended by the World Wide Web Consortium W3C, for creation of two-dimensional graphics, digital map elaboration and animations. This language provides the creation of WEB pages with high graphic resolution, including sophisticated elements like: declivities, inlaid fonts, transparencies, animation, and filter effects with the use of text commands. In this standard, graphics can be modified dynamically by the use of script languages and object orientation. It is possible to modify any attribute of a graphic and treat events like, for instance, mouse clicks. Any object of this type of graphic can be accessed trough methods supported by the language. There are some available products to work with SVG and others are in development process. Among the existent applications that generate images in SVG, we can cite Corel, Adobe Illustrator and Sodipodi (freeware). Companies like Microsoft, Adobe, Macromedia, IBM, Sun Microsystems, Apple, Xerox, Netscape, Corel and Kodak contributed to creation of SVG. Although this standard is already well spread out in the said countries of first world, in Brazil it follows in slow steps, but increasing. The browsers most spread out have already support to SVG internally (Mozilla) or trough plug-ins, as it is the case of Internet Explorer and Netscape. All those resources are making SVG become a standard for representation of two dimensions maps on Web (Conford, 2003).

3 2.1 Characteristics of SVG SVG has a set of characteristics that qualify it as a language directed to creation of graphics on Internet applications. Its use is at each time more spread out, inclusively by great software companies. Among the main characteristics we can mention: Based in XML; Open standard; Open code; Vectorial and matricial graphics; Can be accessed trough the browser; Different ways to visualize an area on the map; Interactive Zoom and Pan over the map; Interaction and animation; Selective visualization of geographic characteristics (layers); Can be included inside archives HTML, ASP, PHP, etc; Interact with several script languages as: JavaScript, VBScript, etc. 3. METHODOLOGY AND PROPOSED SYSTEM The functioning scheme of the considered system is shown on Figure 2 and Figure 3. To better understand the problem, we defined a study case. We will describe as it follows an overview of the system. The database contains information on how the internal structures of the region are organized, in other words, it contains information on the real location of the entire region in study as well as the presentable geometric pictures of the corals. These data are not grouped in a continuous form, making, for example, an object be composed of various parts with distinct identifiers. SVG allows the representation of three kind of graphic objects: vectorial forms (courses defined by straight lines and curves), images and text. The vectorial objects have the information about curves and lines of an image, instead of information about the pixels that compose the same. The graphic objects (vectorial, image and text) can be grouped, transformed and composed in objects previously rendered (Faria, 2004). In this study case, the three forms of available graphic objects and the technique of grouping in layers are used, so it is possible to have, in a certain domain, the elements that have similar characteristics. The matricial image of the region is used by means of layer to make possible a better visual representation of it. Figure 2: Components of the System

4 On Figure 2, the Data Upload is programmed to be responsible for exchanges and manipulation of data over the Web. This component was developed on JavaScript language and provides an API for access to MySQL database trough the Internet. The component Map Server is programmed to extract information from database and, with then, generate data in SVG where the interaction functions in script language will be linked. Figure 3: Creation of the SVG archive 3.1 System Operation The GIS operation of dynamic generation of maps for the Web with the use of SVG can be summarized as: 1) Initially a Web page, structured in PHP language (Hypertext Preprocessor), solicits to the database, trough commands on SQL standard, the attributes of polygons that are localized on the visualization area and that are in agreement with the kind of layer to be exhibited. 2) The database returns the requisition with the map components. 3) The PHP page creates dynamically the SVG file according to the data that where acquired from the database, as it shows the code stretch shown on Figure Set File = fso.createtextfile("c:\map.svg", True) File.WriteLine("<svg version="1.1" id="map"") strsql= "SQL Query" File.writeLine("<g id="coral">") Beginning of the loop to the map components creation File.Write("<polyline id="id" & points=") Beginning of the loop to fill the polygon points File.Write(X & "," & Y) End of the loop to fill the points File.write( /> ) End of the loop to the map components creation File.writeLine("</g>") File.WriteLine("</svg>") File.Close... Figure 4: Code Stretch for Archive Creation Obs: some instructions from the picture above (Figure 4) do not correspond exactly to the original ones. They were altered only to better exemplify the context. 4) The SVG archive generated is nothing more than the map of the chosen region with the possibility to treat events related to each created polygon. Such archive is inserted on the PHP page trough the use of the embed function and thus showed to the user (see Figure 5). //Pag: Map.php... <embed name="map" SRC="Map.svg"></embed>... Figure 5: embed Function

5 3.2 System Optimization As it was showed on the previous section, this work views the construction, in real-time, of a map starting from dynamic query to the database, thus generating an archive: Map.SVG with the lines of direction of the related attributes. To successfully realize such procedures, it was necessary to elaborate a method that could optimize the dynamic creation. We created a method called MOM (Mask Over the Map), which uses the principle of provide to user only what is required, in order to optimize the process. This method consists on the use of a mask in table format over the map and creation of only the information that are contained on the requested cell. The user can, trough commands via buttons, manipulate the map and, if allowed, navigate in all directions. An example on which is possible to navigate is illustrated on Figure 6. Figure 6: MOM Method Another problem that must be treated is the rupture and consequently the inadequate connection of two points. It is occasioned when there are indicated by the SQL consultation a vertical and horizontal limits of the small size cell (Figure 7.a). It makes the polygons exceed the cell limit, split themselves and get connected with another point inside the indicated limit (Figure 7.b), generating, this way, geometrical forms that do not correspond to reality. Figure 7: Poorly Presented Polygon To have this problem solved, the consultation must be done in such a way that the polygon points that have coordinate on another cell on the neighborhood be also represented. So, on the MOM method we indicate as the consultation filter not only the horizontal and vertical limits of each cell, but also other coordinates of the polygon that is part of the cell neighborhood. At the end, it is noticed that the method consumes lesser demand of processing, realizing the creation and visualization in a brief space of time and with a little generation of polygons that are not necessary to visualization (the ones that are on the neighborhood and will not be visualized by the user on the current cell in exhibition). 4. EXPERIMENT AND RESULTS In our study case, we used results obtained from a previous work (Farias, 2004). We acquired small format aerial photos, or SFAP, taken by an aerial transported camera in a small plane. The photographs were digitalized, treated with image processing techniques, georeferred and applied to a segmentation process. The final result was the classification of several faces submerged and emerged, on the sea region of Parracho de Maracajaú. These data served as an entrance to the Web system, converted to SVG standard. Figure 8 shows a classification realized on the original data, already on the proposed system, where it is possible to see on the Web the various classes of faces found in Maracajaú that can be floating platforms, submerged corals, emerged corals and sea plants (fanerogamas). The system allows interaction between user and generated map, in such a way that the same can navigate over the map, verify relational data of some faces that were inserted into the system (name of the

6 company that operates the floating platform, number of employees, area of each coral or head reef as they are called, etc), as well as realize zooming operations. This study case validates the proposed system in a sense that allows the interaction trough the Web with the desired data. When the mouse is stopped over areas with relational data, the same are shown. Figure 8: Map Published on Web of the Corals of Maracajaú/RN Region With this experiment and the conclusion of this project, we see that web-based technology makes the system more flexible, being able to be converted to the monitoring of other environmental events that demand real-time observation like, for example: natural catastrophes, pollution control, etc. As the main result, we see that the use of SVG pattern provided the production and publication of a map directed to environmental applications on Web (Figure 8). This map is available to the manager institution of the considered area on the site of UFRN environmental study center. Other data will integrate the map, resulting on a powerful mean of monitoring and distribution of important information to the community involved with the considered area as well as to scientific community. 5. FINAL CONSIDERATIONS AND PERSPECTIVES Environment management applications are benefited with the use of systems that can supply data via Internet, mainly because they are available to a greater number of people. Strategical decisions as to limit the number of tourists on the areas or define rotation between areas are being taken with the use of information inserted into the considered map by scientists who do researches on the region: number of existent fishes by square meter, water transparency, changes on the corals coloration indicating the beginning of their death, coral depredation, and other important data for biotic and non-biotic control. On the other hand, the SVG use on applications that demand vectorial representation of maps on the World Wide Web demonstrates a great advance on scientific community being clear to the user the complexity of the computational internal organization, making in a simple and easy way the map be represented with much more portability, dynamism and performance. Solutions performed by this standard, tend to the increasing diffusion of knowledge, making the maps be visualized by a huge set of users being or not from the GIS community. It is intended on a new stage, the realization of viability tests on the MOM method on maps with different scales and with excess of information relative to several layers of treatment, beyond the possibility to extend experiments to other regions. More data about the considered region are being added to database and the same will be available on the Web page of the Environmental Study Center of UFRN (Nea, 2004).

7 References Adobe. Developer tutorials. Available on: < basics/intro.html>. Accessed on: October BORILLO, Ricardo. SVG: gráficos e interactividad en la Web. Avalilable on: Accessed on: October CORNFORD, Dan. Geographic Information Systems. London, Aston University COSTA, Maria de Fátima. Cadeira de Sistemas Multimedia. Available on: < Accessed on: October Dbxgeomatics. An introduction to Scalable Vector Graphics (SVG). Available on: < Accessed on: October FARIA, Nuno. Visualizador de Mapas para PDAs em SVG. Available on: < Accessed on: October FARIAS, Ricardo; GONÇALVES, Luiz. Using Small Format Aerial Photos to Map Coral Reefs in Rio Grande do Norte, Brazil. ICRA 2004 International Conference on Robotics and Automation. New Orleans, USA, May FRITZE, Alexander. Mozilla SVG Project. Disponível em: < Accessed on: October NEA - Núcleo de Estudos Ambientais da UFRN. Disponível em: < Accessed on: October NEUMANN, Andreas; WINTER, Andréas M. Vector-based Web Cartography: Enabler SVG. Available on: < Accessed on: October NEUMANN, Andreas; WINTER, Andréas M. Coordinate transformations. Available on: < Accessed on: October NEUMANN, Andreas; WINTER, Andréas M. Time for svg towards high quality interactive web-maps. Available on: < articles>. Accessed on: October SEPESI, Greg. A comparison of complementary geographical tasks. Available on: < Accessed on: October SVGOpen.org. What is SVG?. Available on: < whatis.html>. Accessed on: October 2004.

8 Biography:. Luiz Goncalves Luiz Goncalves has Doctorate in Computer Engineering from Federal University of Rio de Janeiro, in He is an Associate Professor at the Computer Engineering Department of Federal Universiti of Rio Grande do Norte, Brazil. He has edited 2 books and published 7 articles in specialized periodics (journals and magazines). Has participated in many international events. He is advisor of several graduate students (former and on-going works), Has received two prizes and served in Program Committees of several Conferences, including colaboration as Program Chair and as Organizing Chair. Has done researches in several fields as GIS, Computer Graphics, Animation, Image Processing, and obotics Vision. He is the current Chair of Brazilian Computer Graphics, Image processing and Vision Community and member of the IEEE Latin American Robotics Council.