Linköping University | Department of Computer and Information Science

Bachelor’s thesis | Bachelor’s Programme in Programming

Spring term 2020 | LIU-IDA/LITH-EX-G--20/053—SE

Visualization of Geographic Data in

ASP.NET

Anton Sköld

Tutor, Jalal Maleki

Examinator, Rita Kovordanyi
Copyright
The publishers will keep this document online on the Internet – or its possible replacement – for a period of
25 years starting from the date of publication barring exceptional circumstances.
The online availability of the document implies permanent permission for anyone to read, to download,
or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and
educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the
document are conditional upon the consent of the copyright owner. The publisher has taken technical and
administrative measures to assure authenticity, security and accessibility.
According to intellectual property law the author has the right to be mentioned when his/her work is
accessed as described above and to be protected against infringement.
For additional information about the Linköping University Electronic Press and its procedures for
publication and for assurance of document integrity, please refer to its www home page:
http://www.ep.liu.se/.

© Anton Sköld
 compared based on some criteria. Thus, the research questions of
ABSTRACT this paper are as follows:

This paper explores the development and implementation of an RQ1: How do Google Maps and Leaflet compare in terms of:
in-browser map with the purpose of visualizing large sets of
geographic data. The map is implemented into a pre-existing • Performance
search engine of geographic data.
• Ease of use
Two mapping frameworks are compared in terms of
performance, ease-of-use, and functionality. These frameworks • Functionality
are Leaflet and Google Maps. This paper also explores which
issues may arise when implementing these mapping frameworks RQ2: Which issues may arise when implementing JavaScript-
within a pre-existing ASP.NET project. based maps in ASP.NET-projects?

These aspects were evaluated through performance tests, The performance criterion measures the time it takes for maps to
documentation reading, and compiling experiences gained load, the time it takes to place points / lines / polygons onto the
through implementing the map within the search engine. map, and how the maps perform in terms of frame rate while
rendering large data sets.
The experiments show that both Leaflet and Google Maps are
viable frameworks to use when developing in-browser maps, but The ease of use criterion is evaluated through factors such as
also that they have their pros and cons. Google Maps sports a how easy it is to start using each of the mapping frameworks.
generally higher level of performance, and a larger set of paid This criterion compares activities such as how straight-forward
available services. Leaflet is a free, open-source alternative with it is to register your API-keys, and how easy it is to implement
a large plugin repository, but relies on third-party services for certain features on your map. This criterion can be quite
features such as geocoding. subjective.

1 INTRODUCTION The functionality criterion summarizes features of one mapping

framework that the other may lack. While implementing this in-
Maps are an integral part of modern life, and the internet has browser map, noteworthy features of each mapping framework
been an important tool for the distribution of our maps [16]. In are recorded. A dedicated documentation reading session will
July 2018, 77% of smartphone owners were active users of also be held to try to find additional noteworthy features of each
navigation services, and of those, 70% used Google Maps, the framework.
most popular online mapping app [1].
2 BACKGROUND
Many online services use maps as data visualization tools [17].
Maps can display many things, including driving instructions, The web-based map will be implemented as part of an existing
weather forecasts, and graphical overviews of data. project, hence the ASP.NET limitation. This project is a search
engine for geographic metadata and is owned by the land
The purpose of this paper is to explore the development of an in- surveying unit in Motala municipality.
browser map, within the ASP.NET web framework. The primary
contribution of this paper is an evaluation of two popular This search engine allows you to search for different layers. A
mapping frameworks, Google Maps and Leaflet, comparing them layer is a set of geographic data, such as all bodies of water,
based on criteria outlined at the end of this section. Leaflet.js will sewage piping, electricity grids, or all forested areas within a
be used as the API for showing OpenStreetMap data. Google region. These layers contain geometric data which determine the
Maps provides its own API. coordinates of these regions, and additional metadata concerning
the geometry (such as property names, city codes, or how
ASP.NET is the web framework solution found within the .NET accurate the geometry is).
framework., which is primarily run on Windows platforms. The
language used to code an ASP.NET project is C#, and when What the search engine lacks, is a visual preview of the layers on
looking at language usage statistics, you can find that C# the page for search results. This preview will be implemented
represents about 2.2% of the total code used on GitHub. This is through the previously mentioned in-browser map.
quite small compared to the most used web programming
language JavaScript, which represents 15% of all code [2]. 3 THEORY
Seeing as ASP.NET is a less common choice for developing web In this section a brief overview of .NET and ASP.NET is given.
applications, the available options for mapping services may not The section explains how they relate, and how a project built in
be as well supported as in the case of a JavaScript-based project. ASP.NET can be structured. These technologies are used within
The secondary contribution of this paper is to find out which the search engine project.
issues may arise when using a JavaScript-based map within an
ASP.NET / C# based project. The mapping services studied in this paper are also brought up
and some background is given on each of them. These mapping
Google Maps and Leaflet are two popular mapping services that services are used to answer RQ1 when evaluating the criteria for
can be used to implement such maps. These are evaluated and each of them.
1
To wrap up this section, the proprietary geographic layers the within an HTML <script>-tag or a JavaScript file, and then you
pre-existing search engine uses are explained in depth, including can initialize your google.maps.Map object [8].
how they are used and what types of information a layer can
contain. 3.4 OpenStreetMap and Leaflet
3.1 .NET OpenStreetMap is an open collaborative world-wide effort of
creating and maintaining a reliable source of geographic
.NET is a software development platform developed by Microsoft. information [9, 14]. All information is free to use granted you
Using .NET, you can build many different types of applications credit OpenStreetMap as being the source of the data.
in several different programming languages. The primary
languages used are C#, F#, and Visual Basic [3]. When building Contrary to the Google Maps API, OpenStreetMap does not have
applications within .NET, your applications can run a single must-use framework implementation. It can be used
wherever .NET is installed. It is comparable to Oracle’s Java with whichever framework supports OpenStreetMap as a source
Virtual Machine (JVM) technology. of geographic information. For this paper, Leaflet is the chosen
implementation.
.NET has three primary implementations, .NET Core, .NET
Framework, and Xamarin / Mono. These implementations target 3.5 Geographic layers and their structure
different platforms and have different use cases. .NET Core is
cross-platform for Windows, Linux, and macOS. .NET Within our database of geographic data, each geographic layer is
Framework is primarily for Windows. Xamarin/Mono is represented as a regular SQL table. A row within these tables
primarily for the major mobile platforms [4]. represents a shape within the layer.

