Department of Earth and Space Science and Engineering, York University

Interactive Map for the Athenians Project

Summary Report for Esri Canada GIS Scholarship

Prepared by: Aaron Boda

Enrolment Program: Geomatics Engineering

May, 2017

P a g e | 1

Contents Objective ....................................................................................................................................................................2

Introduction ................................................................................................................................................................2

Methodology ..............................................................................................................................................................2

Phase I: Data Preparation & Organization .............................................................................................................2

Step 1: Review of Hand Drawn Map..................................................................................................................3

Step 2: Georeferencing Hand Drawn Map in ArcMap .......................................................................................3

Step 3: Digitization of Features and Defining Attributes ...................................................................................4

Step 4: Producing a Shapefile Consisting of Features in Hand Drawn Map ......................................................4

Phase II: Web Development ...................................................................................................................................5

Results & Discussion ..................................................................................................................................................6

Conclusion ..................................................................................................................................................................7

References ..................................................................................................................................................................7

List of Figures

Figure 1: Prof. John Traill's hand drawn Deme map of Ancient Attica .....................................................................3 Figure 2: Visual accuracy of Georeferencing .............................................................................................................3 Figure 3: Spreadsheet sample of data manually collected from hand drawn map by Prof. Traill ..............................4 Figure 4: Shapefile for the Deme Map of Ancient Attica ..........................................................................................4 Figure 5: Attribute table of the Shapefile as viewed in ArcMap ................................................................................5 Figure 6: A Workflow for Application Development using the JS API [3] ...............................................................5 Figure 7: Steps for implementing widgets for the web app interface [3] ...................................................................5 Figure 8: A recap of widgets implemented for the web map interface.......................................................................6 Figure 9: Interactive web map with popups and dynamic shapes ..............................................................................6 Figure 10: Custom search bar implemented for the web map interface .....................................................................7

List of Tables

Table 1: Comparing services offered by various platforms for implementing a mapping interface ..........................2

P a g e | 2

Objective In present day, the Athenians Project deals with the digitization of the epigraphical (writings on stone, pottery and

metals), prosopographical (biographical data on the residents of ancient Athens) and topographical (locations on

maps of Athens and Attica) information [1]. Primarily, the project is admired for its relational database of

prosopographical information from ancient Attica with 22 volumes containing over 100,000 entries. The idea is to

modernize the project by creating an intuitive and user-friendly digitized database that can be utilized by university

libraries worldwide as a resource for classics enthusiasts. The scope includes a 3D interactive map to provide a

visual interface and a geographic information system (GIS) which can support the findings of the Athenians Project.

Introduction An interactive map is a practical and efficient manner of providing a version of a map and its attributes that is

compatible with a vast array of options in order to address a large user base. These options may include zooming

in or out on a specific location, panning between geographic areas, switching between different layers corresponding

to specific phenomenon’s, querying and analysis functions, etc. Such a system can help the user to explore spatial

relationships which would otherwise not be possible.

Owing to the increasing advancements in GIS technology, interactive maps are only becoming more detailed and

user-friendly, granting professionals the ability to interact, update, and make changes to the maps in real time. Due

to popular demand, there has been an increasing number of platforms allowing for the development and publication

of interactive maps. Since the objective is to create a mapping interface accessible through the web, Esri’s ArcGIS

API for JavaScript seemed to be the best option because of its extensive support and detailed documentation. The

following is a systematic comparison of relevant platforms that allow for developing interactive maps:

Offered Services Mango QGIS & Leaflet Mapbox Google Maps API OpenLayers ArcGIS

Location Mapping Data Management Analysis For Developers Free-to-use Option Offline

Table 1: Comparing services offered by various platforms for implementing a mapping interface

Methodology The project involved two main phases. First, the necessary data was organized and prepared in a format compatible

for web publishing. The subsequent phase was concerned with the web development process.

Phase I: Data Preparation & Organization

The data organization process included four steps as follows:

1. Review of Hand Drawn Map

2. Georeferencing Hand Drawn Map

3. Digitization of Features & Attributes

4. Shapefile Generation

P a g e | 3

Step 1: Review of Hand Drawn Map

Below is the hand drawn map prepared by Prof. John Traill1 which was used as a reference for the Web Map. The

