Web-Based Sea Level Change Simulation System Using PNG Elevation Tiles and Smart Tile Architecture

We have developed a web-based processing system that can simulate positive and negative sea level changes globally by selecting the best Digital Elevation Model (DEM) for a target region from multiple DEMs. A PNG elevation tile format is used as the DEM format, which reduces the DEM data size. The PNG tile format implements client-based processing, and the DEM data are provided from different websites. In addition, the smart tile architecture is adopted, which enables on-demand simulation by adding a tile conversion process ( i.e., a DEM selection process) during image drawing by using JavaScript. To demonstrate the system, we have employed three DEMs, i.e., the Geospatial Information Authority of Japan (GSI) map (~10-m resolution), the ASTER Global Digital Elevation Models (ASTER GDEM version 3) as global land area (~30-m resolution), and the General Bathymetric Chart of the Oceans as bathymetric data (~1000-m resolution). The ASTER Global Water Bodies Database is also used in the data selection process. The GSI provides their DEM in a PNG elevation tile format, and the other data are provided by the Geological Survey of Japan in PNG elevation tile format. We assume the current DEM sea level as 0 m, and the sea level can be changed to an arbitrary integer value ( −10,000 to 10,000 m). Combining ASTER GDEM for land and GEBCO for sea makes it possible to target DEM of the whole earth. Moreover, it was shown that if a higher resolution DEM is available, it is possible to combine the higher resolution DEM in that area. The combining the PNG elevation tile format with the smart tile architecture demonstrates the possibilities of a client-based web processing service like that of the server-based OGC Web Processing Service.

• DEM
• Sea Level
• PNG Elevation Tile
• Smart Tile Architecture
• Web Processing

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 × 2¹⁶ + green × 2⁸ + blue

if x < 2²³, h = x × u,

if x = 2²³, h = NA,

if x > 2²³, h = (x − 2²⁴) × 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

Data Source	region	data type	Service URL temple
GSI map	Japan	10 m spatial resolution DEM	https://maps.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png
GDEM version 3	Global	30 m spatial resolution DEM	https://gbank.gsj.jp/tiles/elv/gdemv3/png/{z}/{y}/{x}.png
Water Body	Global	30 m spatial resolution water body	https://gbank.gsj.jp/tiles/elv/waterbody/png/{z}/{y}/{x}.png
GEBCO	Global	Bathmetry data	https://gbank.gsj.jp/tiles/elv/gebco/{z}/{y}/{x}.png

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 2⁸R + G + B/2⁸ −32,768. MapBox proposed the Terrain-RGB tile format for elevation [20]. Elevation of each pixel is calculated from RGB values by −10,000 + ((2¹⁶R + 2⁸G + B) * 0.1. Table 2 compares

Table 2

Comparison of elevation tile formats

Elevation tiles	PNG Elevation Tiles	Amazon	MapBox
	Elevation Tile	Terrain Tiles on AWS	Terrain-RGB
Format	PNG (~100 KB/tile)	PNG, TIFF, HGT	Terrain-RGB
Formula to express height x	x = 216R + 28G + B if x < 223, h = xu if x = 223, h = NA if x > 223, h = (x − 224)u u: resolution for elevation	x = (28R + G + B/28) − 32,768	x = −10,000 + ((216R + 28G + B) * 0.1)
Map Projection	Web Mercator
Minimum elevation value resolution	1 m or 1/100 m	1/256 m	0.1 m
Characteristics	High versatility	Resolution and offset are fixed
	Considers expressions of invalid values		Unable to represent less than −10,000 m
	https://maps.gsi.go.jp/development/demtile.html	https://aws.amazon.com/jp/public-datasets/terrain/	https://www.mapbox.com/blog/terrain-rgb/

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).

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.

Conflicts of Interest

The authors declare no conflicts of interest regarding the publication of this paper.

References

1. NASA (2014) Shuttle Radar Topography Mission (SRTM). https://www2.jpl.nasa.gov/srtm