3.2 ASP.NET The primary information stored within these shapes is the
geometric information which describes how the shape looks and
If you want to develop web applications within the .NET where it is. This geometric information is stored as an SQL
framework, ASP.NET is the natural choice. ASP.NET extends the geometry datatype.
regular capabilities of .NET with built-in libraries and functions
to make developing web applications quicker and easier [5]. The three primary shapes used in our database are points, lines,
and polygons. In the geometry datatype, these shapes are called
So, how is an ASP.NET project structured? There are two “POINT”, “LINESTRING”, and “POLYGON” respectively [15].
primary types of files which create the project. These are .aspx- When reading these shapes from the database in text form, these
files and .aspx.cs-files. are examples of what shapes can look like.

.aspx-files are somewhat like regular HTML-files. They structure • POINT(58 15)
the website using tags which represent the website elements
used. These files can also execute server-side code, similarly to • LINESTRING(58 15, 58 15.4, 56 12.3)
how the <script>-tag works in a JavaScript-based project. In
addition to the regular HTML-tags, ASP.NET adds a set of • POLYGON((10 1, 10 9, 4 9, 10 1),(9 4, 9 8, 6 8, 9 4))
controls that you can use on your website. These include forms,
buttons, labels, timers, and more. These controls are all A point is simple, it contains a single coordinate (latitude /
implemented as C# classes, and thus you can act on them like longitude) that defines where the point is placed.
you could any other C# object.
A linestring contains two or more coordinates, representing
.aspx.cs-files are the so-called “code-behind” files. These files multiple points connected by a line.
contain all functionality of your website and are written in pure
C#. Variables and functions which you create in these files are A polygon looks much like a linestring, but the line connects
available to the structural .aspx-file. back into itself to form a 2D area. Contrary to lines and
linestrings, polygons can contain more than one set of
3.3 Google Maps coordinates. The first set of coordinates represents the outer
bounds of the polygon, and any following sets define holes in the
In 2005, Google released Google Maps. During the following outer shape.
months they added multiple features to the service and made it
available for a multitude of different platforms. In June that year 3.6 Method theory
they released the Google Maps API, a way for developers to
implement their own web-based maps [6]. In 2016, the Google In RQ1 three different metrics are proposed which will be used
Maps API was used by 1 million websites and services, reaching to evaluate how good each mapping service is. These are
a total of 1 billion active users. performance, ease of use, and functionality.

The API can be implemented in several ways depending on your Performance will be measured by the time it takes to perform a
platform and needs [7]. The most relevant one for this paper is certain task on the map. These tasks include loading the map,
the JavaScript API. To use this implementation, you need a placing geometry onto the map, and how the maps perform
Google Maps API key to be allowed access. You import the API while rendering large datasets.
Lee et al. measured the performance of Android applications Monitor: 144 Hz ASUS VG248QE
using the built-in Java method nanoTime() [10]. This method Network: 100 / 100 Mbit fiber connection located in Sweden.
is precise to the nanosecond assuming the underlying hardware
supports it and can be a suitable candidate for measuring time in 4.1.2 Software
Java-projects. The equivalent time-measuring tool in C# is the Web browser: Google Chrome 81.0.4004.129
Stopwatch class, part of the System.Diagnostics Operating system: Windows 10, version 1909
namespace. This class has a read-only field called Frequency, Google Maps JavaScript API version 3.40
which tells us how precise the time measurements are. This field Leaflet v1.6.0
is constant and depends on the hardware used. Thus, the
frequency of time samples is somewhat uncontrollable and will 4.2 The workloads
be assumed to be negligible throughout this paper.
To be able to compare the mapping services, and thus to answer
To measure time in JavaScript, the performance.now() RQ1, we need to define a set of tasks to be performed by the
function exists as part of the standard library. This function mapping services.
returns the system time elapsed since the webpage was loaded. If
we subtract two points in time from each other, we can easily These tasks should be common operations one would expect a
find the time required for a certain code block to execute. mapping service to perform. Some of these tasks are performed
only on the client-side, and thus are not dependent on any
The ease-of-use criterion will be evaluated based on how network requests.
straight-forward it is to implement each mapping framework
into the search engine, and how easy it is to perform certain The tasks were implemented with as few lines of code as
actions on the maps. One factor that can help tell how easy a possible, and official documentation and tutorials were followed
framework is to use, is how many lines of code are needed to to implement them. Of course, the mapping API used may
perform the tasks. influence how many lines of code are needed to perform a
certain task. The number of lines of code required are also
One might think that the formatting of the code matters when considered to evaluate the ease-of-use criterion of RQ1.
measuring the amount of lines (i.e. spacing, braces on new lines,
etc.). However, J. Rosenberg showed in his paper that it is a Each task was performed five times, and the average time to
misconception and that SLOC (source lines of code) is an perform the tasks along with the lines of code required is
acceptable metric no matter the formatting [11]. Even if code recorded.
formatting mattered, the experiments conducted in this paper are 4.2.1 Loading the map
written by a single developer and the formatting should thus be
self-consistent. In order to use a map, the geographic information of the map
needs to load into the web browser. For this workload, official
To be able to answer RQ2, the day-to-day experiences of documentation and tutorials are followed to get a bare-minimum
development need to be recorded. This will be done through a map implementation running in our browser. The code execution
diary, consisting of a set of questions which will be answered time required for the map to load was then measured.
daily.
Two additional tests were run which instead of measuring code
J Rowley wrote an article which brings up important aspects of execution time, recorded video of the loading of each map, and
designing questionnaires for scientific purposes [12]. The measured the video frames it took for the maps to load. The
obvious first step is that questions should be designed to provide motivation for these additional tests were that perhaps code
data related to the objective, we will thus design the questions to execution time is irrelevant to how quickly the maps load, as the
focus on issues encountered during development. The questions loading primarily consists of downloading map tiles (images) to
will be open questions, as opposed to closed, because the the client.
opinions and experiences of the developer should be brought
forward rather than numeric or yes / no answers. The questions The first of these tests loaded the map at a fixed position, which
should be phrased clearly and concisely, without being leading. made the background tiles cached, speeding up the load times of
each framework. The second test randomized the initial position
4 METHOD of the map, which makes caching a non-factor.
This section describes the methods used and the experiments The tutorial used for Google Maps is available here (Accessed
that were ran to evaluate the two different mapping services, and 2020-05-25):
how the results of those experiments can be used to answer both https://developers.google.com/maps/documentation/javascript/tu
proposed research questions. torial?hl=sv

4.1 The testing setup used For the OpenStreetMap / Leaflet implementation, this tutorial
was followed (Accessed 2020-05-25):
4.1.1 Hardware https://leafletjs.com/examples/quick-start/.
Processor: Intel Core i7 7700
RAM: 16GB Corsair Vengeance LPX DDR4 3000MHz Both tutorials describe how to import the mapping frameworks,
Graphics: NVIDIA GeForce GTX 1070 and how to create a basic map object. Leaflets tutorial also
Storage: Kingston V300 120GB SSD describes how to draw simple geometry.
3
4.2.2 Placing simple geometry 4.2.6 Evaluating functionality

The most important feature for our search engine

This task is explored simultaneously as the other tasks by
implementation is the placement of geometric shapes onto the
reading the documentation of both mapping services while
map. These shapes include points, lines, and polygons.
implementing the other tasks, trying to find features of one
A sample shape is created for each type of shape, which can be mapping service that the other may lack. The results of this task
input into the mapping framework, and the time it takes for the are difficult to predict as it was intentionally specified as a bit of
framework to render the shape is recorded. a wildcard.

4.2.3 Placing bulk geometry After the other tasks are fully implemented and some
documentation indirectly has been explored, some time was
To properly evaluate the real-life performance of the mapping allotted specifically to reading documentation for the purposes of
services, this test implements both mapping services into our this criterion. One uninterrupted hour was spent on reading each
pre-existing search engine. The proprietary geographic database of the documentations, noting interesting features along the way
of is used to populate the map with geographic data. Only the in a spreadsheet.
time it takes to populate the map is tracked, and not the time it
takes to retrieve items from the database.
This criterion could be subject to a little bit of bias, as the
The test case placing bulk points places 3683 points, the test case documentation was only scoured by a single person, a single
placing lines places 2226 lines, and the polygon test places 3683 time. Also, how the documentation was presented and structured
polygons. may have been a factor in how much information was found.

4.2.4 Evaluating performance under heavy load

4.3 Evaluation of the project
For the search engine, it is important that the maps perform and
handle well while rendering large amounts of geographic data. To answer RQ2, a discussion of the search engine project was
This is measured by loading some of the largest layers in our held after the work was done. In this qualitative discussion
dataset and measuring the frames per second (FPS) of the maps interesting experiences and learnings from implementing the
while having these layers rendered. A monitor with 144 Hz project are brought up. To collect opinions and experiences for
refresh rate is used for this test, and thus the best possible this discussion, a developer diary containing a set of questions
framerate in-browser for this setup is 144 frames per second. was answered each day of work.
The largest layer of points in our dataset contains 33000 points,
the largest layer of lines contains 2226 lines, and the largest layer The characteristics of the questions posed in the developer diary
of polygons contain 33337 polygons. are discussed in Section 3.6. The questions that were answered
each day are as follows:
When rendering 33000 points within Leaflet, it froze and did not
give proper results. To gain more insightful data of how
• What have you been working on for the day?
performance degrades with marker count, the scale of this test
was reduced. Initially, no points are rendered, and gradually the
marker count increases to 3000. At 3000 markers Leaflet became • Which issues have you encountered?
near-unusable, so it was chosen as a stopping point. For each of
these steps, the framerate was recorded, and the results were
• What can be done to solve the issues?
plotted in a graph.

Two types of user actions were performed on the maps while • What other noteworthy things have you experienced?
having the layers rendered. These are panning the map and
zooming in and out repeatedly. The framerate was recorded for
each of these actions. 5 RESULTS

Google Chrome’s FPS meter was used to measure the framerate.

5.1 RQ1 – Evaluating performance
However, the tool does not provide an average framerate value
over time. This makes it necessary to manually observe the
framerate and approximate the point it fluctuates around, which 5.1.1 Loading the map
could incur some bias.
For this test, a bare-minimum implementation of each mapping
4.2.5 Evaluating ease of use
framework was built, and then the time to load the maps within
This criterion was evaluated by recording noteworthy aspects each framework was measured.
related to how easy each framework was to use. The process of
registration and initializing of the map frameworks, the out-of- The first measurement was simply how long it took the code
the-box usability, and different code quirks became the responsible for loading the map to execute. These lines of code
determining factors of how easy each framework was to use. are displayed below.
myMap = L.map("mapid", {preferCanvas: false}) Leaflet Google Maps
.setView([58, 14], 14);
Point 1.29 1.00
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?ac- Line 1.46 2.00
cess_token={accessToken}', { Polygon 0.50 0.38
maxZoom: 18,
id: 'mapbox/streets-v11', Std. dev (Point) 0.40 0.32
tileSize: 512, Std. dev (Line) 0.57 0.43
zoomOffset: -1,
accessToken: 'Hidden'
Std. dev (Polygon) 0.21 0.12
}).addTo(myMap);
Table 4 – Placing single shapes (ms)
Listing 1 – Leaflet map loading
5.1.3 Placing bulk geometry
googleMap = new google.maps.Map(document.getElementById('googlemap'),
{ center: { lat: 58, lng: 14}, zoom: 14 });
This test is like the simple geometry test, but on a larger scale.
Listing 2 – Google Maps map loading Geographic layers, as described in Section 3.5, are loaded from
our geographic database into the browser’s memory, and then
These lines of code were executed five times, and the average the layers are rendered onto each mapping framework. Only the
result was computed. Table 1 contains the results of these tests. time it takes for rendering is recorded, and not the database
interactions. See below for how Leaflet iterates through and
Leaflet Google Maps renders each shape, Google Maps iterates similarly.
Avg. time (ms) 4.86 4.00
Std. deviation 1.017 0.613 for (var i = 0; i < shapes.length; i++)
{
Table 1 – Loading the maps, code execution time. var type = shapes[i].type;
// For each subshape (in case of polygons)
Below in Table 2 and 3 are the results of the tests which recorded for (var j = 0; j < shapes[i].shapes.length; j++)
{
video of the maps loading and measured how many frames it if (type == "POINT")
took for each map to load. The results in Table 2 are affected by {
var marker = L.marker(shapes[i].shapes[j][0]).addTo(myMap);
caching as the maps loaded in fixed positions, and Table 3 are }
not affected by caching, as the position was randomized. else if (type == "LINESTRING")
{
var polyline = L.polyline(shapes[i].shapes[j]).addTo(myMap);
Leaflet Google Maps }
Avg. frames 3.2 9.2 else if (type == "POLYGON")
{
Avg. time (ms) 53.33 153.33 var polygon = L.polygon(shapes[i].shapes[j]).addTo(myMap);
Std. dev (frames) 0.4 0.748 }
}
Table 2 – Loading the maps with caching. }