map was scanned to produce a raster file compatible with ArcMap.

Figure 1: Prof. John Traill's hand drawn Deme map of Ancient Attica

Step 2: Georeferencing Hand Drawn Map in ArcMap

Essentially, the hand drawn map was georeferenced over an Esri basemap (in GCS WGS84) using ArcMap. The

accuracy of the georeferenced map can be seen in the images below.

Figure 2: Visual accuracy of Georeferencing

1 The hand drawn map was prepared over the course of several years by Prof. John Traill from University of Toronto. He is also the Director

of the Athenians Project.

P a g e | 4

Step 3: Digitization of Features and Defining Attributes

Once the map was accurately geo-referenced, it was necessary to manually go over each attribute in the hand drawn

map, add temporary shapes to determine latitude/longitude information and digitally record the equivalent feature

in form of a spreadsheet with its location, name, shape, color, and some other useful information. A small sample

of what is in the prepared spreadsheet can be found below.

⋮

Figure 3: Spreadsheet sample of data manually collected from hand drawn map by Prof. Traill

Step 4: Producing a Shapefile Consisting of Features in Hand Drawn Map

Creating a shapefile is a simple process once the location information of attributes is available in form of a

spreadsheet. Furthermore, this shapefile can then be implemented in the interactive map to represent the attributes

of the hand drawn map. The following is the visual representation of the shapefile overlaid on a basemap:

Figure 4: Shapefile for the Deme Map of Ancient Attica

COUNT LONGITUDE LATITUDE NAME NUMBER COLOR SHAPE QUESTION_MARK_NAME QUESTION_MARK_NUMBER ROMAN_NUMERAL NORMAL_NUMERAL SMALL_NUMERAL

1 23.445 38.176 OINOE 4 Pink Triangle N N 0 0 0

2 23.524 38.153 AZENIA 2 Pink Triangle N N 0 0 0

3 23.637 38.143 PHYLE 2 Green Square N N 0 0 0

4 23.579 38.088 KOTHOKIDAI 2 Green Square Y N 0 0 0

5 23.534 38.081 ELAIOUS 1 Pink Square Y N 0 0 0

6 23.539 38.046 ELEUSIS 11 Pink Square Y N 8 0 0

7 23.572 38.048 KOPROS 2 Pink Square N Y 0 0 0

8 23.594 38.052 THRIA 7 Green Square N N 6 0 0

9 23.647 38.077 OE 6 Green Square Y N 0 0 0

10 23.667 38.105 PELEKES 2 Blue Triangle Y N 0 0 0

103 23.712 37.966 KEIRIADAI 2 Pink Circle N N 0 0 0

104 23.733 37.962 ALOPEKE 10 Cyan Circle N N 0 0 10

105 23.705 37.996 EIRESIDAI 1 Orange Circle N Y 0 0 0

106 23.713 38.001 KOLONOS 2 Yellow Circle N N 0 0 0

107 23.743 38.006 ERIKEIA 1 Yellow Circle Y N 0 0 0

108 23.757 37.994 BATE 2/1 Yellow Circle Y N 0 0 2

109 23.812 37.996 HESTIAIA 1 Yellow Circle Y N 0 0 0

110 23.738 37.967 DIOMEIA 1 Yellow Circle N N 0 0 0

111 23.74 37.961 DAIDALIDAI 1 Purple Circle N Y 0 0 0

112 23.757 37.958 AGRYLE 2 Red Circle N N 0 0 0

113 23.791 37.964 POTAMOS 2 Blue Circle N Y 0 0 0

P a g e | 5

Figure 5: Attribute table of the Shapefile as viewed in ArcMap

Phase II: Web Development

The generated shapefile from Phase I was published to ArcGIS Online as a feature layer and its Service URL was

used to host the layer on the Web Mapping Application. The ArcGIS JavaScript (JS) API 4.3 was used to develop

the web app to take advantage of its cross-platform capabilities. In fact, the goal of the 4.x series is to reimagine the

API in terms of its support for both 2D and 3D map applications. Moreover, version 4.3 allows us to build full-

featured 3D applications powered by web scenes that can include rich information layers such as terrain, basemaps,

imagery, features, integrated mesh layers, and 3D objects [2].