2. Tachikawa, T., et al. (2011) Characteristics of ASTER GDEM Version 2. International Geoscience and Remote Sensing Symposium (IGARSS), Vancouver, 24-29 July 2011, 3657-3660. https://doi.org/10.1109/IGARSS.2011.6050017

3. NASA (2019) New Version of the ASTER GDEM. https://earthdata.nasa.gov/learn/articles/new-aster-gdem

4. Fujisada, H., Urai, M. and Iwasaki, A. (2018) Technical Methodology for ASTER Global Water Body Data Base. Remote Sensing, 10, 1860. https://doi.org/10.3390/rs10121860

5. Weatherall, P., et al. (2015) A New Digital Bathymetric Model of the World’s Oceans. Earth and Space Science, 2, 331-345. https://doi.org/10.1002/2015EA000107

6. Geospatial Information Library (2017) Geospatial Information Authority of Japan. (In Japanese)

7. Ni, W., Sun, G. and Ranson, K.J. (2015) Characterization of ASTER GDEM Elevation Data over Vegetated Area Compared with Lidar Data. International Journal of Digital Earth, 8, 198-211. https://doi.org/10.1080/17538947.2013.861025

8. Du, X., et al. (2016) Vertical Accuracy Assessment of Freely Available Digital Elevation Models over Low-Lying Coastal Plains. International Journal of Digital Earth, 9, 252-271. https://doi.org/10.1080/17538947.2015.1026853

9. Crippen, R., et al. (2016) Nasadem Global Elevation Model: Methods and Progress. International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences—ISPRS Archives, 41, 125-128. https://doi.org/10.5194/isprsarchives-XLI-B4-125-2016

10. Leitao, J.P., Prodanovic, D. and Maksimovic (2016) Improving Merge Methods for Grid-Based Digital Elevation Models. Computers and Geosciences, 88, 115-131. https://doi.org/10.1016/j.cageo.2016.01.001

11. Tingle, A. (2006) Flood Map. http://flood.firetree.net

12. Roth, R., Quinn, C. and Hart, D. (2015) A Competitive Analysis of Web-Based Water Level Visualization Tools. http://www.geography.wisc.edu/faculty/roth/publications/RothEtAl_2014_CartoCon.pdf

13. Burle, S. (2019) Flood Map Water Level Elevation Map. https://www.floodmap.net

14. Giuliani, G., et al. (2012) WPS Mediation: An Approach to Process Geospatial Data on Different Computing Backends. Computers and Geosciences, 47, 20-33. https://doi.org/10.1016/j.cageo.2011.10.009

15. Wagemann, J., et al. (2018) Geospatial Web Services Pave New Ways for Server-Based On-Demand Access and Processing of Big Earth Data. International Journal of Digital Earth, 11, 7-25. https://doi.org/10.1080/17538947.2017.1351583

16. Giuliani, G., Dubois, A. and Lacroix, P. (2013) Testing OGC Web Feature and Coverage Service Performance: Towards Efficient Delivery of Geospatial Data. Journal of Spatial Information Science, 7, 1-23. https://doi.org/10.5311/JOSIS.2013.7.112

17. Nishioka, Y. and Nagatsu, J. (2015) PNG Elevation Tile: Design and Implementation of the Elevation File Format for Web Use. Geoinformatics, 26, 155-163. https://doi.org/10.6010/geoinformatics.26.4.155

18. Nishioka, Y. and Nagatsu, J. (2015) Design of Smart Tiles System Architecture and Application to Seamless Geological Map of Japan. Geoinformatics, 26, 113-120. (In Japanese) https://doi.org/10.6010/geoinformatics.26.3_113

19. Amazon (2017) Terrain Tiles on AWS. https://registry.opendata.aws/terrain-tiles

20. MapBox (2016) Terrain-RGB. https://docs.mapbox.com/help/troubleshooting/access-elevation-data