Listing 5 – Leaflet renders a layer

Leaflet Google Maps
Avg. frames 30 17.4 Each layer can consist of either points, lines, or polygons. The
Avg. time (ms) 500 290 rendered layer of points consisted of 3683 points, the line layer
Std. dev (frames) 5.72 2.42 had 2226 lines, and the polygon layer had 3683 polygons. Table 5
Table 3 – Loading the maps without caching. contains the average render times for each layer type and
mapping framework.
5.1.2 Placing simple geometry
Leaflet Google Maps
For these tests, three simple shapes were constructed. A point 3683 points 546.68 71.84
(marker), a line, and a polygon. See below for an example of how
2226 lines 91.00 97.75
a marker can be created. Lines and polygons are created
similarly, except that the mapping services accept multiple 3683 polygons 185.14 139.57
coordinates instead of one. The created polyline included 25 Std. dev (points) 7.26 6.70
coordinates, and the polygon included 5 coordinates. Std. dev (lines) 2.43 21.93
Std. dev (polygons) 7.16 17.92
var marker = L.marker([58, 15]).addTo(myMap);
Table 5 – Placing bulk shapes (ms)
Listing 3 – Creating Leaflet marker
var marker = new google.maps.Marker({
5.1.4 Performance under heavy load
position: { lat: 58, lng: 15 },
map: googleMap, For these tests, the largest geographic datasets we had available
});
were used. These datasets contain 33000 points, 2226 lines, and
Listing 4 – Creating Google Maps marker 33337 polygons, respectively.