To scale-down the development efforts, the JS API was used to build upon the popular Bootstrap HTML, CSS, and

JS framework which provides for building responsive and mobile-friendly web apps. There are four main steps for

creating an application using the JS API:

Figure 6: A Workflow for Application Development using the JS API 2[3]

Various widgets were included in the interface to provide for a user-friendly experience. The implementation

process for widgets can be simplified to four main steps as follows:

Figure 7: Steps for implementing widgets for the web app interface [3]

2 The <div> tag defines a division or section in an HTML document.

Reference the API library and styles

Define the HTML div(s) and layout

Load the required modules

Code the functions

Define a div in the HTML body to hold the widget

Load the modules in the require

function

Define widget properties like the associated map, layer, or fields

Call the startup method of the

widget

P a g e | 6

A generic list of elements included in the interface along with their functionalities is detailed below:

Figure 8: A recap of elements implemented for the web map interface

Results & Discussion The JavaScript API runs on the browser/client side and its capabilities fall into two categories as follows [3]:

▪ Interacting with GIS servers and providing mapping, query, statistics, and other GIS functions.

▪ Presenting the responses of GIS servers to end users and interacting with them.

Similarly, a functional web map interface was developed using the ArcGIS JavaScript API 4.3 which is currently

being hosted on the Empress server. The interactive web map interface for the Athenians project with popups,

dynamic shapes and a customized search bar is showcased below:

Figure 9: Interactive web map with popups and dynamic shapes

Web

Ma

p I

nte

rfa

ce

Search Bar Finds information stored in the Shapefile such as name, location, symbol type, etc. esri/widgets/Search

Zoom Buttons Helps make the map more accessible in case a scroll mouse button is not available esri/widgets/Zoom

Home Button Switches the view to its initial viewpoint or a previously defined viewpoint esri/widgets/Home

Reorietnation Button

Indicates where north is in relation to the current view rotation esri/widgets/Compass

2D Overview Map Small map in the upper right corner which highlights the current view in the 3D map esri/views/MapView

Popups Allows users to access attributes of feautres and examine their values esri/PopupTemplate

3D Basemap Allows one to speculate about any geographical influences affecting the features esri/views/Sceneview

Symbol Graphics Colorizes and configures different symbols automatically based on attributes esri/SimpleRenderer

ELEMENT FUNCTIONALITY CLASS

P a g e | 7

Figure 10: Custom search bar implemented for the web map interface

A few remarks about the status of the project at present:

▪ A 3D basemap allowed us to infer about any terrestrial factors affecting the features.

▪ Several widgets were included to aid the user with navigating the 3D basemap.

▪ Popups provide immediate access to the key attributes of features upon user interaction.

▪ Historic political boundaries are currently being digitized and will be added as an additional toggle layer.

▪ Future work is aimed towards generating connections between demes using lines.

▪ The web map is in the process of being integrated with a relational database containing 100,000+ entries.

The web map interface can be accessed here: http://empess2057-gis.eng.yorku.ca/ArcMap/index.html

Conclusion The Athenians Project is an important prosopographical source for classicists around the world. It is being

modernized using an interactive map integrated with a relational database so that it can be viewed and explored in

3D by users. A 3D web map application was developed using ArcGIS JS API to take advantage of its cross-platform

capabilities. This further reduced the development efforts drastically because of not having to write multiple native

apps to support multiple platforms. JavaScript typically runs on the browser side while also communicating with

the server to utilize its potential [3]. This in return provides for dynamic webpages and creates an interactive

experience for the user. Consequently, the web map interface that is being developed for this project can prove to

be a useful source for knowledge and discovery about the persons of ancient Athens, and can be a valuable tool for

university libraries worldwide.

References [1]"Athenians Project: Persons of Ancient Athens", Atheniansproject.com, 2016. [Online]. Available:

http://atheniansproject.com/attica.htm. [Accessed: 09- Jul- 2016].

[2]"Overview | ArcGIS API for JavaScript 4.3", Developers.arcgis.com, 2017. [Online]. Available:

https://developers.arcgis.com/javascript/latest/guide/index.html. [Accessed: 22- May- 2017].

[3]P. Fu, Getting to know Web GIS, 1st ed. Redlands: Esri Press, 2016