WEB GIS USING OPEN-SOURCE TECHNOLOGY AND GOOGLE MAPS API

Transcription

1 WEB GIS USING OPEN-SOURCE TECHNOLOGY AND GOOGLE MAPS API Lantzaki Christina Department of Applied Informatics, University of Macedonia Samaras Nikolaos Department of Applied Informatics, University of Macedonia ABSTRACT A geographic information system (GIS) or geospatial information system is any system that captures, stores, analyzes, manages and presents data that are linked to location. In the simplest terms, GIS is the merging of cartography, statistical analysis, and database technology. The purpose of this paper is to study and experiment with the Google Maps API approach to cartography and to develop an application, using web technologies and Google s worldwide distribution of free geospatial tools and imagery maps. Building Salonica Guide has enabled us to identify the endless possibilities and potentials of web mapping technologies. It s not difficult to imagine future applications that will give the opportunity to the average Web user to customize and publish his/her own online maps, without the need for any prior programming knowledge or expertise. KEYWORDS Web GIS, Open Source, Google Maps, Database. 1. INTRODUCTION Cartography is the study and practice of making maps (also can be called mapping). The history of maps goes back to the Babylonians, Greeks and Romans of ancient times. As technology has developed, cartography has continually changed in order to meet the demands of new generations of mapmakers and map users. Advances in electronic technology in the 20th century ushered in another revolution in cartography. Ready availability of computers and peripherals along with computer programs for visualization, image processing, spatial analysis, and database management, have democratized and greatly expanded the making of maps. These days most commercial-quality maps are made using software that falls into one of three main types: CAD, GIS and specialized illustration software. Spatial information can be stored in a database, from which it can be extracted on demand. These tools lead to increasingly dynamic, interactive maps that can be manipulated digitally. The advent of the World Wide Web can be considered major advancement in cartography. The use of the Web as a dissemination medium for maps opens many new opportunities, such 121

2 as real-time maps, cheaper dissemination, more frequent and cheaper updates of data and software, personalized map content, distributed data sources and sharing of geographic information. Web maps were primarily static due to technical restrictions and were available for spotting an address or getting transportation information, but allowed only simple queries. Today's web maps can be fully interactive and integrate multiple media. However, recently, a new type of mapping systems emerged; highly responsive mapping frameworks providing API (Google, Yahoo, Mapquest, etc.). They are also usually enhanced with reality effects e.g. seamless transition between maps, satellite and hybrid views, 2.5-3D visualizations, street level photography, etc. which make them even more appealing. API allow developers to populate online maps with custom information location of events or things, by collecting data from standard documents such as RDF files, or simply by ad hoc web scraping of HTML resources. These embryonic but very agile Web GIS, called mashups, can merge more than one data sources and add functionality such as filtering and search features [7]. The explosion of mapping applications will result in a much wider use of the technology throughout science, government, business, and industry, with applications including real estate, public health, crime mapping, national defense, sustainable development, natural resources, landscape architecture, archaeology, regional and community planning, transportation and logistics. Popular map applications are Google Maps[1], Bing Maps and Yahoo Maps which give the public access to huge amounts of geographic data. These API toolkits commonly offer street maps, aerial/satellite imagery, geocoding and routing functionality. Salonica Guide aims at providing the residents of Thessaloniki with a wide variety of information about Spots found in their city. In this way, the application aims at providing users the emerging consumer geoinformatics services from Google and demonstrating Google s potential utility in creating custom online interactive maps. The application, also, focus on the use of open-source software. 2. DESCRIPTION OF IMPLEMENTATION 2.1 Background Google Maps has a wide array of APIs that let the user embed the functionality and usefulness of Google Maps into his/her own website and applications and overlay his/her own data. The most used APIs are Maps JavaScript API, Maps API for Flash, Google Earth API, Static Maps API and Web Services. Salonica Guide makes use of the Maps JavaScript API Version2 [2]. This API constitutes an arguing documentation designed for people familiarized with developing in JavaScript and with the idea of object-orientated programming, but also having a familiarization with Google Maps from the side of the user. The specific documentation is not yet complete, as it is supplemented continually. The API provides a list of classes [3] for the description of Basic Map Objects, Map Events, Map Controls, Map Overlays and Map Services. Furthermore the Google Maps API provides geocoding. Geocode(Geospatial Entity Object Code) is a standardized all-natural number representation format specification for geospatial coordinate measurements that provide details of the exact location of geospatial point at, below, or above the surface of the earth at a specified moment of time. Geocode is patented under US Patents 6,681,231, approved July 26, 2003, and 7,107,286, approved May 4, A 122

