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