The changing sea level is an interesting aspect of geographic and archeologic studies. To get a better impression of the changing terrain and affected areas, this web application visualizes the sea level based on elevation data from a Digital Surface Model (DSM). The result is a 2-dimensional map that allows the user to interactively explore the data. There are various possibilities to present a geographic map on the web. The simplest one would be a static image generated by desktop tools and uploaded just like any other image on the web. Though, this does not allow for any interaction with or change of the displayed data. Using many images with different states of one map, an animation can be created that could also be interactively started, paused, fast forwarded and stopped, therefore showing dynamic changes. A more advanced version of web maps is the interactive display of data where the user has full control over map extend, zoom level, and even the displayed data. Even within this category there are different possibilities to create such interactive maps. One would be a so called mash-up, where an existing service is used and data is simply overlaid (for example point locations on a google map). Using libraries such as OpenLayers or Leaflet allows for a freer setting of layout, user interface, basemap, data layers, and interaction. Some providers offer more complex web maps with tools that allow for GIS calculations, such as length or area measurement and search functionality. In that case, the application could be denoted as WebGIS. Often, WebGIS applications are built based on common mapping libraries such as OpenLayers. The joint aspect of such web maps using mapping libraries is their structure of the map data itself: To reduce the workload of the map rendering, the map is cut into tiles. Only the tiles of the current map extend are rendered, also allowing the dynamic presentation of several zoom level. One tile has a quadratic extend of 256*256 pixels, stored as .png image. Many tiles are stitched together, so when panning the map the impression of a very large continuous image is created. Each tiles has three parameters: its zoom level, its x position, and its y position. These values ensure the map tiles are displayed in the right order.
Hierarchy of map tiles (Source: https://msdn.microsoft.com/en-us/library/bb259689.aspx)
To load and display a raster file on top of a tiled basemap, it has to be tiled as well.
The data used for visualisation of the terrain is a raster image in .tiff format. The value of each pixel cell contains the terrain elevation on that position. To visualise the terrain, the height values needs to be represented by colour values. Colour is stored as a number between 0 and 255. When using only grey, the variance of possible values is limited to 256. But when using colour RGB, each band can be used to represent data, which extends the variance of possible values to 256 3 = 16'777'216. The translation from height to colour value (stretching) can be done using the tool 'gdaldem' of the GDAL library. To generate a colour relief map from any GDAL-supported elevation raster:
# gdaldem color-relief input_dem color_text_file output_color_relief_map
where color_text_file contains lines of the format "elevation_value red green blue".
In fact, it is a simple ordered list of all possibly occurring elevation values assigned to individual colours. These colours are not supposed to have a visual effect and a meaningful appearance. They are only meant to code the height value in an RGB picture. Again, the difference to a simple greyscale picture is the much higher variance of values that can be achieved using RGB, i.e. three values instead of one (grey). To overlay the web map with a raster file map tiles have to be created. This can be done using TileMill: the raster file can simply be loaded as a layer, and exported in the format '.mbtiles'. Mbtiles is a single zipped file containing all of the .png image tiles for each zoom level. With the tool 'mbutil' (available on GitHub), the mbtiles file can be unpacked to retrieve the required folder structure: ./{z}/{x}/{y}.
To view the tiles as a dynamic map in a browser, mapping libraries are used.
These libraries render the map tiles and allow for interaction like zooming and panning.
The most common libraries are written in JavaScript and work with the HTML and CSS framework of any website.
This example uses the library 'Leaflet' that is available as open source (http://leafletjs.com).
The described method for raster manipulation uses the canvas element of modern browsers.
Currently, only Leaflet and OpenLayers3 support the canvas element.
To set up a simple web map, a HTML page is created with an empty div element that will be used to display the map in (assigned via its ID tag, e.g.
'map').
In the script a new map object L.Map(); is created and associated with the div element.
The map needs some parameters like the default view (centre coordinates and zoom level), then it is ready to use with the basic interactions right away.
Various basemaps can be added as layers to the map, for example provided by Stamen with the object L.StamenTileLayer();.
Now, the DEM tiles are loaded on the canvas.
This is done using L.TileLayer.Canvas(); to allow the dynamic change of pixel colours in the browser (other TileLayer objects lack of this ability).
A function drawTile() loads the tiles from the local directory and assigns a colour to each pixel based on the RGB value of the tile source.
The colour eventually displayed in the browser is calculated dynamically in a separate function colorPixels().
Here, the RGB values representing height are classified to be displayed in a way it actually makes sense, visually, to a human viewer.
For example by using a common colour scheme for elevation maps from green to brown.
This classification is currently statically set and not to be changed by the user. Depending on the encoded value, the pixel are assigned to a class and coloured. Equally, the legend is created with static coloured boxes and text labels. The result so far is a default view of the terrain as a classified colour map.
The actual change of the raster data representation happens separately from the default visualization.
The pixel colour is changed when changing a slider’s position to indicate the sea level accordingly.
So in this case, everything below slider value should be considered as water, i.e.
represented in blue colour.
A dynamic label is indicating the current height represented by the slider position.
Technically, the slider is a <div>-object which is called from a jQuery script via its ID.
The script creates the slider with specified minimum and maximum values, sets the label according to the current value and also changes the value in the URL hash.
Based on the value of the slider label the pixel below that level are determined.
The next step would be the implementation of functions that use the colour map scheme to dynamically encode and decode back to original height value from RGB pixel values. This method allows for interaction with the representation of raster data within a web mapping environment based on tiling. Thanks to the canvas element of modern browsers, every pixel can be individually addressed and changed in its appearance. One disadvantage of this procedure is the fact that tile services always needs pre-processing of raster data before it can be displayed in the web map. Any common DEM file (GeoTIFF) has to be cut in tiles and encoded in RGB colour. Another remark: for the dynamic representation the tiles have to be stored in a local environment, they cannot be accessed remotely.