3 Geocode representation format is a combination of some or all of the following geospatial attributes: Geocode format registry number, latitude, longitude, altitude, date, local time, Coordinate Reference System - (Coordinate Reference System Type Registry Number - IS ), Internet Protocol Version 4 Address or Internet Protocol, Version 6 Address in Compressed and other geospatial attributes. Mandatory attributes included in the Geocode representation format are latitude or longitude and other measurement representations. All other attributes are voluntary. Geocoding is the process of finding associated geographic coordinates from other geographic data, such as street addresses, or zip codes (postal codes). With geographic coordinates the features can be mapped and entered into Geographic Information Systems. A geocoder is a piece of software or a (web) service that helps in this process. A simple method of geocoding is address interpolation. This method makes use of data from a street geographic information system where the street network is already mapped within the geographic coordinate space. Each street segment is attributed with address ranges (e.g. house numbers from one segment to the next). Geocoding takes an address, matches it to a street and specific segment (such as a block, in towns that use the "block" convention). Geocoding then interpolates the position of the address, within the range along the segment. The Google Geocoding API provides a direct way to access a geocoder via an HTTP request. Google Maps API Reference is a complete reference to all the objects of Google Maps API, of their constructors and their methods. 2.2 Salonica Guide Implementation Salonica Guide contains the design of a web site, the developing of a registration and logging system, addition and parameterization of a Map Object, Geocoding, design of a Relative Database Model for the storage of Spots, presentation of the Spots in the Map Object in their absolute geographical coordinates, developing of functions for search of the Spots with different criteria, presentation of information for each Spot, developing of an integrated rating system and a forum area for each Spot, printing of the Map with its Spots, developing a function for addition of new Spots by the users. For the implementation of this application several resources [4,5] were used. The implementation language is mostly JavaScript on the client side and PHP on the server side Database Technology Google The need for storing not only the data of the Spots, but also the data of the users meant the creation of a database. The DBMS, which was used, was MySQL Community Server [6]. The database consists of five different tables: The first one is the table spot. This table has fields like the name, the category, the rating (total_value/total_votes) of each Spot of the database. The table location stores the address and coordinates of each location. One location can have one or more spots. This explains the one-to-many relationship between the location and spot table. The third table is forum_posts, which stores the information for each post in the forum area. Fields in this table are postid, author, post and the foreign key spot_id as there is a one-to-many relationship with the table spot. The postid is set to auto increment and in this way it determines the antiquity order of each post. The next table is the user, which stores information for each registered user, like name and password. The last table is the spotsafterquery. This table describes each Spot on demand. The Spot information is stored here until the administrator checks each application and decides either to send the row in the 123

4 table spot or totally discard it. Each user can make many applications for Spots and there is a one-to-many relationship between the tables user and spotsafterquery. Figure1 shows the EER- Diagram of this database, which was designed with MySQL WorkBench 5.1 OSS. Figure 1. Database EER Diagram The database was filled with data with the help of a parser, which reads data from a file and stores them at the tables spot and location. The rest of the tables are filled after client requests for registration, posting or Spot addition. Naturally, there are some kinds of restrictions in order the client data to be accepted in each table. For the image data, there is a different parser, which reads image files, encodes them to Base64 and stores them into the database. For the retrieval and insertion of data from and to the database respectively, communication with the SQL server is necessary Maps Technology Some of the most important Google Maps API [2] classes used in our application are explained here. (A). GMap2. The Constructor of this core class creates a new map inside of the given HTML container. The methods are responsible for the initialization and parameterization of the object Map. (B). GLatLng. The constructor of this base class creates a point with its coordinates and its methods return values of the object. (C). GMarker. The constructor of this overlay class creates an implementation of a Spot in the object Map. There is a variety of methods and events to give the right shape and functionality to the object GMarker. (D). GClientGeocoder. It is a very useful service class. Its constructor creates a new instance of a geocoder that talks directly to Google servers, so as to retrieve the available geocodes as an answer to a user s query. In particular, the returning information is a JSON object consisting of the following information: a status code, indicating if the geocode request was successful or not and a placemark returning one or more locations for the specific address. Salonica Guide is orientated exclusively in the city of Thessaloinki. For this reason, there is an extra control, so as to keep only these points of placemark, which are located inside the boundaries of the city. (E). GDownloadURL. The constructor of this service class retrieves the resource from the given URL and calls the on load function with the text of the document as first argument, and the HTTP response status code as the second. Note that this method uses the underlying XmlHttpRequest implementation of the browser. 124

