Map-Based User Interface for Digital City Kyoto

NTT Communication Science Laboratories

NTT Communicationware

NTT Advanced Technology

Toru ISHIDA <>
Kyoto University

Jun-ichi AKAHANI <>
NTT Communication Science Laboratories


We propose a map-based interface called InfoMap for Digital City Kyoto, a city-based information space including around 2600 home pages located in the Kyoto metropolitan area. InfoMap is an extended image map interface system that enables users to browse a lot of information on geographical maps. While providing an effective means of information search in Digital City Kyoto, InfoMap offers functions such as switching between wide area map images and detailed area map images and uses incremental data downloading via the Internet, in addition to normal image map functions. We also present usability test results and issues concerning this interface on the assumption that a user wants to find some information on Digital City Kyoto.



In line with the maturing of the Internet, city information is currently being accumulated as online digital contents for a geographic information system (GIS) and the World Wide Web (WWW) [1]. The progress made in this information accumulation is causing changes in network uses from experimental uses (i.e., at the beginning of the Internet when many researchers intended to create a global seamless network) to practical uses (e.g., accessing information close to everyday life). Many network services have already been proposed based on a large quantity of the information available over the Internet. Various styles of services, such as access from mobile devices, are also available and make it easy and convenient to use network services.

For the visualization of online city information, map-based applications are beginning to attract a great deal of public attention. Many kinds of map-based applications have already been proposed, such as the traditional GIS, client-server type information systems based on the Internet, and mobile devices connected with a global positioning system (GPS) based on a wireless network. An advantage of map-based applications is that they enable users to browse online city information in accordance with geographical relations in the information (i.e., in the physical city involved). There are a lot of possibilities of supporting communities of citizens if dynamic city information such as sensory data from the real world and communication tools like BBS and ML can be integrated into the online city information space.

In this paper, we propose a map-based interface called InfoMap for Digital City Kyoto, a city-based information space including around 2600 home pages (HPs) located in the Kyoto metropolitan area and integrated with geographical position data. InfoMap is an extended image map interface system that enables users to browse a lot of online city information on geographical maps. While providing an effective means of information searching in Digital City Kyoto, InfoMap offers functions such as switching between wide area map images and detailed area map images and incremental data downloading via the Internet, in addition to normal image map functions.

In the following sections, we illustrate the system architecture and back-end system of InfoMap and explain the contents of Digital City Kyoto in detail. We also present usability test results and issues concerning this interface on the assumption that a user wants to find some information in Digital City Kyoto.


City information on the Internet

Various digital cities have been developed as city portal sites that function as hubs to online information around the world. Most digital cities are open to public networks and provide information services to their citizens. Each digital city may have a unique service, administration style, and management policy. The following items indicate characteristics of representative digital cities.

In the United States, America Online (AOL) has developed a series of digital cities[2], each corresponding to a physical city. These cities use a unified interface and transmit hot news about their cities like the mass media. Digital City Amsterdam[3] is run by a non-profit organization and provides free network services for the citizens of the city, especially minorities in Amsterdam. It consists of HPs grouped into information-based neighborhoods, within an original interface design. Virtual Helsinki[4] has developed three-dimensional (3D) virtual spaces on a multi-media high-speed network for the citizens of Helsinki. Using virtual reality modeling language (VRML) technology, it is based on a precise 3D model of the city of Helsinki, and Virtual Helsinki is planning to implement many kinds of online services. In October 1998, we started a project to develop a digital city as a social information infrastructure for Kyoto.

On the other hand, various map-based information services that visualize city information on a map according to their geographical attributes have been proposed. The following are typical examples in Japan: Mapion[5] provides online map images that include advertisement information, and MapFan Web[6] also supplies online map images not only to desktop computers but also to mobile terminals. These services enable users to browse city information on a map and navigate to precise information from the displayed information entries.

Image map

