Web-Based Sea Level Change Simulation System Using PNG Elevation Tiles and Smart Tile Architecture ()
1. Introduction
Significant volumes of data have been developed for digital elevation models, and such data differ in various ways, e.g., data sources, spatial resolution, and coverage. Shuttle Radar Topography Mission (SRTM) data are widely used as near-global data from 60 degrees north latitude to 56 degrees south based on space shuttle observation in 2000 by the United States National Aeronautics and Space Administration [1]. The Advanced Spaceborne Thermal Emission and Reflection Radiometer (ASTER) Global Digital Elevation Model (GDEM; version 1), which has spatial resolution of 1 arc-second, was released to the public in May 2009 [2]. These data cover 83 degrees north latitude to 83 degrees south, which is 99% of the planet’s land surface. Version 3 of the Advanced Spaceborne Thermal Emission and Reflection Radiometer (ASTER) GDEM is now available [3]. The ASTER Global Water Bodies Database is a new data containing water body attribute generated from ASTER as a part of ASTER GDEM ver3 [4]. Both land area and global bathymetry data (The General Bathymetric Chart of the Oceans; GEBCO) are available [5]. On a regional scale, the Geographic Authority of Japan (GSI) released a high-resolution (10 m for all of Japan) digital elevation map of Japan [6]. Many researchers have compared these global and regional DEMs to select better accuracy data for target region [7] [8]. In addition, some researchers have attempted to combine these data to obtain a more accurate dataset than single DEM. NASADEM is a near-global elevation model that was primarily produced by completely reprocessing the SRTM data and merging the reprocessed data with refined the ASTER GDEM [9], noting that improved merge method has also proposed [10]. However, if any of the original data are updated, the combined data must also be updated. To date, combining multiple DEM data sources has been limited.
DEMs are used for sea level simulation. For example, there are web-based systems that display sea level rise simulation results. Tingle developed a system to simulate sea level rise using the Google Maps API and SRTM data [11]. The Google Maps API requires the preparation of tiles for each zoom level; thus, 15 sets of tiles for 15 different flood levels (0, 1, 2, 3, 4, 5, 6, 7, 9, 13, 20, 30, 40, 50, 60 m) are prepared in advance. This preprocessing step enables fast access to results. However, it is difficult to replace the data source, and this system cannot display other flood levels, e.g., 10 m. A competitive analysis of web-based water level visualization sites has been presented previously [12]. Of the 25 visualization sites, seven rely upon insecure proprietary plugins (i.e., FlashPlayer or Flex) to run a binary executable and cannot be loaded on a smartphone or tablet. Among the other 18 visualization sites, 13 use the Google Maps JavaScript API, seven use the ArcGIS JavaScript API, two use Leaflet and OpenLayers, and one uses MetaCarta. For example, the Flood Map Water Level Elevation Map site uses the Google Maps JavaScript API [13]. This service displays not only positive sea level but also negative sea level at an integer level. This service uses multiple data sources as DEM data sources, including bathymetry. However, the API used in the Flood Map is not open source, and the DEM data are not provided by the original data source. For example, the ASTER GDEM has been released three times, and the service provider had to update the data with each release. On-demand processing is required to combine multiple DEM data and replace a source easily. The OpenGIS® Web Processing Service (WPS) Interface Standard provides rules for standardizing how inputs and outputs (requests and responses) for geospatial processing services [14] [15]. However, the WPS and Web Coverage Service are not used as widely as the Web Mapping Service (WMS) [14] [16]. The WPS was proposed because client computing power was low network transfer speeds were slow; however, the network environments and the calculation speed of client computers are improving. The WPS is a powerful tool for complex on-demand processing; however, for simple web processing, client-based services are an alternative. Nishioka and Nagatsu proposed the PNG elevation tile, which is a new DEM format for web-based processing [17]. In addition, they proposed the Smart Tiles Architecture, which is high-speed tile conversion processing between conventional pyramid tiles on the server side in a tile map system and client display processing [18].
The status of DEM generation and the sea level change simulation system existing on the web is summarized as follows. Low-resolution DEMs covering a wide area and high-resolution DEMs covering specific area are provided and updated. A sea level change simulation system that combines these are provided, too. However, the system corresponding to the update of each DEM data and change the sea level value interactively is limited. It is possible to develop such a server processing system by using WPS. The sea level change simulation system proposed this time is a system that enables interactive processing on the client side. In this study, we propose to use PNG tile and Smart Tiles Architecture to process multiple DEMs provided by multiple organizations and display the processing result. For the implementation, a client-based global sea level simulation system was developed by combining three different data sources. The remainder of this paper is organized as follows. In the Section 2, two main technologies, i.e., PNG tile format and Smart Tiles Architecture are introduced. In the Section 3, implementation of the sea level simulation system is explained. In the Section 4, comparison with another format with PNG tile format is discussed. Also, some findings in the data by using this system are introduced.
2. Methodology
To develop a multi-source, DEM-based, and client-side interactive global sea level simulation system, we employed the PNG elevation tile and Smart Tiles Architecture. These concepts and their implementation in the system are discussed in the following.
2.1. Smart Tiles Architecture
A tile-based map data distribution is used in web GIS, such as the Google Maps APIs. In such systems, conventional pyramid tiles are placed on the server side and displayed via client-side processing. To improve interactive processing, the Smart Tiles Architecture provides high-speed tile conversion between conventional pyramid tiles on the server side in a tile map system and client display processing [18]. This architecture is faster and more functional than existing technologies that use WebGIS, WMS, and typical tiles. The tile conversion process can be implemented on both servers and clients. Figure 1 compares the existing and proposed methods. By avoiding the concentration of processing on the server side, it is possible to obtain RGB values from the tile image that is displayed and cached on the client’s computer, perform interactive processing on the client side, and display the result.
We applied this Smart Tiles Architecture to DEM selection using a client-side implementation. We set the DEM data selection procedure as the conversion processing for sea level processing. The selection rule is described in Section 3.
2.2. PNG Elevation Tile
The PNG elevation tile format was designed for elevation data suitable for web processing [17]. Like Google Maps, the conventional pyramid tiles are prepared in advance for each zoom level on the server. To make the resulting map shape square, which allows easier logic for tile selection, the northern and southern parts of the polar area (above 85.0511 north; below 85.0511 south) were cut off. Here, zoom level zero assumes a square tile sheet of the entire surface of the earth. Zoom level one can be divided into four square regions based on zoom level zero. At any zoom level n, the number of tiles is represented by the power of 2n. Note that tiles must be prepared in advance for each zoom level, but only required tiles are accessed for each zoom level; thus, processing is quick. The altitude value of the pixel coordinate is computable from the RGB value of a pixel by using PNG elevation tile. Compared with other format, file size of the PNG elevation tile becomes small file size (approximately 100 KB/tile). Here, elevation value of each pixel is calculated from RGB values by the following equations:
Elevation
x = red × 216 + green × 28 + blue
![]()
Figure 1. Comparison of existing and proposed methods.
if x < 223, h = x × u,
if x = 223, h = NA,
if x > 223, h = (x − 224) × u,
u: resolution for the elevation.
With this formula, the vertical resolution of the elevation can be expressed 1 m or 1/100 m accuracy.
3. Implementation
We developed a sea level simulation system (positive and negative) based on the following specifications. The user specifies water level as a threshold interactively on the web.
If the water level (altitude value) set by the user is less than 0 m, the region in bathymetry is filled with black (land). If the water level (altitude value) is less than the threshold in inland, the region is filled with blue (water). In the tile conversion process, when the altitude values of arbitrary coordinates become less than the threshold value, the region will be filled in blue (water). The threshold can be selected from −10,000 m to 10,000 m at an integer level. Three DEMs are used in this system, i.e., the GSI map, the ASTER GDEM, and the GEBCO. The data sources used in the system provided as PNG elevation tiles are as Table 1.
Data selection rule is described as follow. As the spatial resolution of the GSI map is the highest (10 m), if the GSI map covers the region of interest, it will be used as the base DEM if the elevation is valid. If the GSI map does not cover the region of interest or the elevation value is invalid, the ASTER GDEM will be used as secondary data. Note that GEBCO will be selected if GSI and ASTER GDEM are not available. The detailed flow of the data selection rule is show in Figure 2. Procedure for the code is listed in the end.
The JavaScript data selection program is stored on the server, and the client downloads and uses the JavaScript program.
Figure 3 shows the simulation result when the threshold is selected as 5 m around Japan. In this case, GSI map is selected as the primary data. Figure 3 image shows the result when the threshold is selected as −1234 m around Eastern Mediterranean. In this case, GEBCO is used as the DEM data.
![]()
Table 1. PNG elevation tiles used in this system.
![]()
(a) ![]()
(b)
Figure 2. Data processing flow: (a) water level is below 0 m; (b) water level is above 0 m.
4. Discussion
Here, we discuss the advantage of the proposed system in terms of file format and distributed data.
4.1. Comparison of PNG Elevation Tile and Other Tile Formats
There are several file formats that are like the PNG elevation tile. Amazon proposed Terrain Tiles for AWS [19]. In Terrain Tiles, 3-m and 10-m data from the United States’ 3D Elevation Program, 30-m SRTM, and Global Multi-resolution Terrain Elevation Data (GMTED), and ETOPO1 data are used as the base map, which are combined in advance and updated by one of Amazon’s corporate partners. The Terrain Tiles is available on the Amazon data storage service. PNG, TIFF, and HGT are the covered data formats. Elevation of each pixel is calculated from RGB values by 28R + G + B/28 −32,768. MapBox proposed the Terrain-RGB tile format for elevation [20]. Elevation of each pixel is calculated from RGB values by −10,000 + ((216R + 28G + B) * 0.1. Table 2 compares
![]()
![]()
Figure 3. Sample image of the simulation results: (top) around Japan (elevation value: 5 m); (bottom) around Eastern Mediterranean (elevation value: −1234 m).
![]()
Table 2. Comparison of elevation tile formats.
existing tile formats. Compared to the other two formats (Terrain Tiles on AWS and Terrain-RGB), the PNG elevation tile demonstrates higher versatility.
4.2. Data Source Errors Visualized by Proposed System
The developed sea level simulation system processes GDEM version 3 and the ASTER Global Water Bodies Database to show errors in these tiles. For example, although sea pixel values are transparent according to their definition in GDEM version 3, some areas are expressed as 0 m. Figure 4 shows the area around Hangzhou Bay. The tile (Z = 8, X = 215, Y = 105) in Figure 4 shows a mix of pixels whose waters are transparent (light blue) and pixels with elevation of 0 m (RGB 0, 0, 0). Therefore, it is necessary to use the Water Body tile together to read the elevation value correctly.
Similarly, there is an area in the Water body tile that has not been correctly identified as a sea area. Figure 5 (left) shows the northern part of the Bering Sea. There are places that are incorrectly identified as land (“other” in the definition of the GDEM Water body tile) in the sea (light blue square in the figure). Figure 5 (right) shows the Black Sea. Part of the Black Sea is identified as a river (i.e., a body of water on land).
![]()
Figure 4. Error in GDEM version 3 around Hangzhou bay.
![]()
![]()
Figure 5. Errors in the GDEM water body tiles: (left) water body tiles northern part of the Bering Sea (light blue area exist in the sea); (right) Black Sea (bright blue area in the black sea is assigned as river).
It is possible to obtain elevation values for these locations; however, the simulation may not run correctly if a water level of 0 m or less is specified. By using this sea level simulation system to process elevation data, it is possible to easily determine errors contained in the data as demonstrated above. Thus, it will be easy for the data provider to correct the corresponding data.
5. Conclusion
In this paper, we have proposed to use the Smart Tiles Architecture, a high-speed tile conversion processing between the conventional pyramid tiles on the server side in a tile map system and client display processing and PNG elevation tile, which enables to process multiple DEMs provided by two organizations and displays the processing result. We have developed a client-based global sea level simulation system that combines three DEMs (i.e., the GSI map, ASTER GDEM, and GEBCO) and the ASTER Water Body Database. If the original DEMs are updated by simply replacing tiles, multiple sources do not need to be compiled. The Web Processing Service supports inputting data from multiple sources, which has high versatility; however, it also requires server-side computing resources. In contrast, the proposed method realizes client-based processing, which may lead to newly proposing the possibility of the web GIS. Elevation Tile and Terrain Tiles on AWS for DEM have been devised, those are specialized for DEM. In this study, ASTER Water Body Database also uses PNG tile format to determine the processing of data. In other words, it demonstrates the possibility of interactively processing of various types of raster tiles, not just DEM, by combining PNG tile format and smart tile architecture.
Appendix: Code for Reading Tiles