These shapes were then rendered with each of the mapping First, the dataset containing points was rendered. As seen in the
frameworks, and the time it took for the code to execute was table below, Leaflet could not handle the pressure and thus did
recorded. The average times are in Table 4. not give any proper framerate values, as seen in Table 6.
5
 Leaflet Google Maps provides its own map data and is entirely self-contained, this is
Avg. FPS (panning) NaN 20 the only registration necessary.
Avg. FPS (zooming) NaN 7
The Google Maps JavaScript API does have a cost associated with
Table 6 – Placing 33000 markers using it, however at the time of writing you get 200$ worth of
free use per month. This credit can support loading the map
As described in section 4.2.4, the scope of the marker rendering 28000 times in one month.
test was reduced to gain more insightful data. These results are
presented below in Graph 1. 5.2.2 Out-of-the-box usability

Google Maps is very self-contained and provides its own map

data and map tiles. Leaflet requires you to register at a tile
provider for access to map tiles but therefore does give you the
option of which tile provider to use. You can even host map tiles
locally if you are in possession of such data.

Both mapping frameworks were straight-forward to implement

within the search engine, and due to the syntax being alike, the
frameworks became quite hot-swappable.

The main difference between the frameworks for the purposes of

this project was the performance factor. As shown in Section
5.1.4 Leaflet does not like rendering thousands of markers at
once. To make Leaflet viable for this project, this issue needed to
Graph 1 – Framerate by marker count be fixed. In Leaflet, each marker is rendered within the HTML
DOM tree. This is likely what caused the performance loss when
Next, a large set of lines and polygons were rendered, and the thousands of markers were placed.
average FPS was recorded. These results are presented below in
Table 7. One solution to Leaflets marker issue is to force Leaflet into
rendering on an HTML canvas instead, by setting the
Leaflet Google Maps preferCanvas attribute to True when creating the Leaflet map.
2226 lines (pan) 144 144 When rendering to a canvas, you also need to use the
2226 lines (zoom) 80 110 CircleMarker type instead of a regular Marker. This
33337 polygons (pan) 60 140 CircleMarker type does by default look slightly different to a
33337 polygons (zoom) 1 4 regular Marker, being a circle instead of a pin.
Table 7 – Placing bulk shapes (Avg. FPS) 5.2.3 Code quirks