The WWW is regarded as a user community based on Web servers on the Internet[7]. Most of the digital cities available today are also created on it. The distributed information in these digital cities is described in hypertext markup language (HTML) and contains text information, multi-media information (such as images and sounds), and hyperlinks. A hyperlink is a navigational function described as a tagged text or graphics with reference to another Web page. When a user clicks a hyperlink, the user can jump from his/her current page to the linked page and browse its information.

An image map is an extension of the hyperlink and one of the most important functions of the current WWW. It enables users to navigate other Web pages by clicking a specific area of a whole image. The image map implementation is classified into one of two types according to the decoder of the image clicking: server side image map or client side image map[8]. Although the server side image map requires passing the work of decoding the image map to the server, the client side image map does not require such passing. The client side image map is also utilized for not only online Web pages but offline HTML documents such as those stored on CD-ROM.

The image map enables various appearances in Web navigation. Typical examples of these are navigation from a top page to branch pages using button images in place of text information and navigation with a precise distribution map that enables users to browse each piece of data by clicking a sample point on the map. From the viewpoint of digital city development, the latter example is more important to show the distributed information of a physical city with geographical relationships. However, the current image map restricts users from browsing information flexibly because of several functional restrictions such as the need to switch data or images in a Web browser without reloading, displaying large images, or visualizing data on demand.

InfoMap: map-based interface

Basic idea

In the Digital City Kyoto project, we are developing a map-based interface called InfoMap for browsing online city information. Figure 1 is a screen image of InfoMap.

figure 1
Fig. 1. A screen shot of InfoMap

InfoMap displays icons on behalf of geographical objects on a map. A user can browse each object's HP by clicking its representative icon. For users to efficiently browse a lot of online city information with geographical attributes, we are developing InfoMap as a Java applet with the following extended functions. In this paper, a GeoLink is the name of a HP uniform resource locator (URL) and geographical position data for displaying a navigational icon on InfoMap.

  1. Incremental GeoLink downloading
  2. Map scrolling
  3. Switching between a wide area map and details

To let users efficiently browse a lot of online city information, InfoMap downloads GeoLinks (for displaying areas and information categories) from its data server on a Web server host via a computer graphics interface (CGI) program on demand. While downloading and displaying these GeoLinks, a user can simultaneously operate InfoMap to browse GeoLinks and navigate to respective HPs.

InfoMap uses map images in the GIF format because of the processing speed of the Java applet and copyright of the map data. We have prepared a wide area map image that covers the Kyoto metropolitan area and 84 detailed map images for viewing street-level information. An InfoMap user can switch between the wide area and detailed maps and scroll an image by dragging the mouse.

Functions of InfoMap


InfoMap displays icons on behalf of GeoLinks superimposed on the map image. If the mouse cursor enters an icon image area, then the title of the corresponding GeoLink pops up in a balloon. By clicking the icon, the HP linked from the GeoLink is displayed in a new browser window. In a listbox on the right side of the map image, the titles of all displayed GeoLinks are listed in the order of distance from the cursor point.

Map image

We have prepared one wide area map image that covers the Kyoto metropolitan area and 84 detailed map images for viewing street-level information. By clicking a button at the upper left of the map image, the map image switches between the wide area (figure 1) and detailed maps (figure 2). Map scrolling is also available by dragging the mouse on the map image or using scroll bars.

figure 2
Fig. 2. InfoMap with a detailed area map image


InfoMap has category buttons at the right of the map image for switching between superimposed information categories. The categorization of GeoLinks is based on the categories in the local yellow pages which are coordinated with hierarchies of popular search engines and directory services, and which are specified for online city information with geographical attributes.


The search function of InfoMap at the upper right of the map image allows a user to look up keywords in the GeoLink database. The search function has two steps: (1) look up only keywords in the downloaded data such as a title (this means that this search is offline and there will be quick response), and (2) access the back-end system to search for a local search engine that contains all of the HPs referred to by the GeoLinks for keywords.