5 2.2.3 About the searches Salonica Guide provides three different kinds of Search in its database. The first search is called radius search. In this kind of search the user types the desired address and chooses the desired radius (in kilometers) to delimit the area of the Spots. In the first step of this search the address is geocoded by the use of the class GClientGeocoder. In the next step the client contacts with the SQL Server to retrieve the Spots that correspond to the search criteria. In particular, there is calculated the distance of each Spot from the location of the starting address. If the distance is less than the radius, then the Spot data are retrieved and the Spot is displayed on the map object. For the calculation of the distance Google Maps API facilitates us with the method of the GLatLng class: distancefrom(other:glatlng, radius?:number). GLatLng is a point in geographical coordinate s longitude and latitude. This method returns the distance, in meters, from this location to the given location. By default, this distance is calculated given the default equatorial earth radius of meters. This step makes use of the GDownloadURL class. The second kind of search is category search. In this search the user is able to choose which Spots wants to be displayed in his/her map according to their category. Indicatively, some categories are theaters, restaurants and museums. This search also communicates with the SQL Server. With this query: mysql_query("select * FROM spot WHERE spot.category_id = '$category_id') only the spots that of a particular category are selected and displayed on the Map. Finally, the last search is called complex search, as it combines the two previous kinds of search. All these three searches make use of the XML technology, as the php request returns the Spot data in xml code, which is then read by the client For a more interactive application Salonica Guide gives the opportunity to the logged user to interact at a greater extent with the application by rating each Spot, participating in forum areas by posting their comments and having the ability to suggest new Spots for the database. So, the application gives the opportunity to the user to rate each Spot, according to his/her preferences. There are two main classes responsible for the rating system. These are the createratingbar and submitrating classes. The createratingbar class is responsible for the implementation and the presentation of the rating system of each Spot. Salonica Guide communicates with MySQL Server to select the total_votes and total_value of a particular Spot. The rating results as an approximation of the total_value/total_votes. In case of zero total_votes the rating is set to zero. For the implementation of the rating html tags, image maps and image areas are used. The submitrating class is activated when the user submit his/her rate for a Spot. Firstly, the system connects with the server to get the property used_user_ids and check if the specific user has voted again for the Spot. The used_user_ids property consists of the user_id of the users that have already voted. If not, the rating is submitted in the database. In particular, total_votes is increased by one, total_value is increased by the rating(1-5) and the user_id of the user is stored in the used_user_ids. The class createratingbar is then called again for the presentation of the new results back to the user. There is also the opportunity for the user to post his comments for each Spot in the forum area. There are two main classes createforum() and aadpost(). The first class is responsible for connecting with the server and selecting all the data from the forum_posts table of our database, 125

6 which responds to a particular Spot and presenting them in the site in an antiquity order from the oldest to newer one. The addpost class is activated when the user press the Καταχώρηση button to submit his/her post. If the user is logged the post is stored in the forum_posts database and is presented in the site. Salonica Guide provides to the user the capability to add Spots. The function spotwindow () is responsible for appearing the form, which has to be filled. The logged user can select the location of the Spot by clicking on the map in the desired place. The system keeps the coordinates information of the location. Then, the user prints the data of the Spot like name, category, address, comments. The user can even upload an image of the Spot. Since the user press the Καταχώρηση button the function submitspotquery() is activated and all these data are stored in the spotsafterquery table of our database. The user is able to see his/her own Spots applications in his/her member page and check the state of each spot application Printing function The last function of the Salonica Guide is the printing. The user can print the map object with all the available information of the Spots, which are displayed in the Map at the current moment. The createprint class gets all the information of the object Map in its current position. In particular, the system gets the center and the zoom of the map object in order to create a static Map with the specific characteristics. Then the system detects all the displayed Markers, which are shown at the current map area, and present them with custom markers, too, in the static Map. Unfortunately, there is a restriction on behalf of Google. Firstly, the static maps can only be displayed within browser content; use of static maps outside of the browser is not allowed. This is the reason that the printing function is creating another html file instead of creating maybe a pdf file. Secondly, there is restriction in the number of markers displayed in a static Map. In particular, use of the Google Static Maps API is subject to a query limit of 1000 unique marker requests per static map. This would no t be a problem but things get worse if the markers have different custom Icons. In this case, there is a limitation of up to ten markers per Map. Naturally, having the same icons in all markers is useless, as the user won t be able to separate them. Under these circumstances, in case that more than ten markers are displayed on the map when the printing function is selected then no action is done and the system advices the user to decrease the number of markers by zooming in Site Development JavaScript and Html are the client side languages used in our application. JavaScript was used at a great extend, even to do work that the server could do. In this way the server is less overloaded and that is for sure an important advantage. Because of the fact that there are no mature IDEs for JavaScript, we mainly used the Notepad++. The development of the site took place at the same time with the development of the rest of the application. A free CSS file was downloaded. There have been some changes on this file in order to adapt it in our needs. 2.3 Manual The home page, which is accessed by using just the hostname, welcomes the user. There are login and register options in each page. At the top there is the main menu. 126

7 Image 1. Salonica Guide home page Image 2. Registration Page If the user is not registered yet he/she can register by pressing the Register link. The Register page is shown in Image 2. The user fills the fields and then he/she should press the Καταχώρηση link. By pressing Καταχώρηση the system make some checks, such as the similarity of the two passwords. If all the checks are positive the user is registered and he/she is informed about the successful registration. Image 3. Salonica Guide services page Image 4. An example of Address Search Image 5. An example of Radius Search Image 6. An example of Category Search When user Νίκος Παπαδόπουλος successfully logs, there is a link with his username nick. This link responds to his member page. The main part of the application is in the Services page, shown in image 3. In the center of the page there is a dynamic map of the city of Thessaloniki and at the left there are all the functions of the application. 127

8 There are four different kinds of Search: i). Search of an Address (Image 4), ii). Search of Spots with a specified Radius and Point (Image 5), iii). Search of Spots with a specified Category (Image 6) and iv). Complex Search (Image 7). Image 7. An example of Complex Search Image 8. Clicking on a Spot Image 9. Information of a Spot, before rating and posting in Forum Image 10. Information of a Spot after rating and posting in Forum 128