5.2 RQ1 – Evaluating ease of use Leaflet and Google Maps differ slightly in which formats they
accept coordinates. Leaflet has four different ways of expressing
5.2.1 Process of initializing the map & Pricing a coordinate. These four formats are equivalent and shown in
Listing 6.
Leaflet does not require any direct registration to be able to use
the framework. You import the framework like you would any [58, 15]
other framework, within a <script> HTML tag. A stylesheet is {lon: 15, lat: 58}
also needed, which you import through a <link> tag. It is also {lat: 58, lng: 15}
L.latLng(58, 15)
possible to locally download Leaflet which removes the need for
an internet connection when loading the API.
Listing 6 – Leaflet coordinate formats
However, Leaflet does not provide its own tile layer i.e. the map
Google maps has three ways of expressing coordinates. These are
background. The tile provider used in this paper is MapBox.
shown in Listing 7 and are both equivalent.
MapBox required a simple free registration to gain an access
token. This token is then used with the tile providers’ URL to new google.maps.LatLng(58, 15)
make Leaflet have access to the data. {lat: 58, lng: 15}
new google.maps.LatLng({lat: 58, lng: 15})
Leaflet is completely free of charge if you credit OpenStreetMap
as the providers of map data. Your tile provider may require Listing 7 – Google Maps coordinate formats
crediting as well.
Within the search engine project described in this paper, shapes
Google Maps requires registration on the Google Cloud Platform were read from our geographic database. After reading, the
before being able to be used, which includes registering a coordinates were in array format similarly to the first format
payment method if any monetary charges are to occur. After shown in Listing 6. Before being able to implement Google Maps,
registration you import the Google Maps JavaScript API within a the coordinates had to be iterated through and translated into
<script> tag, which includes your API token. As Google Maps the dictionary format described on the second line of Listing 7. In
this regard, Leaflet is more flexible with how coordinates are For popup behavior within this project, where shapes were
expressed. created within a loop, Leaflet had a more straight-forward way
of implementing them. However, because Google Maps uses an
Another code quirk found while implementing the maps, is how event system, it has greater variety in which types of events can
both frameworks handle popups. Popups are boxes of open the infowindow, and what code you want to execute within
information shown when you hover over or click shapes and each event.
markers on the map.
5.3 RQ1 – Evaluating functionality
Within Leaflet, each created shape inherits a bindPopup
function. This function accepts a string of text to be displayed, as This evaluation criterion was explored by taking note of
well as a dictionary of style options for the textbox. When called, interesting features of each mapping framework during
the function adds the popup you defined to the shape. An development of the maps, and by a dedicated documentation
example of creating a Leaflet popup is displayed in Listing 8. reading session. The most interesting differences between the
frameworks are presented here.
var marker = L.circleMarker([58, 15], { color: "#FF0000" }).addTo(myMap);
marker.bindPopup("This is popup content", { maxHeight: 100 });
5.3.1 Leaflet
Listing 8 – Leaflet popup creation.
Leaflet does not provide its own map tiles. This means you have
For Google maps to achieve a similar result to the code in Listing a choice of which tile provider you want to use. It is also possible
8, the equivalent code is shown below in Listing 9. to host tiles locally and be your own provider.
var infowindow = new google.maps.InfoWindow({ This framework is also completely free and open source. Leaflet
content: "Info window content"
}); also has a large library of third-party plugins that you can use to
customize how Leaflet acts.
var marker = new google.maps.Marker({
position: {lat: 58, lng: 15},
map: map 5.3.2 Google Maps
});
Google Maps as a service is self-contained and closed source.
marker.addListener('click', function () {
infowindow.open(map, marker); This leads to not have as much customizability compared to the
}); open source Leaflet.
Listing 9 – Google Maps popup creation. However, the (paid) functionality is quite vast in range. To start,
the framework provides its own tile data, which means you do
However, the code shown in Listing 9 has one major issue if you
not need to involve third-party tile providers to paint your map
are executing it within a loop. Every marker gets an on-click
background.
event listener attached. This listener, when triggered, opens the
infowindow variable. If executed in a loop, for every marker you For the purposes of drawing shapes onto the maps, Leaflet and
place, the infowindow variable gets overwritten and only the Google Maps mostly have the same features. Google Maps does
content of the latest marker popup is stored within it. Because of support drawing heatmaps onto your map, which Leaflet does
this, every marker you create in a loop using this code all get a not support without the help of a plugin.
popup, but the content of the popup is shared between all
markers. When registering for a Google Maps JavaScript API access token,
you also get access to a heap of other services apart from the
To solve this within Google Maps, you need to change the dynamic maps. These services have different pricing compared to
content of the infowindow dynamically, depending on which simply loading a map.
marker it is displayed on. One solution to this is displayed below
in Listing 10. These optional services include functionality such as geocoding –
to translate a physical address into a latitude / longitude
var infowindow = new google.maps.InfoWindow();
coordinate, street view, an overlay of bicycling / commuting
var marker = new google.maps.Marker({ routes, live traffic information, directions, and displaying map
position: {lat: 58, lng: 15},
map: map
elevation.
});
marker.content = "Info window content" 5.4 RQ2 – Issues encountered using
marker.addListener('click', function () { JavaScript within ASP.NET
infowindow.setContent(this.content);
infowindow.open(map, marker);
}); This section describes some of the issues that were encountered
during development of the search engine, what causes the issues,
Listing 10 – Google Maps proper popup creation. and how one can work around them.
The solution shown in Listing 10 stores the content of the 5.4.1 Accessing public variables from JavaScript
infowindow within the marker object instead of the infowindow
object. When the click event listener triggers, the content of the When adding JavaScript code in the .aspx-file within an
infowindow is dynamically set to the content stored in the ASP.NET project, it is possible for the JavaScript side of the code
marker object. to access server-side (C#) variables. An example of this is shown
7
below in Listing 11, where the public string “helloWorld” is Another solution would be for the server to keep track of which
fetched from the server-side class MyClass. layers are rendered for each session, storing the rendered layers
in memory, and sending them back over each page refresh. This
var helloWorld = '<%=MyClass.helloWorld%>';
alert(helloWorld);
solution would incur substantial load times when the page
refreshes, and the server could become a massive memory hog if
Listing 11 – JavaScript accesses a C# variable. each session is handled improperly.
Early on in development, the idea was for the server to read the
Like the previous solution, the server could keep track of the
geographic layers from the database, parse them into a server-
names of each layer being rendered to a session, and upon
side list of shapes, and let the JavaScript code iterate through this
refresh fetching all those layers from the database and sending
list to render the layers onto the map.
them to the client. This would alleviate the memory-hogging of
When fetching primitive datatypes such as strings, integers, and the previous solution but increase load times even further due to
booleans, the syntax used in Listing 11 is very convenient and the extra database requests and the overhead associated with
simple to use. When trying to do more complex things such as them.
iterating through a public list, it is not as straight-forward.
The extreme load times of the two previous solutions are due to
If you were to have some loop in JavaScript, and within the loop needing to send all previous layers when rendering a new one.
you try to index the public server-side list, this would not Imagine previewing five layers, which means at least five button
immediately work. In this scenario, the iterator variable is a clicks and five page refreshes. On the first refresh a single layer
JavaScript integer, and the syntax in Listing 11 does not support is sent, on the second refresh two layers are sent, on the third
using this variable for indexing the public list. Thus, instead of refresh three layers are sent, et cetera. In total, 1+2+3+4+5 = 15
working directly on the server-side list, we need to transfer the layers would need to be transferred when rendering 5 layers, and
data structure to the JavaScript side. it scales even worse the more layers you preview.

To transfer a complex data structure using the syntax in Listing The most viable solution to rendering multiple layers would be
11, one needs to translate the complex structure into some to dynamically update the website data without needing a
primitive variable. The solution chosen was to serialize the data postback refresh. AJAX (Asynchronous JavaScript and XML) is a
structure before transferring it. When serializing a data perfect solution for this. If this solution were implemented, the
structure, it gets converted into a string. This string can then be client could dynamically receive additional layers to be rendered,
deserialized back into the original data structure with no data without the need for a page refresh.
loss. The serialization method used was JSON (JavaScript Object
Notation), as it is a format which JavaScript can handle natively. Implementing this dynamic AJAX loading of layers, in the case
of this search engine, would involve essentially rebuilding the
5.4.2 ASP.NET refresh / postback behavior project from the ground up. For the scope of this paper, this
solution was considered unviable.
Another problem encountered during development is ASP.NETs
tendency to refresh the webpage after nearly every button click / 6 DISCUSSION
website interaction. For instance, when typing something into a
search bar on an ASP.NET website and hitting the search button, This section discusses the research questions while considering
the search form is submitted to the server, and then a search the found results. Critiques of the chosen methods and potential
result page is built and sent back to the client. This leads to a points of improvements are also discussed.
postback refresh happening.
While running all the tests described in this paper, only the
On most websites, this postback behavior is expected and
Google Chrome browser was used, and all tests were executed
completely normal. Within the search engine, this behavior
on a single machine. It is very possible that choice of browser
caused a somewhat major issue: If the website refreshed,
and differences in computing hardware can have impacts on the
everything previously drawn onto the map is reset. This made
test results.
the map only able to preview a single geographic layer at once,
because when clicking the preview button for the other layers,
the website would refresh, and the previous layer would be 6.1 RQ1 – Performance
erased from the map.
6.1.1 Map loading
A few solutions to this were considered, but unfortunately
within the scope of this paper none were considered viable. The first test that was ran was loading the maps and measuring
the time it took for them to load. The initial measurement was
The first solution involved saving the previously displayed layers how long it took for the line of code that was responsible for
to the browsers localstorage or sessionstorage, and then all saved loading the map to execute. The results were in the range of a
layers are presented when the website refreshes. This proved few milliseconds, which sounded unreasonable as multiple
unviable as localstorage and sessionstorage have quite restrictive network requests and picture downloads would have had to
size limits (~5 MB each). Geographic layers can be many happen within that time. It was thus concluded that the primary
megabytes in size, and this size limit would make the feature at factor that caused a map to take longer to load was how fast the
best able to render 2-3 layers at a time, depending on which map tiles loaded in, and that this loading of tiles did not reflect in
layers you are rendering. code execution time.
Two more tests were then performed regarding loading the is. A band-aid fix for this could be to clear the map after each
maps, where video was recorded of the maps loading, and the additional rendered shape.
time it took for the maps to load were measured in amount of
video frames. It was observed that caching had a major impact
on the load times, and thus one of the tests loaded the maps in 6.1.3 Performance under heavy load
fixed locations, and the other test randomized the initial
locations to make sure caching did not occur. Leaflet did not handle rendering many markers very well. The
scope of this test was reduced to give a better picture of how
One interesting observation was that with caching, Google Maps Leaflets performance degrades with marker count. After this test,
took longer to render the map. This is likely due to Google Maps additional research was performed as to how one can optimize
having a fade-in animation which hides most of the tile loading Leaflet for improved marker performance, this research is
“pop”. In the no-caching test, even with Google Maps’ fade-in presented in Section 5.2.2 regarding out-of-the-box usability.
animation, Google Maps still achieved nearly half the load time When rendering lines and polygons, the frameworks performed
of Leaflet. Thus, it seems that the primary factor which more comparably. Google Maps did tend to maintain a higher
determines map loading times, is the choice of tile provider. framerate count.
Within this paper, the only tested Leaflet tile provider was
6.1.3.1 Performance under heavy load – Method discussion
MapBox. Other tile providers could see faster load times.
Google Chrome’s FPS meter was used to measure the frames per
6.1.1.1 Map loading – Method discussion
second within this test. The tool does not provide an average FPS
Instead of measuring time through recording a video, a more metric, so measurement had to be done by looking at the current
suitable way of measuring could be to detect when all map tiles FPS and approximating which value it gravitated around. Thus,
have finished downloading and recording that time more this measurement can have a touch of human error within it and
precisely. Network monitoring tools such as Wireshark, or some using a more accurate measurement tool is a point of
callback function within the frameworks could be used for this improvement.
purpose. Doing it this way would eliminate the overhead caused During the FPS measuring test, the map was manually panned
by the fade-in animation of each framework. Even with and zoomed. Using an automated method of moving and
recording video, one could see that Google Maps serves tiles panning the map would be preferable as then the movement is
faster to the client than MapBox. consistent between tests. Selenium is a tool which can automate
most web browser actions and would be suitable for this. [13]
6.1.2 Placing geometry

Two types of geometry-placing tests were conducted. The first 6.2 RQ1 – Ease of use
test placed a single shape of each shape type, and the second test
For this criterion, an attempt was made to find the major
placed many of those shapes. The code execution time for
differences between the mapping frameworks. The aspects that
placing the shapes were recorded.
were primarily focused on were the processes of registration and
When placing individual shapes, the code execution time implementation, how usable the frameworks were out-of-the-
fluctuated quite heavily between test cases, as seen by the box, and which code quirks each mapping framework had.
standard deviation. To somewhat mitigate this, each test was 6.2.1 Ease of use – Method discussion
executed five times and the results were averaged. Even with this
averaging, these results may very well be unreliable, the The aspects that were evaluated, were so because they had a
individual test cases seemed mostly determined by luck-of-the- direct impact on the developed project because they drew the
draw. most attention. Due to this, there could be additional aspects
regarding ease-of-use that were overlooked. A point of
The test where many shapes were rendered can be a much better improvement would be to increase the sample size of developed
indicator of the performance of each framework, as with a much projects and developer opinions.
larger sample size the differences between the frameworks
become more apparent. Again, the test was executed five times If this paper were redone, research would have been conducted
with averaged results. Google Maps was quite a lot faster than to find out what makes a framework easy to use, scientifically.
Leaflet when placing markers and polygons, but mysteriously a The current method has the downside of being quite subjective
little slower when placing lines. When placing markers, Google regarding the aspects that were considered most important.
Maps achieved almost eight times faster execution speed.
6.3 RQ1 – Functionality
6.1.2.1 Placing geometry – Method discussion
For the purposes of drawing geometry onto a map, both
There exists a chance that when rendering a large set of frameworks had enough functionality to do so in a satisfactory
geometry, the browser gradually slows down while rendering, as way for the search engine. Google Maps does inherently support
a single shape was drawn at a time. If Leaflet needed to render rendering heatmaps, whereas Leaflet requires a plugin to do so.
1500 markers while already having 1500 markers rendered, it
could be possible that the final 1500 markers get slower code The primary differences in functionality were all the additional
execution rates. If this were the case, this test may not have paid services included with the Google Maps access token. If
perfectly captured how optimized the code for each framework your project requires geocoding, live traffic information, or a
9
directions service, Google Maps is a one-stop shop for all these When implementing in-browser maps (through JavaScript) in an
features. ASP.NET project, two issues were found that one may need to
keep in mind: Client-server variable sharing, and ASP.NET
6.3.1 Functionality – Method discussion refreshing the webpage on postback requests, wiping the maps.
This criterion was evaluated partly by experiences gained REFERENCES
through development, and partly by a one-hour documentation [1] Robert Williams, “MobileMarketer”, 11 July 2018. [Online]. Available:
reading session. The results of this criterion could have been https://www.mobilemarketer.com/news/google-maps-rated-as-no-1-navigation-
influenced by how the documentation was structured, and due to app-survey-says/527525/. [Accessed 28 May 2020]
only being read by a single person, a single time, some notable [2] Carlo Zapponi, “GitHut.info”. [Online]. Available: https://githut.info/. [Accessed
features could have been missed. 27 January 2020].
[3] Microsoft, “.NET | Free. Cross-platform. Open Source”. [Online]. Available:
https://dotnet.microsoft.com/ [Accessed 10 February 2020]
This criterion was quite well-defined from the start of this paper.
[4] Microsoft, “What is .NET? An open-source developer platform”. [Online].
The method used has seemed suitable throughout the work and Available: https://dotnet.microsoft.com/learn/dotnet/what-is-dotnet [Accessed
has yielded the expected data set. 10 February 2020].
[5] Microsoft, “ASP.NET | Open-source web framework for .NET”. [Online].
6.4 RQ2 – Issues encountered Available: https://dotnet.microsoft.com/apps/aspnet [Accessed 10 February
2020].
The most important issue that was found was ASP.NETs [6] Google, “Our history in depth – Company - Google”, 6 April 2016. [Online].
Available:
postback behavior, as refreshing the webpage when the map is https://web.archive.org/web/20160406123606/http://www.google.co.uk/about/co
purely client-side is quite destructive. Future work could delve mpany/history/#2005 [Accessed 10 February 2020].
deeper into this behavior and try to find simple ways of working [7] Google, “Google Maps Platform | Google Developers”. [Online]. Available:
around it. It seems that some form of dynamic updating (i.e. https://developers.google.com/maps/documentation/ [Accessed 10 February
AJAX) would be necessary and trying to find a simple way of 2020].
combining it with ASP.NET could be very helpful for future [8] Google, “Overview | Maps JavaScript API | Google Developers ”. [Online].
Available:
projects. https://developers.google.com/maps/documentation/javascript/tutorial
[Accessed 10 February 2020].
Another interesting idea for future work could be a comparison [9] OpenStreetMap, “OpenStreetMap”. [Online]. Available:
between server-side web frameworks, to see how they compare https://www.openstreetmap.org/about [Accessed 10 February 2020].
regarding postback behavior. Perhaps some are more suitable to [10] Lee, J. K., & Lee, J. Y. (2011, September). Android programming techniques for
use than others when dealing with client-side maps? improving performance. In 2011 3rd International Conference on Awareness
Science and Technology (iCAST) (pp. 386-389). IEEE.
[11] Rosenberg, J. (1997, November). Some misconceptions about lines of code. In
6.4.1 Issues encountered – Method discussion Proceedings fourth international software metrics symposium (pp. 137-142).
IEEE.
This research question was explored by writing a developer diary [12] Rowley, J. (2014). Designing and using research questionnaires. Management
after each day of development and taking note of noteworthy Research Review.
issues that were encountered. [13] A. Holmes & M. Kellogg (2006, July). Automating functional tests using
Selenium. In AGILE 2006 (6 pp. -275).
The diary served its purpose quite well, and adequately [14] M. Haklay & P. Weber (2008). OpenStreetMap: User-Generated Street Maps. In
summarized the experiences gained during development. IEEE Pervasive Computing (vol. 7, no. 4, pp. 12-18)
[15] Yi Fang et al. (2008). Spatial indexing in microsoft SQL server 2008. In
Proceedings of the 2008 ACM SIGMOD international conference on
7 CONCLUSIONS Management of data (SIGMOD ’08) (pp. 1207–1216)
[16] Peterson, M. P. (1997, June). Trends in Internet map use. In Proceedings of the
For the purposes of implementing in-browser maps, Leaflet and 19th ICA Conference, Ottawa (Vol. 1, No. 10, pp. 571-580).
Google Maps are both adequate at doing so. The frameworks do [17] Gibin, M. et al. (2008). An exploratory cartographic visualisation of London
however have different pros and cons. through the Google Maps API. Applied Spatial Analysis and Policy, 1 (pp. 85-
97).
When rendering large sets of geographic data, both frameworks
have enough functionality to draw the needed geometry. Google
Maps generally maintains a higher level of performance when
doing so, especially when it comes to placing large sets of
markers.

Both frameworks are easy to use and quite straight-forward to

implement. The code and syntax of the frameworks are very
alike, to the point of being nearly hot-swappable.

Google Maps is a paid service whereas Leaflet is free to use.

Google Maps includes many additional services that Leaflet users
would need to obtain through third-party providers. These
services include (but are not limited to) geocoding, live traffic
information, map elevation, and directions. If your project
requires any of these services, Google Maps is your one-stop
shop for them.