Back-end system architecture

After InfoMap starts on a Web browser, it downloads the GeoLinks within the map image area and the selected category from the data server at the same host as the Web server. InfoMap also downloads specified parts of GeoLinks at events such as switching categories or changing displayed map areas. Figure 3 shows the system architecture of InfoMap and its back-end system.

figure 3
Fig. 3. An architecture of back-end system

Within this architecture, all files and data are transferred via the HyperText Transfer Protocol (HTTP). At the beginning, a Web browser receives an HTML document and class files of InfoMap from a Web server, and then InfoMap starts on the Web browser. Next, InfoMap accesses a GeoLink server on the same server host as the Web server for downloading GeoLinks via a CGI program on the server host. Because of security issues with Java applets, the GeoLink server should be on the same host as the Web server.

GeoLink SQL

Access from InfoMap to the GeoLink server is based on the GeoLink structured query language (SQL). The GeoLink SQL is a query language that integrates Web query languages such as W3QL[9,10] and WebSQL[11,12] and generic links that are created between HPs by geographical relation operators of GIS for every user request. A query described in the GeoLink SQL is searched for by repetition of expanding links according to a search path noted in a path expression and the evaluating conditions of HPs extended from expanded links. The GeoLink SQL will be discussed in another article.

A part of the GeoLink SQL is used for search queries which are requested from InfoMap to the back-end data server via a CGI program. The following query is a request example from InfoMap that orders a search of GeoLinks for the selected category and specified map area.

    1  SELECT  target.url
    2  FROM    target
    3  WHERE   within(target,x1,y1,x2,y2)
    4          target.category eq 'shopping'


The GeoLinks that are displayed on the map image of InfoMap as icons are combinations of the URL information of an HP and geographical positions indicated by the HP contents. These GeoLinks should be arranged on the GeoLink server host before being used from InfoMap.

The arrangement of the GeoLinks needs to allow a user to extract information representing geographical positions from HPs and to find the coordinates of the positions as longitude and latitude using GIS. There are three HP retrieving methods: (1) search according to results of exploring stores and buildings on a street of the city; (2) extraction by Web robots without selection; and (3) registration by accepting applications from HP owners in a target area. There are also two methods for extracting positional information from HPs and finding their coordinates: (1) extraction of positional information using morphological processing and finding their object attributes in GIS; and (2) manual check and comparison of information.

The arranged GeoLinks are added to their information categories and evaluated from the point of view of the reasonableness of each GeoLink. Digital City Kyoto defines a reasonable HP as (1) one that a shop or a company creates itself and owns, (2) one that is a widely recognized official HP even if a third party owns and creates it, or (3) an HP with rich and accurate information. We have also gotten link permissions from owners of HPs stored and open to the public on the Internet, as GeoLinks, for the purpose of developing the Digital City Kyoto prototype.

Figure 4 and figure 5 are examples of GeoLinks displayed on InfoMap. Figure 4 shows a distribution map of GeoLink's dining category information. The map indicates the tendency of many restaurants to concentrate in the downtown area of Kyoto city. Figure 5 shows a distribution map of GeoLink's public transportation information. The map indicates that this category contains the HPs of stations and bus stops located along streets.

figure 4
Fig. 4. Dining information

figure 5
Fig. 5. Public transportation information

Usability test

In this section, we describe results of a usability test on InfoMap and examine interface issues of map-based systems indicated by the results.

The usability test took an interview style such that a tester observed operations of InfoMap by a test subject and asked questions on each operation interactively. The subjects of this test were four persons (this test was a pre-test to a large-scale usability test). Beginning with no explanation, the tester observed which functions of InfoMap the subject used and how often these functions were used. Then, the tester illustrated how to use InfoMap to the subject. Finally, the subject searched for targets designated by three searching scenarios using InfoMap.

Evaluations of the InfoMap functions