9 Image 11. Result of Printing for image 7 Image 12. Application for Spot Addition, table, Info(1) Image 13. Application for Spot Addition, table, Info(3) The user has the possibility to interact with the Spots of the Map, by clicking them. The result is shown in Image 8 and Image 9. The user can also rate each Spot according to his/her preferences, on condition that he/she is logged. Each user has the right to rate just one time each Spot. Image 14. Member page of user nick after the application for Spot Addition 129

10 Moreover the user can print all the resulted information given at the current page by choosing the Printing function. The user can also add a new Spots in the Salonica Guide, making an application which can be accepted or rejected. The user can watch the state of his/her applications in his/her member page. In particular, user nick can by pressing the link nick see his application for the Spot Μεζέδες. 3. CONCLUSION Google's worldwide distribution of "free" geospatial tools, imagery, maps and eventually, in future versions of their products, analysis capabilities, is to be commended as a significant step towards the ultimate "wikification" of maps and GIS [8]. Building on the powerful and universal visual language of geography, Google succeeded in making its customizable multipurpose maps and imagery of the world familiar and accessible to millions of ordinary Web users. Although Google Maps API enables users to deeply customize the standard provider's interface (Google Maps), and to create their own custom annotated maps, such APIs remain difficult for the non-expert, average user to exploit. Future applications will give the opportunity to further evolve to enable the average Web user to share geospatial information, to customize, annotate and publish his/her own online maps and related Web applications all without the need for any prior programming knowledge or expertise. It is not difficult to imagine the development in the very near future of 'geowikis', 'mapwikis', geo-enabled blogs, 'mapblogs' and even geo-enabled, mappable Web/RSS feeds and map feeds. The possibilities and potentials are endless. REFERENCES [1] Google Maps Application maps.google.com [2] Google Maps JavaScript API Version 2 at [3] Google Maps JavaScript API V2 Reference at: GR/apis/maps/documentation/javascript/v2/reference.html [4] Google Maps API Tutorial, [5] Beginning Google Maps Applications with PHP and Ajax: From Novice to Professional. Andre Lewis, Michael Purvis, Jeffrey Sambells, Cameron Turner [6] MySQL 5.4 available at [7] A Semantic Web GIS based Emergency Management System, Vlad Tanasescu1, Alessio Gugliotta1, John Domingue1, Leticia Gutierrez Villarias2, Rob Davies2, Mary Rowlatt2, Marc Richardson3 [8] Web GIS in practice VI: a demo playlist of geo-mashups for public health neogeographers. Maged N Kamel Boulos, Matthew Scotch, Kei-Hoi Cheung and David Burden, International Journal of Health Geographics