www.geobeijing.info - 09/07/2008

Franz-Josef Behr, University of Applied Sciences Stuttgart, Germany, and Yuan Ying, Shenzhen City, China

During the 29th Olympiad and Paralympics in Beijing a corps of over 1.5 million volunteers will provide visitor support. Some tasks, such as giving information on transport and geographical orientation, can be performed by geo-browsers. The authors developed a portal, www.geobeijing.info for guiding visitors to Beijing during the ISPRS Congress and the Olympic Games. The maps are based on Google Maps satellite images, overlaid with additional information.<P>

The portal provides information and links relevant to Beijing, the Olympic Games and the ISPRS Congress. Users can search for streets and hotels, and access related information using side panels with hyperlinks. Venue locations, photos and traffic information are offered for the ISPRS Congress.

Information given by commercial geo-browsers such as Google, Yahoo!, Microsoft or MapQuest on streets, venues etc. is not detailed enough to guide Olympic Games 2008 and ISPRS Congress visitors properly through Beijing. Technological developments in online mapping tools, however, enable developers to construct portals superimposed on geo-browsers and to add theme-specific information. Google Maps, written in JavaScript, discloses its classes, variables and internal structure in an application-programming interface (API). Developers can produce client-side scripts and server-side hooks that allow expanded and customised features (mashups) based on the API. For example, using Goog­­le’s core mapping engine and its map/satellite imagery, users can add map overlays, including markers, polylines, polygons, and even WMS layers, and display shadowed ‘info windows’ containing additional data.

The main criterion for layout design was that the portal should be attractive and easy to use. In the present implementation, users are briefly but clearly informed concerning the purpose of the portal and information available. The three columns are based on the Cascading Style Sheet standard (CSS), and styling properties are largely compatible with modern browsers. On the left appear navigation and search capabilities. During map display the right column acts as a side panel which supports easy access to additional information such as venues, streets or hotels, and its content is updated according to the information shown.

We were able to collect plenty of information from internet and literature research. Most geographic data is either in the form of points, lines or polygons. These geometric features are described in OGC’s Simple Feature Specification and supported by Google’s API and that of other vendors. In the Google API many classes, types and events have been defined to re­present many features and carry out multiple functions on the map. Some examples are Map2 class and the GlatLng class for points in geographical coordinates. We digitised maps using either professional desktop GIS software (MapInfo Professional) to collect data from scanned maps, or Mashups based on Google’s API, which can export data in a format suited for further processing. In this way we collected point features (points of interest, hotels, and bus and railway stations), linear features (streets, subways, bus lines) and polygon features (Olympic and ISPRS venues). We ­overlaid more than 1,800 streets onto Google satellite imagery. Each street can be accessed via a name list in the side panel or a search form with AJAX-based auto-­completion.

Hotel locations, which are integrated into the map, can be approached in the same way, while photographs and hyperlinks to their websites are shown in a separate window. The side panel enables zooming and panning to Olympic venues such as the National Stadium, the National Aquatics Center, or the Beijing University Gymnasium, while additional information and photographs are displayed in a window which pops up automatically. Venues outside Beijing’s city centre are also accessible, such as the Triath­lon Venue at Ming Tomb Reservoir. Using buttons one can ‘jump’ directly from one location to another. ISPRS 2008 Congress venues are also linked to public bus infrastructure information. Points of interest are available through the side panel, and expressways around the city centre are visualised for better orientation.

Encoding of subway and venue information is done by XML, the meta-language used to define other (geo-related) languages such as Geography Markup Language (GML) or GeoRSS. Most programming languages support creation and parsing of XML data. JavaScript Object Notation (JSON) is intensively used throughout the web and is cap­able of combining a variety of features. Several of Google’s web-based applications and ser­vices provide feed data in JSON format. The advantage, as compared to XML, is the compactness of data representation. On the other hand, one should be cautious with user-entered data, since it could contain malicious code. JSON has been extended into a geographical dialect, Geo­JSON, intended to standardise the transfer of spatial features and how this can be instantiated on the client side. For bulk loading of geo-data, CSV (comma separated values) is used; this format is simple and supported by almost all spreadsheets and database management systems, is a pseudo standard even for GIS systems, and can be easily generated and evaluated on the client side. In this project some data has been encoded in a ­two-fold way. After digitisation, geometrical properties are ­converted into OGC’s WKT format. The resulting string is embedded in a CSV-encoded string, together with information about id, name, layer name, geometry type and bounding box.

Concluding Remarks
While the client uses the above technologies, PHP is the server-side programming language for creating dynamic web pages and for database access. MySQL is used as a database management system. The above technologies will boost bringing geographic information to the millions.

Further Reading
- Garrett, J. J., 2005. Ajax: a New Approach to Web Application. Adaptive Path. http://www.adaptivepath.com/publications/essays/archives/000385.php [2008-05-05]

- Purvis, M., Sambells, J., Turner, C., 2006. Beginning Google Maps Applications with PHP and Ajax. Apress, 350 pages, ISBN 1590597079, http://googlemapsbook.com/

- Google Maps API Reference http://code.google.com/apis/­maps/­documentation/­reference.html u


Textbox 1:
AJAX (Asynchronous JavaScript and XML) is an architectural concept used to provide an interactive experience by combining technologies. The XMLHttpRequest object, standardised by the World Wide Web Consortium (W3C), sends a request to a web resource defined by an URL and receives a response asynchronously. The client obtains updated data, such as maps, with­out reloading the entire page. XML (eXtensible Markup Language) is used for encoded data transfer between browser and web server. The Document Object Model (DOM), with its hierarchical, internal structure, allows programs and scripts to dynamically access and update content, structure and style of documents, while JavaScript is used to parse, analyse and interact with the information obtained. Google, for example, uses AJAX for Google Maps and for Google Suggest. Its API exports a method for creating XmlHttpRequest objects compatible with new versions of IE, Firefox and Safari.


Textbox 2:
Example of a CSV Encoded String
Road_0001;Aimin_Jie;Road;Polyline;116.376;39.9309;116.376;39.9266;116.376;39.9317;LINESTRING(116.375686 39.931674,116.375683 39.931593,116.375747 39.93026,116.375806 39.926574)

Last updated: 20/04/2019