At the beginning of the test, the subjects used InfoMap with no explanation. The comments on each function of InfoMap were as follows.


The subjects reported that the function of title information popping up in balloons is helpful when a lot of icons are displayed on the image map (to learn how something works).

Map image

The functions of the map image such as map scrolling and switching map images between the wide area and detailed maps were used by all of the subjects without any trouble. According to the tester's observations and subjects' comments, the typical search procedure was ascertained: the subject first surveyed using the wide area map image and selected targets roughly, by category and area, and then switched to the detailed map images.


The GeoLinks were classified into categories based on the categories of the local yellow pages and hierarchies of popular search engines and directory services, because the GeoLinks have both the geographical attributes found in a real city and the online attributes found on the Internet. According to the subjects' comments, however, there were some GeoLinks that did not belong to intuitive categories.

The reasons that such categories were not intuitive were assumed to be because the keywords used for the categorization were unsuitable and the number of categories and number of included data were unbalanced. We will investigate these problems and revise this function in the future.


According to the observations and the comments, differences appeared in the satisfaction of the search results, between search by only keyword (such as traditional information search services) and search by keyword and map image (such as InfoMap). The search of InfoMap does not look for unidentified online information but contents related to an object that is in the physical city and in the displayed map area; a user who has the feel of the place and knows the search target better may not feel satisfied. One subject commented about not feeling satisfied since a lot of the search results were displayed on the map image and there was no way to filter out the meaningful information from them. We think that such a situation is a common issue for map-based information systems and indicates the necessity of information filtering and improvements in the visualization methods for search results.

According to the search keyword log of InfoMap in Digital City Kyoto, InfoMap users tended to use proper nouns such as exact addresses or street names as search keywords and rarely used common nouns such as names of information categories.

We therefore plan on revising this search function based on the observations of user search behaviors while simultaneously enhancing the GeoLink data.

Scenario test

To uncover any issues concerning information search on the map-based interface InfoMap, we set up scenario tests for the subjects to search for targets designated by three searching scenarios using InfoMap. Table 1 shows the ratios of successes to trials in the scenario tests.

Table 1. Scenario test results
Scenario Success/Total
Direct search 4/4
Browse-and-compare 4/4
Investigative 2/4

In this section, we describe the search results of the scenario tests and the subjects' search behaviors and discuss the results.

Direct search

The first search target was Kiyomizu temple, one of the most famous tourist spots in Kyoto city. Kiyomizu temple is registered among the GeoLinks and is found using the navigating function or the search function of InfoMap.

In the first scenario, all of the subjects succeeded in finding the temple using InfoMap. While searching, two of the subjects selected the sightseeing category, and then one of them found the target using the search function of InfoMap; the other found it by clicking the map based on his knowledge of the place. The other two used the search function of InfoMap at first and searched for the temple by the keyword "Kiyomizu temple."

Browse-and-compare search

The second search target involved the Chinese restaurants with a price range of no more than 3000 yen. The subjects needed to access not only the inside data of InfoMap but also each Chinese restaurant HP linked from InfoMap and to browse each of them to check the available information.

In the second scenario, all of the subjects succeeded in finding the targets. They all selected the dining and Chinese categories of InfoMap at first, and then accessed each HP displayed on InfoMap as an icon for checking the price range. In this test, every subject searched each restaurant.

Investigative search

The third search target was the HP of a Kyoto city office. At the time of this test, the title of the HP on the Internet was not "Kyoto city office" but just "Kyoto city." Accordingly, the subjects needed to find out possible HPs of the target at first, and then investigate the contents of each HP.

In the third scenario, two of the subjects succeeded in finding the target; however, the other two failed to do so. Three of the four subjects selected the services and public categories of InfoMap, but one of them failed to find the office although he switched to the detailed map image and browsed HPs linked from the displayed icons based on his knowledge of the place.

