Building the Roman Empire Vector Tile Map
In our previous article, we wrote about the difference between raster tiles and vector tiles, http://commons.pelagios.org/2017/09/rdg-update-the-roman-empire-vector-map-project/. Now, we will be able to study the outcome. The technicalities of the process will be discussed, and the result as of now can be studied here https://klokantech.github.io/roman-empire/#3.97/45.49/6.47. The section “Display the vector tiles with style” goes over the functionalities of the map.
The input layers for the map have been extracted from the SQL-database of DARE, https://dare.ht.lu.se with a subset of the attributes, that is, places, roads, fortifications and provinces. The files can be edited in a desktop GIS application such as QGIS. Since we are publishing the data on Github, only data with an open license has been included in the project. They are all vector layers (point and line geometries) and have been converted to GeoJSON format in WGS 84 projection. They can be explored from the website of the project at Github, https://github.com/klokantech/roman-empire in the data directory and previewed on a map. Among the input files are also the icons (in SVG format) that depict places of different types, and server scripts.
The vector tile building process is set up to be automated which means that when one of the input files changes, updated vector tiles are generated to replace the old. The program behind this is called Tippecanoe and is developed by Mapbox, https://github.com/mapbox/tippecanoe. The program builds vector tilesets from collections of GeoJSON features and other input data. Each GeoJSON is first built as a MBTiles file (vector tile) and later merged together as a single file. It is, technically, a SQLite database. The current DARE base map, https://dare.ht.lu.se is also a topographic map containing a color relief and hillshade. They will be kept outside of the MBTiles file because they are built from raster data. In the final map, they will appear together with the MBTiles as separate layers. A detailed account on the specification and format of the MBTiles is outside of the scope of this article. However, it is basically a database file that can be addressed to output vector tiles given the zoom level and the x and y coordinates. This is the case in the pre-rendered raster tiles of the current DARE map as well. MBTiles needs to be hosted as a service on a web server. If you want to do this on your own, Klokantech has developed free server software for this purpose. The software is called TileServer GL, https://openmaptiles.org/docs/host/tileserver-gl/.
Composing a style
When using MBTiles, geodata and style are separate. This means that different styles can be applied to the same data to give the maps different looks at runtime. In this article, we show how this allows us to display place names in Latin, Ancient Greek and Modern names respectively. This works because the place data file store the different languages names in separate attribute fields. Maputnik is a free and open visual editor for styling MBTiles using Mapbox GL styles developed by Klokantech. Another one is Geofabrik and there are others, https://github.com/maputnik/editor. Figure 1 shows the style editor in Inspect Mode to study the raw geodata of the MBTiles file with pseudo-colors.
With Maputnik it is possible to build a style from scratch or to modify an existing style. Our aim has been to create a style based on the existing look and feel of the current background map of DARE. DARE was styled in a similar fashion using the style editor. However, one advantage with vector tiles is how one directly can assess the impact of changes in styling in the visual editor: with raster maps, it is necessary to do the styling in blind and then produce a small sample map to see the outcome. The style output from the editor is a json file that describes the sources of the final map, including the raster sources and their layers to be combined with the vector tiles. Within the vector source, (roman_empire.mbtiles) there are 35 layers that describe the unique combinations of symbols and labels to be displayed on the map. The settings include source layers (e.g. places), zoom levels specifying when the symbol should first appear, the symbols themself, colors of line geometries (e.g. borders and roads) as well as text fonts and coloring. There are still more style options that will determine the final appearance of the map.
Upon changes in the style, a new version of the style json file needs to be exported and uploaded to the Github repository to replace the old style. You can try out to style the map yourself. Follow the link “Edit Online” at the bottom of the Github start page of the project. Designing a style to a map from scratch can be tricky, but experience in designing raster tiles help since the technology is similar.
Display the vector tiles with style
Now we are finally ready to display the map. At the bottom of the start page of the project there is a link “Browse the map”. The link will take you to a page where the map is hosted,
At the bottom-left corner of the interface is a dropdown menu where the language for the place names can be selected. The options are Latin, Ancient Greek and Modern place names. Greek names are not available for all Latin place names, although it is a growing number of names. Try for yourself and see for instance how Massalia, becomes Μασσαλία and Marseille. In this case we are manipulating the loaded style directly. This effect could also have been achieved through changing the complete style. Since time-period is also part of the data, it is possible to make maps of different historical periods by changing the style of the map. Geodata itself could also be read directly from the map by calling API methods of Mapbox GL JS.
There is one more feature of Vector tiles to be explored. The button below the zoom control is in fact a compass. It is possible to rotate the map, that is, the topography is rotated, but the text labels and symbols are kept in a horizontal position. The map could also be tilted using the same button to achieve a 3D effect on the landscape. In figure 5 we are looking at the Rhône valley from above at 60 degrees heading North towards Lyon. By using this functionality we can put ourselves in positions of historical actors, for example Caesar’s position at the start of the Gallic Wars.
In the next and final article we will come back to exploring the new possibilities with Vector tiles and how this map could be used in a new interface of the Digital Atlas of the Roman Empire and other historic GIS applications of the Pelagios network.
Johan Åhlfeldt, email@example.com
Petr Pridal, firstname.lastname@example.org