This result indicated that a user may fail to find a target HP even if he/she uses the tools integrated search engines and maps; the relation between the title of the target HP and the commonly known name is not always clear.

Advantages of and issues regarding map-based interfaces

One of the advantages of map-based interfaces is that they enable users to browse city information while keeping the positional relation in the physical city. We confirmed that users are able to use the basic functions of InfoMap such as browsing HPs by clicking the icons of GeoLinks on the map image without any trouble through the usability test.

Through the usability test, we also found problems that needed to be solved, e.g., differences between users' expected results and system output, with the category function and the search function of InfoMap. Although both functions aim at assisting users with information search in InfoMap, the category function has a problem in that some of the information does not belong to intuitive categories and the search function is assumed to be used for different categories of search keywords from practical search usages in Digital City Kyoto.

The results and the subjects' comments throughout the usability test also suggested that drawing map images that are easy to understand and affording users next options to current situations of search sequences are important for map-based interfaces. The drawing of map images faces a great deal of controversy. In map-based interfaces, a lot of city information is superimposed on map images so that important factors are assumed for map scale flexibility in displaying data on the same map image (in the case of data comparison), path searching between two points, and information filtering for displaying only necessary data.

According to the subjects' comments, it was hard to find the next available options to the current situation such as path searching for the shops found in InfoMap, searching for transport facilities near there, and searching for information close to a station. The problem resulted from the inability of the subjects to get the expected information, although they thought it would be easy to get such information from some other data sources or find it on the map image. To solve this problem, we must assume that such information is important to enrich the available contents from map images and to enable users to search for targets with other scenarios besides the current direct keyword search. The queries described in the GeoLink SQL are expressive of many types of searches for targets with scenarios, so we plan to investigate the possibilities of querying based on users' search behaviors and incorporating software agents to support search operations with useful knowledge.


In this paper, we proposed a map-based interface called InfoMap and illustrated its system architecture, its back-end system, and contents in Digital City Kyoto. We also presented usability test results of InfoMap and issues concerning the map-based interface.

InfoMap is currently accessible via the Internet, as one of the interface systems of the Digital City Kyoto prototype[13]. We also plan to enrich the distributed contents to include not only HPs but also real-time sensory data and various communication tools in the physical city and to incorporate software agents to support search operations with useful knowledge.


  1. Ishida, T., Akahani, J., Hiramatsu, K., Isbister, K., Lisowski, S., Nakanishi, H., Okamoto, M., Miyazaki, Y., and Tsutsuguchi, K.: "Digital City Kyoto: Towards A Social Information Infrastructure," Cooperative Information Agents III, pp. 23-35 (1999).
  2. Digital City, Inc.:
  3. De Digital Stad:
  4. Helsinki Arena 2000:
  5. Mapion:
  6. MapFan Web:
  7. Musciano, C., and Kennedy, B.: "HTML: The Definitive Guide, 3rd Edition," O'Reilly (1998).
  8. Cheong, S., Brantley, P., and Doyle, M.: "Polymap: A Versatile Client-Side Image Map for the Web," Fourth International World Wide Web Conference (1995).
  9. Konopnicki, D., and Shmueli, O.: "W3QS: A Query System for the World Wide Web," In Proceedings of the 21st International Conference on Very Large Data Bases, pp. 54-65 (1995).
  10. Konopnicki, D., and Shmueli, O.: "Information Gathering in the World Wide Web: The W3QL Query Language and the W3QS System," ACM Transactions on Database Systems, Vol. 23, No. 4, pp. 369-410 (1998).
  11. Mendelzon, A., Mihaila, G., and Milo, T.: "Querying the World Wide Web," International Journal on Digital Libraries, Vol. 1, No. 1, pp. 54-67 (1997).
  12. Mendelzon, A., and Milo, T.: "Formal Models of Web Queries," In Proceedings of the 16th ACM Symposium on Principles of Database Systems, pp. 134-143 (1997).
  13. Digital City Kyoto: