Exploring The Potential of 3D Web Mapping and Analysis To Support Informed Decision Making in Planning

Exploring the potential of 3D web mapping
and analysis to support informed decision

making in planning
A research project submitted in

partial fulfilment of the
requirements for the degree of
MSc Geographical Information
Science
By
Richard Hargreaves
Department of Civil,
Environmental and Geomatic
Engineering
University College London
12th September 2018
Academic supervisor: Industry supervisor:

Dr Claire Ellul Mr Chris Mewse
Declaration of ownership
Student Name: ______RICHARD HARGREAVES________
Programme: _____________MSc GIS________________
Supervisor: ____________Dr Claire Ellul_____________
Dissertation Title:
_Exploring the potential of 3D web mapping and analysis to support informed decision____
_making in planning.__________________________________________________________
• I confirm that I have read and understood the guidelines on plagiarism, that I understand
the meaning of plagiarism and that I may be penalised for submitting work that has been
plagiarised.
• I declare that all material presented in the accompanying work is entirely my own work
except where explicitly and individually indicated and that all sources used in its
preparation and all quotations are clearly cited.
• I have submitted an electronic copy of the project report through Moodle/turnitin.
Should this statement prove to be untrue, I recognise the right of the Board of Examiners to
recommend what action should be taken in line with UCL’s regulations.
Signature:
Date:
i Abstract
Urban planning supports growth of the built environment in the UK, geospatial data and
software is often required for the process that underpins this modern workflow. While open
web visualisation of 2D data is becoming increasingly common in planning, the use of GIS
tools for 3D data is still in the realms of trained desktop based users. In line with the
development of GeoXphere’s new cloud GIS (XMAP V2), this project examines the gap in
current web GIS for 3D data visualisation and analysis tools, using Mapbox GL JS and Turf.js
libraries.
A successful application was developed to visualise 3D LOD 1.2 buildings and analyse their
component 3D data, notable tools developed include buildings of equal height highlighting
and counting, q building height profiler and ‘On-Click’ 3D information. User feedback for the
application was promising, 100% of users agreed this application could aid the planning
process with further development and bug fixing. Mapbox basic functionality is able to
support the development of a useable application, which can create an open platform for
inspecting 3D spatial data. It can also be extended to perform GIS analysis with integration of
other JavaScript libraries, further benefiting the urban planning process.
This project was completed in collaboration with the industry partner GeoXphere Ltd. The
application is live at the date of submission via https://dissertation-gx.herokuapp.com, with
the code base visible in appendices C and via GitHub at https://github.com/RJHCarto/project.
ii Acknowledgements
I would firstly like to thank Dr Claire Ellul for the support and guidance she has provided since
joining the university. The advice you have given me since being one of your tutees has been
invaluable to both my personal skillset and the project. The team at GeoXphere have played
a crucial role in this project. I’d particularly like to thank Tom for taking the time on multiple
occasions to provide technical insight and for providing a wealth of JavaScript knowledge.
Furthermore, the support of Chris was invaluable, helping to widely distribute the user
feedback survey and allowing me to feel part of the team. I was grateful to get an insight into
the goings on at GeoXphere and get to know you all.
It is safe to say without the support of my friends and family, my accomplishments up to this
point would have been impossible. Emotionally they have been integral, offering a helping
hand and listening ear whenever they could. In particular Heidi and Rob, you listened to both
my spatial and non-spatial ramblings whether you wanted to or not and provided company
with laughter and more trips to get coffee than I’d like to admit.
Contents
Introduction ............................................................................................................................... 1
Motivation........................................................................................................................... 1
Emerging need within UK planning ..................................................................................... 1
Industry partner .................................................................................................................. 4
1.3.1 Web services ............................................................................................................... 4
Shared aim .......................................................................................................................... 5
Literature Review ....................................................................................................................... 6
GIS and the future of data and visualisation....................................................................... 6
2.1.1 Three-dimensional GIS ................................................................................................ 6
2.1.2 Desktop and Web GIS ................................................................................................. 7
UK planning ......................................................................................................................... 9
2.2.1 GIS and planning ....................................................................................................... 10
GIS and public engagement in planning ........................................................................... 13
2.3.1 Public Participatory GIS ............................................................................................. 13
2.3.2 Recent developments of public engagement in planning ........................................ 15
Gap analysis ............................................................................................................................. 16
Research Questions........................................................................................................... 17
Objectives.......................................................................................................................... 17
Resources ................................................................................................................................. 18
Data classification ............................................................................................................. 18
3D building datasets.......................................................................................................... 19
Dataset conversion ........................................................................................................... 19
Prototype requirements ................................................................................................... 21
4.4.1 Core mapping and data handling .............................................................................. 22
4.4.5 Analysis, tool creation and results presentation ...................................................... 23
Iterative development process ................................................................................................ 24
Stage 1 – Visualising the data ........................................................................................... 25
5.1.1 Data loading .............................................................................................................. 25
5.1.2 Map initialisation ...................................................................................................... 25
5.1.3 Map tracking ............................................................................................................. 26
5.1.4 Adding data sources and layers ................................................................................ 27
5.1.5 Layer selection .......................................................................................................... 31
Stage 2 – Building height profile ....................................................................................... 27
5.2.1 Drawing the profile segments ................................................................................... 27
5.2.2 Points of Intersection ................................................................................................ 27
5.2.3 Midpoints of intersection points............................................................................... 28
5.2.4 Midpoints in polygon test ......................................................................................... 29
5.2.5 Visualising the intersected buildings ........................................................................ 29
Stage 3 – Graphing capability............................................................................................ 34
5.3.1 Plotly.js plot outline and core components .............................................................. 34
5.3.2 X Variable .................................................................................................................. 34
5.3.3 Y Variable .................................................................................................................. 34
5.3.4 Width Variable .......................................................................................................... 35
Stage 4 – Tools for further data inspection ...................................................................... 36
5.4.1 Querying buildings of equal heights ......................................................................... 36
5.4.2 Switching ‘on & off’ the equal layer .......................................................................... 37
5.4.3 ‘On Click’ 3D building information ............................................................................ 37
Results ...................................................................................................................................... 39
Final development product ............................................................................................... 39
Application performance .................................................................................................. 43
6.2.1 Initial app interface ................................................................................................... 43
6.2.2 Individual layer .......................................................................................................... 43
6.2.3 Building height profile result..................................................................................... 43
Individual user feedback ................................................................................................... 45
6.3.1 Navigation ................................................................................................................. 45
6.3.2 Tool functionality ...................................................................................................... 45
6.3.3 Performance.............................................................................................................. 46
6.3.4 Useful comments ...................................................................................................... 47
Discussion ................................................................................................................................ 48
Developing upon functionality of previous web GIS......................................................... 48
Application performance .................................................................................................. 49
Use within UK planning ..................................................................................................... 50
Reviewing the research question...................................................................................... 50
Critical reflection ............................................................................................................... 51
7.5.1 GeoXphere viability ................................................................................................... 51
7.5.2 Bugs founds ............................................................................................................... 52
Further Development........................................................................................................ 53
7.6.1 Data ........................................................................................................................... 53
7.6.2 Interface .................................................................................................................... 53
Concluding Remarks ................................................................................................................ 54
Appendices............................................................................................................................... 55
References ............................................................................................................................... 76
Figures
Figure 1: Development of planning application maps from 2006 (right) to 2017 (left). ........................................ 2
Figure 2: Parish Online platform, showing relevant layers for planning. ............................................................... 4
Figure 3: Spatial analysis and its role within the planning process. ..................................................................... 10
Figure 4: Example of maps used within current planning reports. ....................................................................... 11
Figure 5: Examples of web mapping applications for the planning process at local government level. .............. 12
Figure 6: Examples of new and old PPGIS............................................................................................................. 14
Figure 7: Diagram of gap within the current provision for planning GIS. ............................................................. 16
Figure 8: Current LOD categories for a residential building. ................................................................................ 18
Figure 9: Diagram of height attributes given within the datasets.. ...................................................................... 19
Figure 10: Conversion of data in FME using the Wavendon dataset as an example. ........................................... 19
Figure 11: Map of dataset location showing overall extent of features at each location. ................................... 20
Figure 12: Mock-up diagram of prototype web application. ................................................................................ 21
Figure 13: Exemplar diagram for the iterative development process. ................................................................. 24
Figure 14: The four stages of development. ......................................................................................................... 24
Figure 15: Resulting development from stage 1, showing 2D and 3D layer visualisation and navigation. .......... 33
Figure 16: Visual example of how the midpoint of two intersects. ...................................................................... 28
Figure 17: Intersect to midpoint for loop process. ............................................................................................... 28
Figure 18: A bar plot allowing variable widths depending on per feature intersection widths ........................... 35
Figure 19: Working example of 'On-Click' 3D building information tool. ............................................................. 38
Figure 20: Working example of the 'Buildings of equal height tool'. ................................................................... 38
Figure 21: Initial in browser view of the application when first loaded by the user.. .......................................... 40
Figure 22: In browser working example of prototype with the buildings profile tool in use. .............................. 41
Figure 23: In browser working example of prototype with the buildings of equal height and 'On Click' 3D pane
information tools in use........................................................................................................................................ 42
Figure 24: Chart representing user percentage against ease of use questions .................................................... 45
Figure 25: Chart representing user percentage against performance questions ................................................. 46
Figure 26: Inconsistent layer loading between the 2D and 3D panes. ................................................................. 52
Figure 27: Building height profile multi line profiling bug .................................................................................... 52
Figure 28: Building height polyline profiling bug . ................................................................................................ 52
Figure 29: Kepler.gl user data upload interface. .................................................................................................. 53
Tables
Table 1: The comparison of Web and Desktop GIS. ............................................................................................... 8
Table 2: Table adapted from the Plain English guide to the Planning System. ...................................................... 9
Table 3: Outline of notable V1 application components. ..................................................................................... 39
Table 4: Performance testing for loading components ........................................................................................ 44
Table 5: Navigation user feedback ....................................................................................................................... 45
Table 6: Checklist of web GIS functionality .......................................................................................................... 48
Introduction
The planning industry are a user group that greatly benefit from spatial data of all type
because in essence all planning happens somewhere and therefore is locational. With the
current growth in both GIS data and platform options, a period of revision for how the
planning system integrates spatial data into its processes is necessary. User groups such as
the future cities catapult are looking at the digital potential for urban planning (Future Cities
Catapult, 2016), which is addressing platform and data separately. However, the proposal of
both a flexible and current GIS system which is opensource, web based and 3D centric is
lacking. This report will provide a well-informed comparison of current provision and propose
a newly developed tool to meet user needs observed in feedback sessions.
Motivation
With the emergence of 3D spatial data, the need for an application to read, visualise and
analyse is ever present. Advance desktop GIS is becoming better equipped to handle 3D data,
however with expensive licencing and often high hardware requirements this technology can
be considered inaccessible to the majority (Davis and Haklay, 2004). Following the
development of cloud technologies the value of the internet for business workflow and
service has increased, within the geospatial industry web GIS is fast becoming a viable
platform. Therefore, the ability to visualise data as well as analyse data within a web
environment is an appealing one. Thus, providing a better mechanism for data to be
understood by the community (Hu et al, 2015).
Emerging need within UK planning

Since 2006 the number of planning decisions made in England yearly has averaged 502,
totalling 5,517 (GOV.UK, 2018), over this period the process has been largely paper based.
Figure 1 displays proposed location plans from 2006 and 2017, while the latter is not hand
drawn, technology has been used similarly to create a plan which is comparable to the
standards of a decade ago. Evidence of GIS use is increasing, but development level is limited
as later addressed in section 2.2.1 .
1
Figure 1: Development of planning application maps from 2006 (right) to 2017 (left). Applications used are from the City of
London (2006; 2017)
GIS has been a key tool for planners since its first conception as a viable product, it has seen
growing use in the US within local government from as early as 1984 (Warnecke et al, 1998).
Furthermore, GIS is now considered a standard among a planners toolset (Drummond &
FAICP, 2008), with planners being expected to know how to carry out analysis including; urban
modelling, multi-criteria decision analysis and public participation to name a few. However,
often these tools are reserved for the right of the professionals or planning companies, and
access to the public is limited by proxy due to the amount of training necessary for
engagement.
More recently, the growth of open data, open software and the web – which is now providing
an internet connection in 90% of households (ONS, 2018) – means public capability is
changing. An increasing amount of spatial data is also being provided under the recent
governmental plans through the new Geospatial Commission (‘Unlocking of government’s
mapping and location data to boost economy by £130m a year’, 2018) which stipulates free
provision of a UK wide GIS.
2
The Ordinance Survey are providing their MasterMap data, this includes ‘Building Height
Attributes’ an extensive 3D dataset (Ordinance Survey, 2014) which offers great potential for
this report. Recognition of this change within the opensource community is fuelling
developments towards more stable web mapping libraries that realise the need to provide
3D support. Mapbox’s JavaScript library recently added development of extruded layer styling
in 2016 (Budorick, 2016).
Growth in new and open data support and increased internet coverage gives the planning
industry new avenues to consider for both 3D data use and web GIS use. In reality the use of
such platforms within the planning industry are rare, in 2009 research into web platforms was
described as ‘favourable’ when used for public participatory planning and the internet
considered a ‘primary mechanism’ for access to both planners and stakeholders (Simão,
Densham, & Haklay, 2009). Furthermore, Drummond & FAICP (2008) described such
developments mentioned above as long term future problems that planners will face. The
potential for both current and future needs of the planning industry to be met by such
frameworks is clear, and this report will aim to contribute to this effort.
3
Industry partner
This project is linked with GeoXphere an industry partner who specialise in providing cloud
based GIS solutions, surveying hardware and airborne and ground survey capture.
Clientele include local councils, private companies and GIS professionals.
1.3.1 Web services

The current platform maintained by GeoXphere and used by over 2000 employees in local
government, town and parish councils is Parish Online (Figure 2). This basic web GIS enables
users to store datasets through a database and visualise them in a web map. While the tool
is slow, it does well in data handling but lacks in analysis tools, further than measuring and
inspection.
Figure 2: Parish Online platform, showing relevant layers for planning.
The current development focus of GeoXphere is XMAP, which will form a product in itself and
add to Parish Online functionality.
4
Shared aim
The overarching project aim is,
“… to give Local Councils access to a system that helps them find answers. The move to XMAP will mean the
interface is easier to use (and therefore users will be able to find things easier), and as a by-product, XMAP is
more technically capable so we'll be able to add more components more easily. A 3D component is one of
those. In the end, the more insightful visualisation we can put in front of the user, the more they'll be able to
find the answers they need.”
Chris Mewse, Managing Director at GeoXphere Ltd. (Mewse, 2018)
The technical aim involves producing a fully functioning web application, with a core map
component. Which will enable analysis, visualisation and distribution of both 2D and 3D
spatial data with focus on planning incentives. The application will sit within GeoXphere’s
XMAP cloud GIS as a module, for users to access and use with their custom data, therefore it
will aim to complement the Cloud GIS both visually and practically.
5
Literature Review
GIS and the future of data and visualisation
When examining, arranging or analysing all varieties of spatial data a Geographical
Information System (GIS) is commonly considered the digital tool for the task. (Heywood et
al, 2011). It has long been agreed that information regarding the earth surface should be
stored and processed through such computer systems (Rhind, 1989). Spatial data has
primarily been recorded in 2D consisting of an x and y coordinate or longitude and latitude
(Haining & Haining, 2003), such data has been integral to the invention and development of
GIS since the 1960s in Canada with CGIS and throughout the rapid development in the 1980s
with ARC/INFO (Waters, 2017), bringing GIS to the point it is at today where “geodesign” is of
utmost importance for the effect this tool is having upon decision making via processes such
as visualisation (Dangermond, 2014).
Examples of the use of GIS with 2D data can range from physical assessment of landscape
such as work by Dai and Lee (2002) for landslide modelling in Lantau Island, Hong Kong, to
visualisation of human migration flows using web mapping principles by Zambotti et al (2015).
However, over recent years the emergence of 3D data representation within the GIS industry
has been growing.
2.1.1 Three-dimensional GIS

The backbone to a GIS is data, with this in mind the data is only as useful as the technical
capability of software. The known limitations of 3D data integration within traditional 2D GIS
(Kluijver & Stoter, 2003) has given rise to the need for better 3D functionality. Technological
advancements lead by the gaming industry (Ellul and Wong, 2015) have drastically increased
the viability of 3D GIS systems. Elwannas (2011), states how detailed analysis required for
such data is currently unaddressed within 2D GIS, concluding that “GIS must be 3D simply
because our world is 3D.” Visualisation of 3D spatial data has been the main avenue for
development (Ellul and Wong, 2015), but 3D GIS is necessary if a user aims to incorporate 3D
into there geospatial workflow including areas of spatial analysis (Abdul-Rahman & Pilouk,
2008).
6
A particular 3D data focus is that of city models, the Open Geospatial Consortium standards
have been refined from CityGML 2.0. This classification method can be considered format-
agnostic, with LOD 1.2 being most common in practice for models of LOD1 classification
(Biljecki et al, 2016). Proprietary developers have been working in this study area, with
toolboxes such as the ‘3D Analyst’ from ArcMap 10.6 (ESRI, 2018a), which apart from
visualisation now currently enables line of sight functionality and 3D data querying alongside
height measurement for 3D city model datasets. With 3D urban mapping and landscape
planning being named as an area that needs 3D GIS (Abdul-Rahman & Pilouk, 2008), it’s
development with regards to city models is an important one.
Current examples of 3D GIS development can be split between proprietary and open source.
Proprietary refers to a paid for service/program/licence which often supplies software
versions with capabilities controlled and developed by the closed source company (Singh et
al, 2015) and open source is the collaborative open development of software for free,
meaning it can be used and developed as each user sees fit (Steiniger & Bocher, 2009). The
platform for 3D GIS development is also an area of research. While with traditional 2D GIS,
access and viability of the web at the time of initial development was unfeasible, this is not
the case with 3D GIS in contrast it is evolving in parallel with web GIS (Milner et al, 2016).
2.1.2 Desktop and Web GIS

Platform type is also key in defining the type of 3D GIS, whether the GIS is web based or
desktop based. Desktop based assumes an installed instance of a program at a user’s
computer, while web based GIS, is hosted on the internet and either server or client side run
for client use. Since the turn of the century and the increased reliance on the internet for data
conveyance web mapping based application of 2D data types has seen a marked growth (Kong
et al, 2014). However it is important to note that the boundary between desktop and web, is
a fuzzy one. Meaning that web GIS can rely upon desktop for properties, or the desktop GIS
can present information from the web such as QGISs ‘qgis2threejs’ plugin (Akagi, 2018) or a
web basemap within ArcMap ("Living Atlas of the World", 2018). Table 1 briefly outlines the
pros and cons of each current form of GIS.
7
Advantages Disadvantages
• Ease of dissemination: Resulting in development • Performance: Transfer of information from

of both web GIS accessibility and deployment, not server to client relies heavily on graphic
only does it allow the visibility of GIS data to the performance which is often underpinned by
masses but also the creation of Software as a internet connection and speeds, making the
Service (SaaS) on the web. platform untenable or slow in areas with poor
or no internet connection.
• Ease of access: Web servers are able to handle
multiple amounts of users all operating at once,
taking the dependence away from the user’s
Web GIS
machine hardware.
• Ease of use: With web interaction being aimed at

user simplification, so to is web GIS. This platform
allows non-GIS professionals to understand and
use GIS in a familiar setting.
• Cost: If using a proprietary service or SaaS

platform, access is often cheaper than that of
licenced programs.
• In-Depth analysis: Often the ability of desktop GIS

extends further than the lightweight capabilities • Performance: The access and experience of a
of web GIS, enabling analysis of complex spatial desktop GIS relies upon the users machine
data in both 2D and 3D. hardware, whereby the users machine much
suit the software requirements, this can
• Private: Data is kept ‘in house’ meaning all data range from RAM to operating system and
Desktop GIS
read, analysed and stored can be kept within a more.

physical machine within a physical location, this
may be a factor some users require. • Install instances: A desktop GIS is often only
accessible where it is installed, as a result if
the user is away from their machine, they
cannot use the GIS tools without new
installation.
• Cost: Licencing can often be costly with

licences being per machine installation.
Table 1: The comparison of Web and Desktop GIS. Information adapted from multiple sources. (Fu & Sun, 2010; Baptista &
Paiva, 2009; Peng & Tsou, 2003)
8
UK planning
Planning within the UK is the system where building developments are proposed, mediated
and brought to fruition. It is the way in which government can centralise decision making and
processing of proposals. The overarching aim is to ensure correct development with a positive
outcome for both the community and the economy. The process is also supposed to be able
to judge the suitability of a project. (Plain English guide, 2015)
To understand where spatial analysis through GIS sits within the UK planning process, key
interest groups and decision makers must first be outlined, as in table 2.
Decision takers Brief role outline

Secretary of State for Communities and To supervise the planning system and have direct
Top Local Government decisions within national significant infrastructure
level projects.
Planning Inspectorate A group of inspectors who enforce and decide upon

appeals within the planning system in relation to these
large projects.
Local planning authorities This encompasses the three tiers of UK local government:
County, district, town and parish councils.
County and district level currently undertake most

planning matters including plan preparation, application
processing and unauthorised development.
The town and parish level is often expected to comment

on applications that may impact their area. The
production of neighbourhood plans is now in place to
bring decision making to the lowest level.
Officers Planning officers are employed at county and district

level, they deal with 90% of application which are minor
or uncontroversial.
Councillors Often these are locally elected people who lead in

Local representing the views of residents in both plan proposal
level and impact.
Table 2: Table adapted from the Plain English guide to the Planning System, showing key decision takers in the process. (Plain
English guide, 2015).
9
2.2.1 GIS and planning
In 2008 a review by Anthony Gar-On Yeh (2008) discussed the use of GIS for planning support
at the time, he found how GIS from its inception in the 1970s (Chrisman, 2006) has spread
throughout the planning process and is currently at use in some form through all levels of
planning. Multiple sources corroborate this, stating that as GIS advances it is becoming ever
more important for the support of the planning process (Geertman & Stillwell, 2003; Jackson,
2008; Klosterman & Brail, 2001), figure 3 below does well in outlining the overall use of GIS
from initial data handling, through to plan proposal and processing with the end goal of
evaluation and public feedback.
Figure 3: Spatial analysis and its role within the planning process. (Yeh, 2008)
When viewing local planning applications in the UK, it is often the case that the extent of GIS
analysis is static, meaning to say often the production of maps is as images within lengthy
reports. These static maps are often basic boundary plans denoting the extent of
development or can be more elaborate annotated map. An example of such planning maps
are shown in figure 4.
10
A. B.
Figure 4: Example of maps used within current planning reports. A (The Neighbourhood Plan Steering Group, 2018), B ("Details
of Planning Application - CB/18/02523/FULL", 2018).
Yeh (2008) states technical capability of GIS is no longer a constraint, but rather the training
necessary, data availability and top tier change. While local level submission is still grounded
within static maps, the city, district and county level are beginning to make use of web
mapping services to centralise planning information.
Both Canterbury and Leicester city council have web mapping portals which allow all types of
users to browse planning applications spatially. Canterbury planning constraints map
(Canterbury City Council, 2018) is platform which currently holds all planning boundaries as
layers for viewing, the platform does not aid in linking specific planning projects to a unified
map much like Leicester city maps (Leicester City Council, 2018) does. Leicester city maps uses
a pin to display planning history for land parcels on the map, the map goes further to link to
the traditional planning portals where information about proposals and status can be found.
These two examples in Figure 5 are a good representation of the extent of Web GIS in UK
planning currently.
11
Figure 5: Examples of web mapping applications for the planning process at local government level. Both systems have
been created by city councils, the left is Leicester city MAP (Leicester City Council, 2018), while right is Canterbury City
Council Planning Constraints Map (Canterbury City Council, 2018).
Traditional GIS analysis within the planning industry is often confined to the desktop of
planning officers examples include rule based systems such as ‘CommuntiyVis’ and ‘What if?’
aiding the process in terms of decision based analysis which function to offer land use
recommendations among other classification methods (Klosterman & Pettit, 2005). While
such tools are beneficial to the planner, Livengood & Kunte (2012) warn that traditional GIS
use in planning often lacks both transparency and participation, complicity undermining the
decision making opportunities for the public. GIS is beginning to be displayed publicly for
information dissemination such as the examples from Canterbury and Leicester and
fortunately the process of public engagement in planning is also realising the relevance GIS
can have, with the development of public participation GIS (PPGIS).
12
GIS and public engagement in planning
It has long been agreed that public participation in planning is underserved and the public
should have “more say in shaping local areas” according to Wilson et al (2017). The need for
stakeholder inclusion which encompasses the public can be first found in literature as early
as the 1960s, where a review of the 1969 Skeffington committee first found concerns for the
inclusion of residents in decision making (The Skeffington Committee, 2013). The current
rhetoric from UK planning is to allow engagement opportunities at all stages of the planning
process, outlined in the flowchart in appendix A, however engagement is often increasingly
limited the further through the process an application goes (Baker et al, 2007).
2.3.1 Public Participatory GIS

PPGIS is well-documented as a tool with potential that can be meaningful for public
engagement in the planning process. The opportunities for its incorporation into planning
support systems (PSS) is evident, enabling progress towards good local decision taking by the
public in planning (Kahila-Tani et al, 2015). Literature finds, that over recent years
development of such tools has grown (Brown & Raymond, 2014) to a point where PPGIS is
now considered best practice for gathering location based information from the community
(Brown, 2012; Brown & Kyttä, 2014). As is beneficial to the majority of public participation
efforts, PPGIS is often a web-based tool (Brown & Kyttä, 2014; Kahila-Tani et al., 2015)
allowing for real-time maintenance, results collection and removing the need for members of
the public to physically attend participation events. The latter is often the prime inhibitor for
public participation in offline methods (Kingston, 2002).
Virtual Slaithwaite is considered the earliest instance of web-based PPGIS for planning, while
the tool in Figure 6 is a product of its time, it attempted to involve citizens in the decision
process though an organisation called Planning for Real ® (‘What is PFR?’, n.d.) the aim was
to allow users to comment upon local land features in Slaithwaite which aided in compiling
opinion for the planning consultation of new developments (Kingston, 2011). The outcome of
such a tool was a village wide plan for the local area. Its arguable without such a system,
widespread opinion and commentary by citizens on the future of Slaithwaite could not have
been achieved by traditional methods.
13
Figure 6: Examples of new and old PPGIS. Left: Virtual Slaithwaite (‘Slaithwaite Public Participation GIS’, 2003), right:
Ushahidi (‘OpenCiclismo: San Antonio’s Crowdsourced Bike Map’, 2018).
Recently public participation within the modern web mapping realm has been demonstrated
by various applications. Ushahidi (‘Ushahidi’, 2018), an application both web (Figure 6) and
mobile based is used by change makers to poll opinion or as they put it “Read the crowd”.
This application allows survey responses to be geolocated and presented on a web map, with
the styling based upon response attributes. These responses are publicly submitted via a form
interface. The modern approach begins to tackle the professional decision taker and public
engagement link, while the example shown is not planning specific, adaption or inspiration
from such a system may be beneficial.
14
The approach of PPGIS within planning has been a cause for concern for some academics. The
opportunity for the tool to be exclusive rather than inclusive of the public due to use of
internet and digital technology would create bias in participation (Craig et al, 2002).
Furthermore to enable participation prior knowledge or training could be expected (Pickles,
1995). Often these systems encourage responses at a single citizen scale which arguably may
aid the loss of community behind such decisions (Baker et al., 2007).
These issues are important to consider when developing such systems, with both good design
and public education, it may be that PPGIS systems offer a well developed starting point for
public facing GIS within the planning process.
2.3.2 Recent developments of public engagement in planning

In recent years public engagement within UK planning has changed with the introduction of
the Localism Act 2011. The result being the reform away from centralised power and towards
local community decision makers in turn encouraging an growth in effective and democratic
planning (Department for Communities and Local Government, 2011). A key feature in this
recent legislation is neighbourhood planning. This allows the public to form reports
addressing where they believe development should take place, and what form that
development should take to suit local needs. However in reference to map A from a planning
document proposed within a neighbourhood plan in Figure 4, section 2.2.1 , GIS within this
field is often carried out by local people to meet the needs of the application, not to engage.
The effect this tradition medium (Evans-Cowley & Hollander, 2010) may have in public
engagement through GIS, would be to ‘switch off’ the public with lack of technological
adoption (Le Dantec et al, 2015) thus negatively affecting the potential of local people in
planning. It may be more effective for such neighbourhood planning to be closely linked with
skilled planning officers of local government. Enabling the production of PPGIS to further
increase the spread of public engagement which is so greatly needed (Parker et al, 2014).
15
Gap analysis
This analysis is a prequal to application planning and development to best inform the process.
Figure 7: Diagram of gap within the

current provision for planning GIS.
As previously mentioned in section 1.3.1 . Parish Online, is a widely used platform distributed
and maintained by GeoXphere. The current version does not integrate 3D data, and mainly
enables premade data loading and viewing as well as vector layer creation. The extent of map
tools are limited to distance measuring and data export.
An opensource desktop alternative is QGIS 3.0.0 (2018), which is an extensive desktop

software which must be installed for use and cannot be accessed online. Being a well-
developed GIS software, the toolsets available via both core functionality and plugins are able
to benefit the planning process. Rigolon (2012) found QGIS benefited the urban planning
process, and since then the newer QGIS 3.0.0 has released which is able to visualise 3D
information, as well as integrate tools such as ‘Profile tool’ from Jurgiel et al (2018). Recently
efforts to create 3D City models within the program have also been successful (Jain et al,
2017).
From Figure 7 and examples, it is evident that the development of a tool with the ability to
bridge the difference between functionality of desktop and web GIS while maintaining the
simplicity of web GIS is necessary. XMAP is aiming for this goal, while the proposed application
is vital to enabling 3D capability.
16
Research Questions
The proposed application development will attempt to address the gap in current products
outlined previously and also address the following research question:
Can off-the-shelf web mapping tools be extended to enable the use of 3D within the planning
process?
Objectives
The following objectives will enable the aims from section 1.4 and the research question to
be addressed and investigated.
1. Investigate the use of opensource and proprietary JavaScript libraries for 3D web mapping
visualisation.
2. Select a chosen library to develop a method of data upload and visualisation, using
JavaScript, HTML5, CSS for front end development.
3. Use a node server to allow the application to be hosted locally and easily ported to
production.
4. The creation of two analysis tools that use or manipulate height from the 3D data.
5. Explore further development of the dashboard for graphing alongside the analysis tools,
using packages based upon D3.
6. Undertake user feedback sessions for application interface, operability and performance
assessment.
17
Resources
This chapter will address the data used in this project and the development libraries that are
required for the first version of the application. Firstly a description of datasets, their
attributes and the relevant conversion necessary, followed by a detail description of which
libraries were chosen for each component of the application and the reasons behind this.
Data classification
The primary data visualised in this application is 3D building data which is in the form of
extruded polygons. The classification of this data can be considered as LOD 1.2 from Figure 8.
Figure 8: Current LOD categories for a residential building. (Biljecki et al, 2016)
18
3D building datasets
The three datasets visualised within the application are sourced from the ‘OS MasterMap
Topography Layer – Building Height Attribute’ (Ordinance Survey, 2014) from the following
5km national grid tiles:
• SP9520 for Eaton Bray • SP9035 for Wavendon • TQ2580 for UCL
4722 features 10104 features 63371 features
The ‘OS_TOPO_TOID’ is the primary ID attribute for each polygon feature in a dataset, with a
range of height attributes accompanying each feature in a dataset. The differing height values
attributed to each feature is displayed in Figure 9. For the purposes of this project ‘RelH2’ the
building height to the eaves
before the roof will be used
to extrude to. Visually a 3D
building of LOD 1.2 is similar
to a building without a roof
and therefore similar to the
height of most buildings at
‘RelH2’.
Figure 9: Diagram of height attributes given within the datasets. Adapted from
Ordinance Survey (2014).
Dataset conversion
Each national grid tile used required conversion from geodatabase (.gdb) format to GeoJSON
format (.geojson/.json). Geodatabase file format is an ESRI format often used for storing
spatial objects and information, they are commonly read by GIS systems (ESRI, 2018b).
GeoJSON file format is geospatial information based on JavaScript Object Notation (JSON)
(Butler et al., 2016) which is a standard format used within JavaScript frameworks.
Geodatabase Reader GeoJSON Writer
Figure 10: Conversion of data in FME using the Wavendon dataset as an example.
The datasets following the conversion process in Figure 10 are feature collections, these have
been converted in FME using simple data readers and writers. These collections are JSON files
in the form of an array containing each building as a separate feature in the array, an example
can be found in appendix B.
19
Figure 11: Map of dataset location showing overall extent of features at each location. Basemap provided by CartoDB (CARTO, 2018), data provided by the Ordinance Survey (2014)
20
Prototype requirements
The prototype of the web application will draw on both web mapping components and
dashboard components, presenting a platform which will visualise 3D building data and allow
interaction with the data. It will also expand upon the mapped datasets, by presenting
analytical information on a graph and within overlay features. Figure 12 outlines the
envisaged layout of the prototype, where the contents of each pane represents the type of
data that can be expected to be displayed in the working prototype.
Figure 12: Mock-up diagram of prototype web application.

The following chapters will outline the JavaScript libraries used for each part of the prototype.
Node.js framework will be used as an all inclusive wrapper for the application which is
composed of elements of the multiple libraries mentioned below. This framework is designed
“to build scalable network applications” (Node.js Foundation, 2018) and has been adopted
already by multinational companies such as IBM and Microsoft (Delgado, 2016). All JavaScript
libraries used we be integrated using APIs.
21
4.4.1 Core mapping and data handling
The core JavaScript libraries for data handling, web mapping and visualisation.
4.4.2 Mapbox GL JS
Unlike the JavaScript mapping libraries of Leaflet and OpenLayers, Mapbox GL JS is able to
extrude polygon data to a height attribute as core feature. Thus enabling 3D visualisation that
is integral to this application. The library uses WebGL which renders an interactive map where
data can be presented as a layer or multiple layers, alongside this process Mapbox renders
styles for basemaps, which can be independently controlled using Mapbox studio. (Mapbox,
2018a)
To create layers Mapbox uses sources to supply the map layers with data, GeoJSON is an
accepted format for a Mapbox source which also is complementary to the data format of the
processed OS national grid tiles (Mapbox, 2018b). Furthermore Mapbox uses tiled sources in
both vector and raster format, this tiled source is able to allow better map performance for
larger datasets (‘Vector tiles: the next generation of tiled maps’, 2016) which may be useful
for this project.
Another 3D enabled JavaScript library is Cesium JS, this library is primarily for serving 3D globe
environments and can be enable to present GeoJSON in 3D similarly to Mapbox. However its
adoption within the community is significantly less at just 7% of npm downloads in the last 6
months compared to Mapbox GL JS (npm trends, 2018). Furthermore Mapbox GL JS is well
documented with a developed support portal providing both working examples and API
definitions. It is for these reasons that the Mapbox GL JS library was chosen as a core
development library for this application.
4.4.3 jQuery
The use of jQuery for HTML element extraction and manipulation (JS Foundation, 2018) will
prove crucial in reading data fed into the application for use in both custom tools and
interactions. This library enables fast use of predefined jQuery functions within any JavaScript
framework, giving this application flexibility during development. It has become widely
accepted across the web, with over 90% of the top 10,000 websites using it today (built with,
2018).
22
4.4.4 Lodash
Lodash uses modular methods for working with multiple types of variable including objects
and arrays, streamlining development to simpler one line functions. (Lodash, 2018)
4.4.5 Analysis, tool creation and results presentation

The following libraries will be instrumental in providing functionality outside of basic
JavaScript functions, forming the operations necessary for analytical tools developed for the
application.
4.4.6 Turf.js
This library will be used alongside basic JavaScript functionality to be the core component for
geospatial analysis performed within the application. Turf.js will be used client side for spatial
operations performed upon the GeoJSON datasets (Turfjs, 2018). This library is described as
GIS for web mapping and is recommended by Mapbox for use with their products (Mapbox,
2018c).
4.4.7 Math.js
Math.js is a library written for JavaScript and specifically Node.js to give a solution to working
with number variables, providing added functionality for mathematical problems and
processes. It supports numbers, arrays and more. (mathjs, 2018)
4.4.8 Plotly.js
Providing solutions for data visualisation, Plotly is a package which spans most major
development languages including JavaScript. Plotly.js is currently used by companies such as
Facebook and Walmart, it is a library built from d3.js and stack.gl which enables static and
animated charting. Functionality includes many types of visualisation from scatter plots to
scientific charts. (plotly, 2018)
23
Iterative development process
The term development in this context encompasses the process of web development using
three main development frameworks HTML5, CSS3 and JavaScript. The method used to
approach workflow toward the prototype application was an iterative one (Spence & Bittner,
2005), whereby the application was developed in stages and each stage followed a design-
build-test lifecycle outlined in figure 13. Each stage was focused for a particular goal and time
period, until all prototype goals were met through the requisite number of development
stages. This workflow is similar to an agile development process.
Figure 13: Exemplar diagram for the iterative development process.
The full code for each section can be found in appendix C, each code snippet caption will
reference the heading in appendix C.
The four stages of development are outlined in the figure 14, where the core components of
development are listed. These stages are explained in greater detail throughout sections 5.1
to 5.4.
Figure 14: The four stages of development.
24
Stage 1 – Visualising the data
5.1.1 Data loading

The national grid squares specified in section 4.1 are initially loaded to the application as local
GeoJSON files converted according to the process in section 4.3 . These datasets are defined
as global variables as shown in Code Snippet 1 and can be used for the Mapbox source and
layer functions.
var EatonBray = 'data/EatonBray.json';

var Wavendon = 'data/Wavendon.json';
var UCL = 'data/UCL.json';
Code Snippet 1: Global variables for GeoJSON 3D Building datasets. Appendix C3.
5.1.2 Map initialisation
The map pane must first be initialised using the code snippet 2, here the parameters of the
function mapboxgl.Map() are specified in JSON format.
var map3D = new mapboxgl.Map({

style: 'mapbox://styles/rjhargreaves/cjiok8itx27nf2so7p2492eba',
center: [-0.5850058794021606, 51.87403356997926],
zoom: 16,
pitch: 70,
bearing: 0,
container: 'map3D'
});
Code Snippet 2: Defining the variable for the 3D map pane, using Mapbox GL JS functionality. Appendix C3.
Where style: is the map pane basemap directory in Mapbox studio accessed using an access
token, center: defines the map centre, zoom: is the level of zoom on load, pitch: is the
angle of incidence, bearing: is the map bearing on load and container: is the id for the
HTML div or section and the styling in the CSS file. The 2D map was also created similarly.
25
5.1.3 Map tracking
The application contains two map panes, map3D and map2D which will present the dataset
information in the respective dimensions. Having these two panes track with each other so
they are able to always present the 3D and 2D view of the same location will aid with usability.
var disable = false;

map3D.on("move", function () {
if (!disable) {
var center = map3D.getCenter();
var zoom = map3D.getZoom();
var bearing = map3D.getBearing();
disable = true;
map2D.setCenter(center);
map2D.setZoom(zoom);
map2D.setBearing(bearing);
disable = false;
}
});
if (!disable) {
disable = true;
disable = false;
}
});
Code Snippet 3: Using Mapbox GL JS 'on' function to simultaneous

match map view variables. Code has been adapted from Bo Ericsson's
work (Ericsson, 2016). Appendix C3.
Code Snippet 3 outlines the 25 lines used to ensure the two map panes consistently match,
each mapXX.on("move") function re-defines the center, zoom and bearing variables
whenever either pane moves. This works when moving either pane due to both function
setting the variables of the other. This code was adapted to fit the needs of the application
from Bo Ericsson’s work (2016), the pitch tracking for both maps has been removed as users
may want to interrogate the data further through pitch change within the 3D pane, which
would be unnecessary in the 2D pane.
26
Stage 2 – Building height profile
This development stage will aim to design, develop and deploy a height profile tool, which
will use the datasets present in the map, to give a height profile for a user defined line
segment.
5.2.1 Drawing the profile segments

The first element to this tool is to allow the user to define the profile segment over which
building heights will be found. The Mapbox GL draw library (Mapbox, 2018d) was integrated
into the application to allow this. The line string tool from this function is used in isolation to
allow users to draw profile segments within the 2D map pane.
The following sections 5.2.2 to 5.2.5, are all notable snippets which contribute to the
getProfile() function.
5.2.2 Points of Intersection

Initially the getProfile() function, requires the user to have drawn a profile segment line
using the tools described in section 5.2.1 before following the process outline in Code Snippet
4. The drawnLine variable is defined as the user drawn line feature, using a Mapbox GL draw
function getAll(). A feature collection JSON is required for the turf.lineIntersect()
function on line 3, therefore turf.featureCollection() is used upon the features from the
global layer JSON variable. The intersection points between layerFeatures and drawnLine
are calculated using turf.js in line 3.
var drawnLine = draw.getAll();
var layerFeatures = turf.featureCollection(SELECTED_LAYER_JSON.features);
intersectingFeatures = turf.lineIntersect(drawnLine, layerFeatures);
for (var i = 0; i < intersectingFeatures.features.length; i++) {

interArray.push(intersectingFeatures.features[i].geometry.coordinates)
}
interArray = interArray.sort();
Code Snippet 4: The first part of getProfile() function, which functions to give the coordinates of the points of intersection
between the line segment and the building layer. Appendix C5.
The intersectingFeatures are then iterated through using a for loop to push each features
coordinates to the array variable interArray, which is then sorted using the JavaScript
function sort(). This array will prove useful for multiple loops within this function.
27
5.2.3 Midpoints of intersection points
The next step towards compiling the buildings intersected by the user segment was to find if
the intersect points are within any features in the currently active layer.
Initially, turf.js point in polygon functionality was used upon the SELECTED_LAYER_JSON and
intersectingFeatures. However due to intersect points always positioned at the building
polygon boundary, this method was an edge case for the turf function and inconsistently
selected some features of the SELECTED_LAYER_JSON as containing the point and some as
not, therefore a more robust method was required.
Figure 15: Visual example of how the midpoint of two intersects.
Figure 16 represents how taking the midpoint of two consecutive intersect points would
always create a point full inside or outside a polygon.
for (var i = 0; i < (interArray.length-1); i++) {

avgCoords = [];
avgCoordX = ((interArray[i][0]+interArray[i+1][0])/2);
avgCoordY= ((interArray[i][1]+interArray[i+1][1])/2);
avgCoords.push(avgCoordX, avgCoordY)
midpointArray.push(avgCoords)
}
midpointArray.forEach(item => {
point = turf.point(item);
midpointArrayPoints.push(point);
});
Code Snippet 5: getProfile() functionality used to create a midpoint array, visual example in figure 13. Appendix C5.
Snippet 8 shows a for loop process which takes the first and second point coordinates as a
pair, then the third and fourth and so on. For each consecutive pair the average was calculated
for the x coordinates and the y coordinates, giving a
midpoint between each pair, illustrated in figure 17.
Finally this creates the midpointArray array which is

processed into feature midpoints using turf.point. Figure 16: Intersect to midpoint for loop process.
28
5.2.4 Midpoints in polygon test
The following nested for loops now tests each feature in midpointArrayPoints and each
SELECTED_LAYER_JSON.features using the turf function turf.booleanPointInPolygon. If
the function finds a true relationship it will add that feature to the buildingFeatures array,
and also add the height of that feature to a separate array for use in separate tools.
for (var i = 0; i < midpointArrayPoints.length; i++) {

height = 0;
for (var j = 0; j < SELECTED_LAYER_JSON.features.length ; j++) {
var status = turf.booleanPointInPolygon(
midpointArrayPoints[i],
SELECTED_LAYER_JSON.features[j]
);
if (status == true) {
buildingFeatures.push(SELECTED_LAYER_JSON.features[j]);
height = SELECTED_LAYER_JSON.features[j].properties.relh2;
}
}
yArray.push(height);
}
Code Snippet 6: Nested for loop, creating feature array intersected by the user segment, from getProfile(). Appendix C5.
5.2.5 Visualising the intersected buildings

The turf.booleanPointInPolygon() function, can often add repeated buildings into the
buildingFeatures array, due to the possibility of two or more midpoints falling in the same
feature, this is illustrated in the first building in figure 16.
Snippet 10 displays the use of a Lodash function _.uniq() which is able to amend this issue
by removing any repeated buildings and creating an array of just unique buildings, which can
be further processed using turf.featureCollection. Creating a GeoJSON feature
collection, which is added as both a source and layer and visualised on the map similarly to
section 5.2 , all of which is done within the getProfile() function.
uniqueBuildings = _.uniq(buildingFeatures);
selectedBuildings = turf.featureCollection(uniqueBuildings);
Code Snippet 7: Lodash and turf functions for creating the final array of buildings from the getProfile() function. Appendix
C5.
This finalises stage two of development and the initial version of the getProfile() tool.
29
5.2.6 Adding data sources and layers
Layers are added to the map pane through first defining sources, these are set using the
addSource() function which requires the type of source and path to the data to be defined,
data were set to the variables used in Code Snippet 1. Following the source addition from the
local JSON variable in section 5.1.1 , the layer can now be created using addLayer().
Map3D.on(‘load’, function () {
hasLoaded = true;
Code snippet 4 defines both
map3D.addSource(‘UCL’, {
the layer id and which source
type: ‘geojson’,
data: UCL to create the layer from. The
});
type sets the polygon layer to
map3D.addLayer({
id: ‘UCL’, 3D using ‘fill-extrusion’,
source: ‘UCL’, while layout has been used to
type: ‘fill-extrusion’,
layout: {‘visibility’: ‘none’}, set visibility to none, which is
paint: {
‘fill-extrusion-color’: ‘#008080’, controlled in the layer menu in
‘fill-extrusion-height’: {
section 5.1.5. Finally, the
‘type’: ‘identity’,
‘property’: ‘relh2’ paint variable defines colour,
},
‘fill-extrusion-base’: 0, opacity and which feature
‘fill-extrusion-opacity’: 0.6
}
property from the JSON to
}); extrude to.
});
Code Snippet 8: Mapbox functionality used to add a layer source from the local
UCL variable, and to create 3D layer from for the 3D map pane. Appendix C3.
This Mapbox functionality is used multiple times for both 2D and 3D panes, to add a source
and layer for all datasets. Wrapped within the MapXX.on(‘load’) function, this ensures the
sources and layers are added upon loading of the map pane. The hasLoaded variable controls
the loading order and time of this asynchronous code.
For the 2D map pane the addLayer() defines slightly differently, setting the type to 2D using
‘fill’ and using paint to define just colour and opacity.
30
5.2.7 Layer selection
Three global variables are initially created in mapStart.js (Appendix C3) these are:
• SELECTED_LAYER_ID • SELECTED_LAYER_JSON • SELECTED_LAYER_BBOX
These variables are defined using the layer menu, they are both used to enable this function
and functions required for other tools stated later. The ID is a string of the current ID shown
in the map panes, the JSON is the full GeoJSON for the current map panes and the BBOX is
the bounding box of the GeoJSON.
function switchLayer(layer) {
SELECTED_LAYER_ID = layer;
if (layer == 'UCL' && hasLoaded) {
map3D.setLayoutProperty('EatonBray', 'visibility', 'none');
map3D.setLayoutProperty('Wavendon', 'visibility', 'none');
map3D.setLayoutProperty('UCL', 'visibility', 'visible');
}
------------------------------------------------------------------------
getLayerGeoJSON(layer).then((json) => {
SELECTED_LAYER_JSON = json;
bboxFromJSON(json).then((bbox) => {
SELECTED_LAYER_BBOX = bbox;
fit(bbox)
});
});
}
Code Snippet 9: The first section of the switchLayer function used by the layer menu, the if statement also repeats until the
grey break line for the layer ids Eaton Bray and Wavendon before continuing to the functionality after the grey break line.
Appendix C4.
Snippet 5 outlines the components of the switchLayer() function, the global ID variable is
set in the first line of the function followed by an if statement. The if statement relies on
the layer variable, this is set by the radio button selected in the HTML code. For the UCL
example above, if layer equals 'UCL' and the hasLoaded variable is true then it will
proceed through the if statement.
31
The contents of the statement controls the visibility of the layers setting UCL as the only
visible layer on both map panes, using mapXX.setLayoutProperty(). This Mapbox function
sets layer visibility using either 'visible' or 'none', for the layer ID. The if statement is
repeated for each scenario of the layer variable which can be either 'UCL', 'EatonBray' or
'Wavendon', before moving on to the functionality after the grey break line in snippet 5.
The latter section of the switchLayer() function in snippet 5 runs through a series of
functions which are defined outside of switchLayer(). Snippet 6 outlines these functions
which use JavaScript promises to consistently carry out the next function after the last has
finished and yielded the necessary result.
function getLayerGeoJSON(layer) {
return new Promise((resolve, reject) => {
$.getJSON((window[layer]), function (data) {
resolve(data)
});
});
}
function bboxFromJSON(json) {
resolve(turf.bbox(json));
});
}
function fit(bbox) {
let bboxToUse = bbox || SELECTED_LAYER_BBOX;
map3D.fitBounds(bboxToUse, {padding: 20});
}
Code Snippet 10: Precursor functions necessary to ensure the correct layer JSON is in use for the layer menu and any
further tools. Appendix C4.
This first function getLayerGeoJSON(), is using the jQuery function $.getJSON() on the
currently selected layer. Secondly in bboxFromJSON() the turf.bbox() function from turf.js
is creating a bounding box from the JSON. Lastly, the fit() function processes the bounding
box and uses mapXX.fitBounds() to fit the map panes to the chosen layer with a predefined
padding. For this process three different JavaScript libraries are in use.
The outcome of this initial stage of development is shown in Figure 17, which includes all
the aforementioned progress.
32
Figure 17: Resulting development from stage 1, showing 2D and 3D layer visualisation and navigation.
33
Stage 3 – Graphing capability
Following the stage 2 development in section 5.2, it was necessary to incorporate a graphing
ability into the height profile tool function getProfile(). The following sections outline an
iterative development upon the previous stage to integrate the prerequisite variables for use
with Plotly.js.
5.3.1 Plotly.js plot outline and core components
var heightGraph = [{ The plotly.js plot is initialised in the

type: 'bar', last line of snippet 11, and requires a
x: xArray,
y: yArray, div id (chart), plot contents
width: widthArray,
text: heightWord, (heightGraph) and a layout (layout).
marker: {
heightGraph is defined in snippet 11
color: '#5CA8A6',
opacity: 0.6, and requires an x, y and width variable
line: {
color: '#263746', to function.
width: 1
}
}
}];
Plotly.plot(chart, heightGraph, layout);

Code Snippet 11: The main component heightGraph used within
Plotly.plot(), initiated within getProfile(). Appendix C5.
5.3.2 X Variable
The for loop in snippet 12 uses math.js functionality to find the value of X for each bar plot.
This is halfDist, the value of i in widthArray. Plus cumulativeDist, each value in
widthArray that came prior to i. Giving xArray, where each value corresponds to the centre
point of each bar.
xArray.push((widthArray[0]/2));
for (var i = 1; i < widthArray.length; i++) {
cumulativeDist = math.sum(widthArray.slice(0,i));
halfDist = (widthArray[i]/2);
xArray.push(cumulativeDist+halfDist);
}
Code Snippet 12: for loop initiated within getProfile() for creating the x variable. Appendix C5.
5.3.3 Y Variable
yArray was created previously in section 5.2.4 .
34
5.3.4 Width Variable
Created from iterating through the interArray from section 5.2.2 , width is the array of the
distance between each consecutive intersect coordinate pair similarly to the midpoint
method in section 5.2.3 , using turf.distance().
for (var i = 0; i < interArray.length-1; i++) {

pt1 = turf.point(interArray[i]);
pt2 = turf.point(interArray[i+1]);
widthArray.push((turf.distance(pt1, pt2, {unit: 'kilometers'})));
}
Code Snippet 13: for loop initiated within getProfile() for creating the width variable. Appendix C5.
The result of stage 3 of development, is shown in figure 18 with the initialised plotly.plot
in HTML.
Figure 18: A bar plot allowing variable widths depending on per feature intersection widths has be manipulated to present a
representation of building profile alone a user defined line segment, all happening within the getProfile() function.
35
Stage 4 – Tools for further data inspection
The following development stage was used to develop two separate tools, one of which
shows buildings of equal heights giving both the height and the number of buildings in a map
overlay. The value of e in this tool is the feature under the mouse which is controlled from a
mapXX.on() function in equalOn() in snippet 15, allowing 'mousemove' interaction.
The second tool gives ‘on click’ building information within the 3D map pane.
5.4.1 Querying buildings of equal heights

Showing() function (snippet 14), uses Mapbox’s function mapXX.querySourceFeatures()
to examine the SELECTED_LAYER_ID against the value 'relh2' from the mouseover feature.
This provides the variable relatedFeatures used to populate the map overlay.
The value of feature.properties.relh2 is subsequently used at the end of this function to

control a filter on the layer equalBuildings. This layer is initial created in both the 3D and
2D map pane by the equalOn() function.
var feature = e.features[0];
relatedFeatures = map2D.querySourceFeatures(SELECTED_LAYER_ID, {
filter: ['in', 'relh2', feature.properties.relh2]
});
var title = document.createElement('strong');

title.textContent = 'Building Height: ' +
((feature.properties.relh2).toFixed(1)) + 'm';
var height = document.createElement('div');

height.textContent = relatedFeatures.length + ' found';
map2D.setFilter('equalBuildings', ['in', 'relh2',

feature.properties.relh2]);

Code Snippet 14: From showing() function the following code sets the information for the overlay and the equalBuildings
layer. Appendix C6.
The hiding() function operates by removing all components of the similar buildings and
returning the map to its state prior to using the tool. This is controlled within equalOn() by
the mouse leaving the 2D map pane.
36
5.4.2 Switching ‘on & off’ the equal layer
The following code snippet shows both mapXX.on() and mapXX.off() functions where the
first pair of functions are turned on by the equalOn() function after the equalBuildings
layer is created, and the latter pair turned off using equalOff(). This on and off functionality
is controlled by a radio buttons in HTML.
map2D.on('mousemove', SELECTED_LAYER_ID, showing);

map2D.on('mouseleave', SELECTED_LAYER_ID, hiding);
map2D.off('mousemove', SELECTED_LAYER_ID, showing);

map2D.off('mouseleave', SELECTED_LAYER_ID, hiding);
Code Snippet 15: On and off event listeners for the equalOn() and equalOff() functions. Appendix C6.
5.4.3 ‘On Click’ 3D building information

The following functions in snippet 16 are necessary to provide ‘On Click’ information in the
map pane. The last pair of functions are controlled by a radio button on the application
interface, and either set the function to on or off when the mouse is clicking in the 3D pane.
function clicking(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
"Building ID: " + e.features[0].properties.os_topo_toid + "</br> Building
Height: " + (e.features[0].properties.relh2).toFixed(1) + 'm')
.addTo(map3D);
}
function clickingOn () {
map3D.on('click', SELECTED_LAYER_ID, clicking)
}
function clickingoff () {
map3D.off('click', SELECTED_LAYER_ID, clicking)
}
Code Snippet 16: Three functions required to create 'On Click' pop-up information and turn the function on and off.
Appendix C7.
When on, the clicking() function initialises creating a new Mapbox pop-up and setting its
position to the position of click and its contents to the TOID and building height of the feature
at the position of click, the pop-up will only appear if this is found.
37
This concludes the final stage of development by creating two tools useful for further
examining the dataset 3D information within the web map application. The result for this
iteration stage is displayed in figures 19 and 20.
Figure 19: Working example of 'On-Click' 3D building information tool, which presents a pop-up containing TOID and height
for the feature. This function is active only for the 3D pane.
Figure 20: Working example of the 'Buildings of equal height tool', upon mouse over both the 2D and 3D map panes will
highlight buildings of equal height to the feature under the users mouse. The overlay gives a height and a feature count.
38
Results
This section will present the final, version one prototype of the application. The platform
will undergo performance testing locally, and publicly when deployed via Heroku at
https://dissertation-gx.herokuapp.com.
Final development product

The final development product can be seen in figure 21, this screen capture is from the locally
hosted application and is the interface the user would first encounter upon loading. Figure 21
has been annotated to display the features of the application which are necessary for each
tool or working component. Relevant components of the application are explained in table 3.
Application Brief component Figure 12

components description annotation
reference
Navigation The mouse is the core tool for navigating either map pane,
pan by dragging, zoom by scrolling or double click and
control pitch and bearing by holding ctrl and dragging or
rotating respectively.
N/A
The synchronous map tracking, aids to keep navigation
between using the 2D and 3D panes simultaneous. With each
pane centre being the same as the other.
Layer menu The ability to view different layers is enabled within this tool,
it effectively controls which layers are active and also
ensures the viewport of both map panes displays the chosen
A
layer on initial selection.
Fitting layer to viewport The ‘fit’ function from snippet 6 is also isolated outside of the
layer menu to give users the flexibility to reset the viewport B
if they get lost after layer inspection.
Building height profile Integrating Mapbox GL Draw functionality, this profiling tool
extracts a user defined line segment, that when plotted
across buildings, will create a newly selected building layer in
2D and 3D and present the line segments vertical height
C
profile with respect to the building heights in the graphing
pane. See figure 13 for a working example.
Buildings of equal height Using the input of mouseover, this tool takes the feature
under the users cursor and visualises all other buildings
within the 2D and 3D viewport render level. It also presents D
there common height and the overall feature count in a map
overlay. See figure 14 for a working example.
‘On Click’ pop-up information From the click of the users mouse the 3D pane buildings can
be further integrated, presenting a pop-up with both TOID E
and height information. See figure 14 for a working example.
Table 3: Outline of notable V1 application components.
39
Figure 21: Initial in browser view of the application when first loaded by the user. Annotated in relation to table 3.
40
Figure 22: In browser working example of prototype with the buildings profile tool in use.
41
Figure 23: In browser working example of prototype with the buildings of equal height and 'On Click' 3D pane information tools in use.
42
Application performance
Table 4 shows a series of loading time tests upon both the locally hosted and the deployed
application. All performance tests are repeated over 10 consecutive trials for each component
and averaged.
6.2.1 Initial app interface

The interface is the first look the user will get after the loading screen. When functional it
should allow users to navigate the Eaton Bray layer (SP9520) which is visible upon loading.
The viewports will also have a zoomed to show the full extent of this visible layer. The average
time taken to load to this stage was 11952 ms which is 11.952 sec.
6.2.2 Individual layer

Each individual layer option for the web application was also evaluated for loading time. The
layers are first loaded when opening the app but the times that have been tested are layer
selection from the layer menu so an unimpeded singular data load time could be recorded.
For the two smaller layers Eaton Bray (SP9520) and Wavendon (SP9035), the average load
time from selection to full extent viewport display was 1866 ms and 4668 ms respectively.
The larger layer, UCL (TQ2580) took on average 27537 ms or 27.537 sec to load.
Eaton Bray took less than half the time to load in comparison to Wavendon, however the file
size for this layer is 2.6 times larger than that of Eaton Bray. File size is a controlling factor on
load time for the application functionality. This is further demonstrated by the lengthy loading
time for UCL, which has a file size of 66.3 MB.
6.2.3 Building height profile result

When evaluating the time taken to load graph results from the building heights profile tool,
all layers were tested selecting a set of 9 buildings. Eaton Bray layer yielded results in under
a second at an average of 308 ms, while the UCL layer returned results by 4292 ms on average.
Wavendon layer plotted heights to the graph in 401ms. Eaton Bray layer is nearly 13.9 times
faster than UCL layer, which is comparable to the feature difference of 13.4 times more for
UCL.
43
Component tested Loading times (ms) Average time (ms)
Initial interface 13569 12726 11999 11312 10622 10353 12987 12374 12753 10820 11952
Eaton Bray layer 2620 2353 1980 1950 1250 1310 1450 1890 1730 2130 1866
Wavendon layer 3640 8870 4740 5990 3740 2640 3830 3800 4930 4500 4668
UCL layer 27740 26600 25410 33220 30360 24630 27250 23850 29980 26330 27537
Building profile heights:

383 389 287 318 285 307 286 294 266 264 308
Eaton Bray layer

396 485 326 452 397 408 384 380 407 376 401
Wavendon layer

4420 4226 4637 4740 4297 3926 3999 3971 4119 4581 4292
UCL layer
Table 4: Performance testing for loading components, test carried out in Chrome version 68.0.3440.106 at an average download speed of 11.60 Mbps and upload speed of 78.15 Mbps sampled
from 10 consecutive tests at The M-Lab NDT Data Set (2018).
44
Individual user feedback
The user feedback was carried out remotely through deployment of the web application on
Heroku with an accompanying google form. The form differentiated 21 users by browser
preference and whether they considered themselves a professional or student within the GIS
community. The composition of the group was 57.1% students and 42.9% professionals, with
81% Chrome users, 9.5% Safari and 9.5% Firefox.
6.3.1 Navigation
The majority of users were able to navigate the map, with the percentage of successful use
shown in table 5. 95.2% of users tended to prefer the 2D and 3D panes to track together as
Navigation type Success rate (%) described in section 5.1.3, with 57.1% of users using
Zoom 95.2 the 3D pane to navigate with. This last percentage
Pan 100
may be due to the 3D pane being double the size of
Pitch 85.7
the 2D.
Table 5: Navigation user feedback
6.3.2 Tool functionality

The core feedback was for users to express how easy they felt the tool was to find and use,
overall 57% to 81% of users found every interactive tool of the application easy to find and
use, rating it a score of 4 or 5. Where a score of 1 is very difficult to user and 5 is very easy. A
detailed analysis of each question by legend colour, can be seen in Figure 24.
Figure 24: Chart representing user percentage against ease of use questions, the legend represents user rating.
Figure 24 presents that while user found drawing the profile line easiest, they also found it
hardest to understand how to find the tool for both ‘On Click’ information and building height
profile. With 43% of users rating these tools a score of 3 or lower.
45
However 57% of users did go on to make use of the pop up guidance for the latter building
height profile tool, which could contribute to the ease of use for profile line drawing and also
how 76% of users understood the tools result. The clarity of the profile chart was successful
with 57% of users scoring the tool 4 to 5, however the inbuilt plot.ly library tools themselves
received mixed scores.
6.3.3 Performance
Upon initial loading users were asked to choose a layer, those who chose UCL (TQ2580) found
on most feedback results that their layer did not load, this is a known limitation of the
deployment platform and is treated as a bug in section 7.5.2. After this initial instruction,
users were directed to use either Eaton Bray or Wavendon layer.
The performance was tested for four scenarios, asking the users both loading times and speed
of use, the results are displayed in figure 25.
Figure 25: Chart representing user percentage against performance questions, the legend represents speed.
The chart is able to illustrate that 79% of users found overall the application was moderately
fast to fast, with in map navigation and tool results performing the best. Initial loading speed
performed the worst with a third of users rating speed at average or lower.
46
6.3.4 Useful comments
When users were asked to comment on areas of improvement, the following useful areas of
development were highlighted.
6.3.5 ‘On Click’ 3D building information

Generally commentary suggested tool functionality was good but the execution needed more
development.
“Change the cursor tip from a pan hand to a mouse pointer or similar to indicate how you can use it.”
Student, Chrome
“I think that this tool does not have to be turned off or on. It should always be on.”
Student, Chrome
“Info on hover for 0.5s, rather than click.”

Professional, Chrome
6.3.6 Buildings of equal heights

The following comments suggest that the presentation of equal buildings was confusing, with
the viewport not actually being equal to the users map zoom level and the unexpected
reliance on the 3D pane for navigation.
“Perhaps have the maps pan so all the similar height buildings can be seen in the view.”
Student, Chrome
“This hovering tool should work on either 3D or 2D map.”

Student, Chrome
6.3.7 Building height profile

Overall, users found this tool understandable but needed more connection to the data and
the map prior to use and after use.
“Link bar chart mouse over to on-map popups to help the user see which buildings are which.”
Student, Chrome
“Specific instructions on the building height tool in the area before a chart is generated.”
Student, Chrome
47
Discussion
Developing upon functionality of previous web GIS
Table 6 outlines toolset functionality of the application in comparison to Parish Online and
modern examples of web GIS for planning described in section 2.2.1
Prototype
Functionality Parish Online Leicester Canterbury
Application
Pan    
Navigation
Zoom    
Pitch    
Rotate    
2D    
3D    
Data Handling
Data upload    
Data create and edit    
Layer selection    
Map printing    
Location search    
‘On-Click’ info    
Toolsets
Equal height selection    

Height profile    
Measuring tools    
Included functionality =  Excluded functionality = 

Table 6: Checklist of web GIS functionality for examples mentioned within the report in comparison to the developed
application.
First and foremost the aim for a web GIS must be to empower people to source, visualise and
inspect through analysis the spatial components of data (Haklay et al, 2011). The applications
navigation tools are advanced in comparison to the other example in table 6, with the added
ability to pitch and rotate however these functions are intrinsic to navigating 3D data.
Therefore the additional data handling functionality of 3D information is what sets the
application apart from other ‘web GIS for planning’ platforms.
48
Each platform has a variety of data handling capabilities, however the need for data upload,
creation and export, in this case printing, is considered an important metric of evaluation in
literature (Kong et al., 2014). Development of these functions was not possible within the
time frame for this application, while some of the other applications are able to edit and
export data, the ability for data upload was lacking in all examples.
Every comparison example provided a form of location search for the user and some included
measurement tools, while this is not included in the test application both are possible through
Mapbox GL JS functionality and Turf.js. The two tools building height profile and equal height
highlighting are unique in the comparison. These are made possible due to custom
development implementing parts of Mapbox GL JS (Mapbox, 2018e) and Turf.js (Mapbox,
2018f) functionality.
Application performance
It was as early as 1997 when the top complaint from internet users was page loading speeds
(Rauniar et al, 2009), literature has suggested that often a pages quality is determined by this
very factor (Cheung & Lee, 2005; Hernández et al, 2009) and even more recently it is still
important in website success (Meenan, 2013). With the unwavering importance of this metric
such performance examination in section 6.2 was essential when assessing the application.
Neil Patel, founder of Kissmetric a platform for assessing website performance, recently
stated that “47% of consumers expect a web page to load in 2 seconds or less” (Patel, 2011)
with this in mind the results for initial loading of the application must be improved. While
users rated such loading speeds as fast and moderately fast overall, this rating may well have
been different if this was surveyed as a professional application.
Furthermore, reaction times are important, with human response perception being within 0.1
seconds, this is the bench mark for function reaction to reassure users the website is working
(Henty, 2015). While this is not achieved in the tool results in table 4, some users stated they
needed more reassurance during layer menu selection loading. However due to the client
side nature of the application rendering, response times are more optimised than that of
server based functions (Grigoryan, 2017). Performance can be and must be improved to
create a widely accepted pubic tool, techniques for improvement are discussed in section 7.6.
49
Use within UK planning
The examples in table 6 are all live web mapping application which are in use within local
government, Parish Online has the most wide spread use with over 2000 users. These
examples are currently aiding the planning process through 2D data visualisation, basic
analysis and, in the case of Leicester and Canterbury, a level of public access for participation.
Therefore by presenting data in 3D to aid the planning process through the convenient
medium of web GIS, the developed application should augment the capabilities of the current
planners toolset. Better informing the public through a visualisation which is closer to reality.
The analysis of building heights for the planning process is especially important with regards
to the impact of tall buildings, as discussed in the CABE and English Heritage guidance
document. This guidance describes the benefits and pitfalls of tall buildings. Ideally tall
buildings demarcate important places by both their increased size and mass however they
can lead to negative impacts such as overlooking and over shadowing other structures. They
may also negatively effecting living condition, skyline, historic areas and conservation areas if
poorly designed. (CABE & English Heritage, 2007)
As a result it is ever necessary to provide planners and the public with tools for building height
inspection such as the profiling tool and the equal heights highlighter from the developed
application. A professional user during the feedback testing, summarised the application as
“Useful for planners to be able to visualise and interrogate building heights and the relative
heights of buildings around them.” The development from this project could directly benefit
building height analysis during the planning process, with many local councils already looking
for answers to height related problems (Newham London, 2017; Urban Initiatives, 2010).
Reviewing the research question

Can off-the-shelf web mapping tools be extended to enable the use of 3D within the
planning process?
It was the core functionality of Mapbox GL JS that enabled the presentation of the 3D dataset
through the layer styling option ‘fill-extrusion’, this visualisation technique was
effective at displaying buildings through their appropriate height attribute. Currently the level
of 3D visualisation is limited to LOD 1.2 city models, however the base mapping library is ever
developing and further 3D detail support may be available in the future (GitHub, 2018a).
50
Furthermore the reliance on this package alone for the creation of a 3D data driven toolset
was not possible, extension of current capabilities was necessary. The flexibility of JavaScript
(Chugh et al, 2009; Richards et al, 2010) allowed the addition of Turf.js to the map stack, with
this recommended GIS library (Mapbox, 2018c), custom toolset development was enabled.
This extension of Mapbox has enabled the analysis of 3D data, evidence is clear in section 6.1
with tools such as the building height profiler.
Critical reflection
The feedback was useful for further development and favourable for the applications role
within planning. All users agreed that the tool would aid the planning process. Often
commentary touched upon the use for measuring current development and visualising line
of sight through height profiling. It was also suggested that the tool was beneficial for “non-
experts to visualise preloaded data”.
However the majority agreed further development must include faster loading speeds for
data and the ability to add custom user data such as proposed or planned development.
7.5.1 GeoXphere viability

The applications viability relies on both its appropriateness for the XMAP platform and its
performance metrics. The specialist data GeoXphere collect includes 3D mesh models from
aerial and ground survey which can represent photo-true or wavelength attributed, the
current version 0.48.0 of Mapbox GL JS does not support such data formats however these
are in the pipeline for future development according to ‘Support 3D terrain meshes’ issue
#1489 (GitHub, 2018b) and ‘implement custom style layers’ request #7039 (GitHub, 2018c).
However while Mapbox GL JS is not able to be a base mapping library to serve all of the
industry partners data requirements, it is able to effectively visualise 3D building height data
and with the aid libraries such as Turf.js, this application has developed custom tools such as
the building height profiler. Such an application would be viable for working with datasets
such as those described in section 4.2
51
7.5.2 Bugs founds
The following bugs were found when critically assessing the prototype, they are shown in
the following figure 26, 27 and 28. An explanation is provided in the captions.
Figure 26: Inconsistent layer loading between the 2D and 3D panes, only present for the UCL layer when
deployed.
Figure 27: Building height profile multi line profiling. Traces will be added for each button press but each
trace is a culmination of every line drawn before not each profile line. The feature selection is also
inconsistent.
Figure 28: Building height polyline profiling, when trying to profile it is possible to use the line tool to
draw polylines rather than single segments, feature selection from this is inconsistent.
52
Further Development
Upon reflection and user feedback results, there are area of further development for the
application both to aid usability and performance. Suggestions of specific development areas
outlined below.
7.6.1 Data
Mapbox’s vector tile data type enable faster map performance while allowing for the full
flexibility of the original data source. Tiling has be specifically developed for use in web
mapping. (Mapbox, 2018g) Use of vector tiles for this application would be possible using
Mapbox GL JS uploads API (Mapbox, 2018h). Such a development could mitigate problems
with larger data sets such as UCL (TQ2580) as highlighted in section 6.3.3 .
Further development could be focused towards allowing users to upload their own data
similarly to Kepler.gl in figure 29, where multiple data types can be process and loaded
directly as a layer in the map panes. The merits of this are outlined by Kong et al (2014).
Figure 29: Kepler.gl user data upload interface. (Kepler.gl, 2018)
7.6.2 Interface
The application interface could be further developed to improve both user guidance and
experience. Further guidance could be provided in the chart place holder which is present
upon initial load, such information may provide better context and initial direction to improve
user knowledge. This has been user suggested within section 6.3.7 .
53
Concluding Remarks
The research project has addressed the current state of 3D GIS in UK planning, both examining
the platform type and reason for usage. Findings highlighted the importance of web GIS for
enabling both planners during project development and the public in subsequent planning
project engagement. Through the use of the Mapbox GL JS library, successfully visualisation
of 3D LOD 1.2 data was achieved. The investigative study expanded upon basic functionality
using primarily Turf.js to develop a spatial analysis toolset for both 2D and 3D data. The focus
on manipulating building height data from the ordinance survey, resulted in a unique building
height profile tool which can better inform users upon planning proposal impact. User
feedback while modest was positive, 100% of users agreed the application would aid the
planning process. Web GIS has the most potential to equip and engage professionals and the
public with 3D data, allowing them to make better informed contributions to the planning
process. Furthermore, due to the nature of opensource development, the future of 3D web
GIS is boundless.
54
Appendices
Appendix A – Flowchart diagram of the application process. (Barrett, 2018)
55
Appendix B – Example of GeoJSON format for SP9035 (Wavendon)
{
"name" : "buildings_SP9035",
"type" : "FeatureCollection",
"features" : [
{
"type" : "Feature",
"geometry" : {
"type" : "Polygon",
"coordinates" : [
[
[ -0.6517608548742424, 52.01681052651805 ],
[ -0.6518550604988363, 52.01686168685198 ],
[ -0.6519034396492944, 52.01682780333546 ],
[ -0.6518658717606279, 52.01680741246731 ],
[ -0.6518092340393539, 52.01677664303577 ],
[ -0.6517608548742424, 52.01681052651805 ]
]
]
},
"properties" : {
"OBJECTID" : 1,
"os_topo_toid" : "osgb1000002311788712",
"os_topo_version" : 5,
"bha_processdate" : "20170930000000",
"tileref" : "SP9035",
"abshmin" : 85.69999694824219,
"absh2" : 95.0999984741211,
"abshmax" : 96.5,
"relh2" : 9.399999618530273,
"relhmax" : 10.800000190734863,
"bha_conf" : 99
}
}, 10103 more features ]
}
56
Appendix C1 – Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset='utf-8' />
<title>Display buildings in 3D</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-
scalable=no' />
<link rel="stylesheet" href="css/mdl/material.min.css">
<script src="css/mdl/material.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://cdnjs.cloudflare.com/ajax/libs/please-
wait/0.0.5/please-wait.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/please-wait/0.0.5/please-
wait.css" />
<script
src="https://cdn.jsdelivr.net/npm/sweetalert2@7.26.11/dist/sweetalert2.a
ll.min.js"></script>
<script
src='https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js'></script
>
<script src='https://api.tiles.mapbox.com/mapbox-gl-
js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-
js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-
draw/v1.0.4/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='css/draw.css' type='text/css' />
<script
src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
/script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.4/math.min.js"></
script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='menu'>
<legend>Layers:</legend>
<input id='EatonBray' type='radio' name='rtoggle'
checked='EatonBray' >
<label for='EatonBray'>Eaton Bray</label>
<input id='Wavendon' type='radio' name='rtoggle' value='Wavendon' >
<label for='Wavendon'>Wavendon</label>
<input id='UCL' type='radio' name='rtoggle' value='UCL' >
<label for='UCL'>UCL</label>
</div>
57
<div id='map3D'></div>
<div id="map2D"></div>
<div id='map-overlay' class='map-overlay'></div>
<div id="chartHolder">
<div id="holderText">Building height profile chart will load
here.</div>
</div>
<div id="chart" class='chart'></div>
<div id='fitBounds' onclick='fit()'>Fit</div>
<div id='buildingProfile' onclick='getProfile()'>Height Profile</div>
<div id='equal'>
<legend>Equal Buildings:</legend>
<input id='on' type='radio' name='rtoggler' onclick='equalOn()'>
<label for='on'>on</label>
<input id='off' type='radio' name='rtoggler' checked='off'
onclick='equalOff()'>
<label for='off'>off</label>
</div>
<div id='click'>
<legend>Click 3D Info:</legend>
<input id='on2' type='radio' name='rtoggler2'
onclick='clickingOn()'>
<label for='on2'>on</label>
<input id='off2' type='radio' name='rtoggler2' checked='off2'
onclick='clickingOff()'>
<label for='off2'>off</label>
</div>
<script src="js/mapStart.js"></script>
<script src="js/loadingScreen.js"></script>
<script src="js/buildingProfile.js"></script>
<script src="js/equalBuildings.js"></script>
<script src="js/clickInfo.js"></script>
<script src="js/layerMenu.js"></script>
</body>
</html>
58
Appendix C2 – Style.css
/*body { margin:0; padding:0; }*/
body > .inner {

display: none;
}
body.pg-loaded > .inner {

display: block;
}
.spinner {
margin: 25px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {

background-color: #263746;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;

animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
}
.spinner .rect4 {
}
.spinner .rect5 {
}
59
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
:root {
--GXBlue: #263746;
--GXTeal: #94CCC6;
--GXGrey: #D8D1CA;
}
#map3D { position:absolute; top:0; bottom:0; right:0; width:50%;

height:100%}
#map2D { position:absolute; top:0; bottom:0; left:0; width:49.5%;
height:50% }
#chart {
position:absolute;
font-family: Helvetica, Arial, Sans-Serif;
bottom:0;
left:0;
height: 50%;
width: 50%;
}
#chartHolder {
background-color: var(--GXTeal);
position:absolute;
border: 1px dashed var(--GXBlue);
bottom:0;
left:0;
margin: 10px;
height: 46.5%;
width: 48.5%;
}
#holderText {
colour: var(--GXBlue);
text-align: center;
height: 250px;
line-height: 250px;
}
60
.map-overlay {
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 16px/12px;
color: var(--GXblue);
background-color: var(--GXGrey);
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
border-radius: 3px;
position: absolute;
width: 15%;
top: 10px;
left: 200px;
padding: 10px;
display: none;
}
#menu {
background-color: var(--GXBlue);
position: absolute;
z-index: 1;
top: 1em;
right: 1em;
border-radius: 0.2em;
padding: 0.7em;
width: 100px;
color: var(--GXGrey);
cursor: pointer;
}
#click {
position: absolute;
z-index: 1;
top: 9.5em;
right: 1em;
padding: 0.7em;
width: 100px;
cursor: pointer;
}
#fitBounds {
position: absolute;
61
top: 1em;
left: 1em;
padding: 0.7em;
cursor: pointer;
}
#buildingProfile {
position: absolute;
top: 5em;
left: 1em;
padding: 0.7em;
cursor: pointer;
}
#equal {
position: absolute;
top: 9em;
left: 1em;
padding: 0.7em;
width:115px;
height: 40px;
cursor: pointer;
}
62
Appendix C3 – mapStart.js
center: [-0.5850058794021606, 51.87403356997926],
zoom: 16,
pitch: 70,
bearing: 0,
container: 'map3D'
});

center: [-0.5850058794021606, 51.87403356997926],
zoom: 16,
pitch: 0,
bearing: 0,
container: 'map2D'
});
var SELECTED_LAYER_BBOX;
var SELECTED_LAYER_JSON;
var SELECTED_LAYER_ID;
var layerList = document.getElementById('menu');

var inputs = layerList.getElementsByTagName('input');
var baseURL = 'http://localhost:' + 8000 + '/';
var data = 'data';
var EatonBray = 'data/EatonBray.json';
var UCL = 'data/UCL.json';
var Wavendon = 'data/Wavendon.json';
var point;
var layerId;
var coordsList = [];
var selectedBuildings;
var holder = document.getElementById("chartHolder");
var hasLoaded = false;
// Draw Tools
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true
}
});
map3D.addControl(new mapboxgl.ScaleControl({
maxWidth: 100,
unit: 'metric'
}));
map2D.addControl(draw, 'top-right');
63
// Tracking
//http://bl.ocks.org/boeric/f6ddea14600dc5093506
var disable = false;
if (!disable) {
disable = true;
disable = false;
}
});
if (!disable) {
disable = true;
disable = false;
}
});
map3D.on('load', function () {
hasLoaded = true;
map3D.addSource('EatonBray', {
type: 'geojson',
data: EatonBray
});
map3D.addSource('Wavendon', {
type: 'geojson',
data: Wavendon
});
map3D.addSource('UCL', {
type: 'geojson',
data: UCL
});
64
//Adding layers
map3D.addLayer({
id: 'EatonBray',
source: 'EatonBray',
type: 'fill-extrusion',
layout: {'visibility': 'none'},
paint: {
'fill-extrusion-color': '#008080',
'fill-extrusion-height': {
'type': 'identity',
'property': 'relh2'
},
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 0.6
}
});
map3D.addLayer({
id: 'Wavendon',
source: 'Wavendon',
paint: {
'type': 'identity',
'property': 'relh2'
},
}
});
map3D.addLayer({
id: 'UCL',
source: 'UCL',
paint: {
'type': 'identity',
'property': 'relh2'
},
}
});
});
65
map2D.on('load', function () {
map2D.addSource('EatonBray', {
type: 'geojson',
data: EatonBray
});
map2D.addSource('Wavendon', {
type: 'geojson',
data: Wavendon
});
map2D.addSource('UCL', {
type: 'geojson',
data: UCL
});
map2D.addLayer({
id: 'EatonBray',
source: 'EatonBray',
type: 'fill',
paint: {
'fill-color': '#008080',
'fill-opacity': 0.6
}
});
map2D.addLayer({
id: 'Wavendon',
source: 'Wavendon',
type: 'fill',
paint: {
'fill-color': '#008080',
'fill-opacity': 0.6
}
});
map2D.addLayer({
id: 'UCL',
source: 'UCL',
type: 'fill',
paint: {
'fill-color': '#008080',
'fill-opacity': 0.6
}
});
switchLayer('EatonBray');
});
66
Appendix C4 – layerMenu.js
function getLayerGeoJSON(layer) {
console.log(" -- getLayerGeoJSON --");
$.getJSON((window[layer]), function (data) {
resolve(data)
});
});
}
function bboxFromJSON(json) {
resolve(turf.bbox(json));
});
}
function fit(bbox) {
let bboxToUse = bbox || SELECTED_LAYER_BBOX;
}
function switchLayer(layer) {
console.log("--Map Loading--");
console.log(hasLoaded);
console.dir(layer);
SELECTED_LAYER_ID = layer;
if (layer == 'UCL' && hasLoaded) {
swal({
title: '<strong>Large layer Loading</strong>',
type: 'info',
showCloseButton: true,
});
}
if (layer == 'Wavendon' && hasLoaded) {
map3D.setLayoutProperty('Wavendon', 'visibility', 'visible');
map3D.setLayoutProperty('UCL', 'visibility', 'none');
map2D.setLayoutProperty('Wavendon', 'visibility', 'visible');
}
67
if (layer == 'EatonBray' && hasLoaded) {
map3D.setLayoutProperty('EatonBray', 'visibility', 'visible');
map2D.setLayoutProperty('EatonBray', 'visibility', 'visible');
}
getLayerGeoJSON(layer).then((json) => {
console.dir(json);
SELECTED_LAYER_JSON = json;
console.log("SELECTED LAYER COORDS CHANGED");
bboxFromJSON(json).then((bbox) => {
SELECTED_LAYER_BBOX = bbox;
fit(bbox)
});
});
loading_screen.finish();
}
for (var i = 0; i < inputs.length; i++) {

inputs[i].onclick = (e) => {
switchLayer(e.target.id)
};
}
68
Appendix C5 – buildingProfile.js
function getProfile() {
var interArray = [];
var widthArray = [];
var xArray = [];
var midpointArray = [];
var midpointArrayPoints = [];
var buildingPoints = [];
var buildingFeatures = [];
var selectedPoints;
var uniqueBuildings;
var yArray = [];
var selectedBuildings;
var heightGraph;
for (var i = 0; i < map2D.getStyle().layers.length; i++) {

if ( map2D.getStyle().layers[i].id == 'HighlightedBuildings' ) {
map2D.removeLayer('HighlightedBuildings');
map2D.removeSource('HighlightedBuildings');
break
}
}
console.log(" --Error Check-- ")
if (draw.getAll().features.length == 0) {
swal({
title: '<strong>Building Height Profile</strong>',
type: 'info',
html:
'You must first draw a segment through buildings to get a
height profile',
showCloseButton: true,
});
return;
}
var drawnLine = draw.getAll();

var layerFeatures =
turf.featureCollection(SELECTED_LAYER_JSON.features);
intersectingFeatures = turf.lineIntersect(drawnLine, layerFeatures);
console.log(" --Making Intersect Array-- ")

for (var i = 0; i < intersectingFeatures.features.length; i++) {
interArray.push(intersectingFeatures.features[i].geometry.coordi
nates)
}
interArray = interArray.sort();
69
console.log("--Making point distance array--");
for (var i = 0; i < interArray.length-1; i++) {
pt1 = turf.point(interArray[i]);
pt2 = turf.point(interArray[i+1]);
widthArray.push((turf.distance(pt1, pt2, {unit:
'kilometers'})));
}
console.dir(widthArray);
console.log("--Making cumulative point distance array--");

xArray.push((widthArray[0]/2));
for (var i = 1; i < widthArray.length; i++) {
cumulativeDist = math.sum(widthArray.slice(0,i));
halfDist = (widthArray[i]/2);
xArray.push(cumulativeDist+halfDist);
}
console.dir(xArray);
console.log("--Making midpoint array--")

for (var i = 0; i < (interArray.length-1); i++) {
avgCoords = [];
avgCoord0 = ((interArray[i][0]+interArray[i+1][0])/2);
avgCoord1= ((interArray[i][1]+interArray[i+1][1])/2);
avgCoords.push(avgCoord0, avgCoord1)
midpointArray.push(avgCoords)
}
console.log("--Making midpoint points--")

midpointArray.forEach(item => {
point = turf.point(item);
midpointArrayPoints.push(point);
});
for (var i = 0; i < midpointArrayPoints.length; i++) {

height = 0;
for (var j = 0; j < SELECTED_LAYER_JSON.features.length ; j++) {
var status = turf.booleanPointInPolygon(
midpointArrayPoints[i],
SELECTED_LAYER_JSON.features[j]
);
if (status == true) {
buildingFeatures.push(SELECTED_LAYER_JSON.features[j]);
height =
SELECTED_LAYER_JSON.features[j].properties.relh2;
}
}
yArray.push(height);
}
70
uniqueBuildings = _.uniq(buildingFeatures);
selectedBuildings = turf.featureCollection(uniqueBuildings);
heightWord = [];
for (var i = 0; i < yArray.length ; i++) {

heightWord.push('Height (m)')
}
chart = document.getElementById('chart');
var heightGraph = {
type: 'bar',
x: xArray,
y: yArray,
width: widthArray,
text: heightWord,
marker: {
color: '#5CA8A6',
opacity: 0.6,
line: {
color: '#263746',
width: 1
}
}
};
var data = [heightGraph];
var layout = {
title: 'Building Heights',
xaxis: {title: 'Segment Distance'},
yaxis:{title:'Height (relh2)'},
bargap:0
};
Plotly.plot(chart, data, layout);
holder.style.display = "none";
console.log("--Highlighting Buildings--")
map2D.addSource('HighlightedBuildings', {
type: 'geojson',
data: selectedBuildings
});
71
map2D.addLayer({
id: 'HighlightedBuildings',
source: 'HighlightedBuildings',
type: 'fill',
paint: {
'fill-color': '#263746',
'fill-opacity': 0.6
},
});
map3D.addSource('HighlightedBuildings', {
type: 'geojson',
data: selectedBuildings
});
map3D.addLayer({
id: 'HighlightedBuildings',
source: 'HighlightedBuildings',
paint: {
'type': 'identity',
'property': 'relh2'
},
}
});
function removeProfile() {
draw.deleteAll(draw.getAll());
if (map2D.getStyle().layers[i].id == 'HighlightedBuildings') {
break
}
}
holder.style.display = "block";
Plotly.purge(chart);
}
72
Appendix C6 – equalBuildings.js
var overlay = document.getElementById('map-overlay');
var relatedFeatures;
function showing(e) {
map2D.getCanvas().style.cursor = 'pointer';
var feature = e.features[0];
relatedFeatures = map2D.querySourceFeatures(SELECTED_LAYER_ID, {
filter: ['in', 'relh2', feature.properties.relh2]
});
overlay.innerHTML = '';
var title = document.createElement('strong');

title.textContent = 'Building Height: ' +
((feature.properties.relh2).toFixed(1)) + 'm';
var height = document.createElement('div');

height.textContent = relatedFeatures.length + ' found';
overlay.appendChild(title);
overlay.appendChild(height);
overlay.style.display = 'block';

function hiding() {
map2D.getCanvas().style.cursor = '';
map2D.setFilter('equalBuildings', ['in', 'relh2', '']);
map3D.setFilter('equalBuildings', ['in', 'relh2', '']);
overlay.style.display = 'none';
}
73
function equalOn() {

if ( map2D.getStyle().layers[i].id == 'equalBuildings' ) {
map2D.removeLayer('equalBuildings');
map3D.removeLayer('equalBuildings');
break
}
}
map2D.addLayer({
id: 'equalBuildings',
source: SELECTED_LAYER_ID,
type: 'fill',
paint: {
'fill-color': '#000000',
'fill-opacity': 0.6
},
filter: ['in', 'relh2', '']
});
map3D.addLayer({
id: 'equalBuildings',
source: SELECTED_LAYER_ID,
paint: {
'type': 'identity',
'property': 'relh2'
},
},
filter: ['in', 'relh2', '']
});
map2D.on('mousemove', SELECTED_LAYER_ID, showing);
map2D.on('mouseleave', SELECTED_LAYER_ID, hiding);

}
function equalOff() {
map2D.off('mousemove', SELECTED_LAYER_ID, showing);
map2D.off('mouseleave', SELECTED_LAYER_ID, hiding);

}
74
Appendix C7 – clickInfo.js
function clicking(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML("Building ID: " + e.features[0].properties.os_topo_toid
+ "</br> Building Height: " +
(e.features[0].properties.relh2).toFixed(1) + 'm')
.addTo(map3D);
}
function clickingOn () {
map3D.on('click', SELECTED_LAYER_ID, clicking)
}
function clickingOff () {
map3D.off('click', SELECTED_LAYER_ID, clicking)
}
75
References
Abdul-Rahman, A., & Pilouk, M. (2008). Spatial data modelling for 3D GIS. Berlin ; New York:
Springer.
Akagi, M. (2018). Qgis2threejs plugin Documentation, Release 1.4. Retrieved from
https://media.readthedocs.org/pdf/qgis2threejs/latest/qgis2threejs.pdf
Baker, M., Coaffee, J., & Sherriff, G. (2007). Achieving successful participation in the new UK
spatial planning system. Planning Practice & Research, 22(1), 79–93.
https://doi.org/10.1080/02697450601173371
Baptista, C & de Paiva, A. (2009) Web-based GIS. Environmental Informatics. p. 4053-4057.
Barrett, C. (2018). The decision-making process. Retrieved 20 August 2018, from
https://www.planningportal.co.uk/info/200126/applications/58/the_decision-
making_process
Biljecki, F., Ledoux, H., & Stoter, J. (2016). An improved LOD specification for 3D building
models. Computers, Environment and Urban Systems, 59, 25–37.
https://doi.org/10.1016/j.compenvurbsys.2016.04.005
Brown, G. (2012). Public Participation GIS (PPGIS) for Regional and Environmental Planning:
Reﬂections on a Decade of Empirical Research, 12.
Brown, G., & Kyttä, M. (2014). Key issues and research priorities for public participation GIS
(PPGIS): A synthesis based on empirical research. Applied Geography, 46, 122–136.
https://doi.org/10.1016/j.apgeog.2013.11.004
Brown, G., & Raymond, C. M. (2014). Methods for identifying land use conflict potential
using participatory mapping. Landscape and Urban Planning, 122, 196–208.
https://doi.org/10.1016/j.landurbplan.2013.11.007
Budorick, L. (2016). Add fill-extrude-height and fill-extrude-base properties. by lbud · Pull
Request #3223. Retrieved 5 September 2018, from
https://github.com/mapbox/mapbox-gl-js/pull/3223
built with. (2018). jQuery Usage Statistics. Retrieved 28 August 2018, from
https://trends.builtwith.com/javascript/jQuery
Butler, H., Daly, M., Doyle, A., Gillies, S., Hagen, S., & Schaub, T. (2016). The GeoJSON
Format. Retrieved from https://www.rfc-editor.org/info/rfc7946
CABE, & English Heritage. (2007). Guidance on tall buildings: July 2007, 8.
Canterbury City Council. (2018). Planning Constraints Map. Retrieved 19 August 2018, from
https://mapping.canterbury.gov.uk/webapps/Planning_information/
CARTO. (2018). Attribution — CARTO. Retrieved 11 September 2018, from
https://carto.com/attribution/
76
Cheung, C. M. K., & Lee, M. K. O. (2005). The Asymmetric Effect of Website Attribute
Performance on Satisfaction: An Empirical Study. In Proceedings of the 38th Annual
Hawaii International Conference on System Sciences (pp. 175c-175c). Big Island, HI,
USA: IEEE. https://doi.org/10.1109/HICSS.2005.585
Chrisman, N. R. (2006). Charting the unknown : how computer mapping at Harvard became
GIS (1st ed). Redlands, Calif. : ESRI Press : Independent Publishers Group (IPG)
[distributor]. Retrieved from https://trove.nla.gov.au/version/44911306
Chugh, R., Meister, J. A., Jhala, R., & Lerner, S. (2009). Staged Information Flow for
JavaScript. ACM Sigplan Notices, 44(6), 50–62.
Craig, W., Harris, T., & Weiner, D. (2002). Community participation and geographic
information systems. In Community Participation and Geographical Information
Systems. CRC Press. https://doi.org/10.1201/9780203469484.pt1
Dai, F., & Lee, C. (2002). Landslide characteristics and slope instability modeling using GIS,
Lantau Island, Hong Kong. Geomorphology, 42(3-4), 213-228. doi: 10.1016/s0169-
555x(01)00087-3
Dangermond, J. (2014). Creating Our Future [Blog]. Retrieved from
http://www.esri.com/esri-news/arcnews/fall14articles/creating-our-future
Davis, M., Haklay, M. (2004). 3D GIS: Adding Value to the Environmental Impact Assessment.
GEO:connexionUK
Delgado, A. (2016). Top 5 companies using NodeJS in production. Retrieved 28 August 2018,
from https://www.linkedin.com/pulse/top-5-companies-using-nodejs-production-
anthony-delgado/
Department for Communities and Local Government. (2011). A plain English guide to the
Localism Act.
Details of Planning Application - CB/18/02523/FULL. (2018). Retrieved from
http://www.centralbedfordshire.gov.uk/PLANTECH/DCWebPages/acolnetcgi.gov?ACTI
ON=UNWRAP&RIPNAME=Root.PgeResultDetail&TheSystemkey=610012
Drummond, W. J., & FAICP, S. P. F. (2008). The Future of GIS in Planning: Converging
Technologies and Diverging Interests. Journal of the American Planning Association,
74(2), 161–174. https://doi.org/10.1080/01944360801982146
Ellul, C., Wong, K. (2015). Advances in 3D GIS. In: Kemp, A (ed.) AGI Foresight Report
Elwannas, R. (2011). 3D GIS: It's a Brave new World. FIG Working Week, Marrakech, 9p.
Ericsson, B. (2016). Mapbox GL Synced Dual Maps. Retrieved 29 August 2018, from
http://bl.ocks.org/boeric/f6ddea14600dc5093506
ESRI. (2018a). What is the ArcGIS 3D Analyst extension? Retrieved 7 September 2018, from
http://desktop.arcgis.com/en/arcmap/latest/extensions/3d-analyst/what-is-the-3d-
analyst-extension-.htm#GUID-76D00A32-03EB-4B2F-8DA2-66807E89BDE5
77
ESRI. (2018b). What is a geodatabase? Retrieved 27 August 2018, from
http://desktop.arcgis.com/en/arcmap/10.3/manage-data/geodatabases/what-is-a-
geodatabase.htm
Evans-Cowley, J., & Hollander, J. (2010). The New Generation of Public Participation:
Internet-based Participation Tools. Planning Practice & Research, 25(3), 397–408.
https://doi.org/10.1080/02697459.2010.503432
Fu, P., & Sun, J. (2010). Web GIS: principles and applications. Esri Press.
Future Cities Catapult. (2016). Future of planning: state of the art innovations in digital
planning. Retrieved from https://futurecities.catapult.org.uk/wp-
content/uploads/2016/12/FCC-FoP-State-of-the-art-innovations-December-2016.pdf
Geertman, S., & Stillwell, J. (Eds.). (2003). Planning Support Systems in Practice. Berlin
Heidelberg: Springer-Verlag. Retrieved from
//www.springer.com/gb/book/9783540437192
GitHub. (2018a). Add support for rendering 3d models · Issue #3996 · mapbox/mapbox-gl-js.
Retrieved 10 September 2018, from https://github.com/mapbox/mapbox-gl-
js/issues/3996
GitHub. (2018b). Support 3D terrain meshes · Issue #1489 · mapbox/mapbox-gl-js. Retrieved
7 September 2018, from https://github.com/mapbox/mapbox-gl-js/issues/1489
GitHub. (2018c). implement custom style layers by ansis · Pull Request #7039 ·
mapbox/mapbox-gl-js. Retrieved 7 September 2018, from
https://github.com/mapbox/mapbox-gl-js/pull/7039
GOV.UK. (2018). Live tables on planning application statistics. Retrieved 5 September 2018,
from https://www.gov.uk/government/statistical-data-sets/live-tables-on-planning-
application-statistics
Grigoryan, A. (2017). The Benefits of Server Side Rendering Over Client Side Rendering.
Retrieved 10 September 2018, from https://medium.com/walmartlabs/the-benefits-
of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Haining, R., & Haining, R. P. (2003). Spatial data analysis: theory and practice. Cambridge
university press.
Haklay, M., Singleton, A., & Parker, C. (2011). Web Mapping 2.0: The Neogeography of the
GeoWeb. Geography Compass. https://doi.org/10.1111/j.1749-8198.2008.00167.x
Henty, S. (2015). UI Response Times. Retrieved 10 September 2018, from
https://medium.com/@slhenty/ui-response-times-acec744f3157
Hernández, B., Jiménez, J., & Martín, M. J. (2009). Key website factors in e-business strategy.
International Journal of Information Management, 29(5), 362–371.
https://doi.org/10.1016/j.ijinfomgt.2008.12.006
Heywood, I. D., Cornelius, S., & Carver, S. (2011). An introduction to geographical
information systems (4th ed.). Harlow, England: Prentice Hall.
78
Hu, Y., Lv, Z., Wu, J., Janowicz, K., Zhao, X., & Yu, B. (2015). A multistage collaborative 3D GIS
to support public participation. International Journal of Digital Earth, 8(3), 212-234.
Jackson, S. (2008). The City from Thirty Thousand Feet: Embodiment, Creativity, and the Use
of Geographic Information Systems as Urban Planning Tools. Technology and Culture,
49(2), 325–346. https://doi.org/10.1353/tech.0.0039
Jain, R., Parmar, P., & Patel, D. P. (2017). “3D CITY MODEL” through QGIS–A Case Study of
GIFT City, Gujarat, India.
JS Foundation. (2018). jQuery. Retrieved 28 August 2018, from https://jquery.com/
Jurgiel, B., Verchere, P., Tourigny, E., Becerra, J. (2018). Profile tool QGIS. Retrieved 04
September 2018, from https://github.com/PANOimagen/profiletool
Kahila-Tani, M., Broberg, A., Kyttä, M., & Tyger, T. (2015). Let the Citizens Map—Public
Participation GIS as a Planning Support System in the Helsinki Master Plan Process.
Planning Practice & Research. Retrieved from
https://rsa.tandfonline.com/doi/abs/10.1080/02697459.2015.1104203
Kingston, R. (2002). Web-based PPGIS in the United Kingdom. In T. Harris, W. Craig, & D.
Weiner (Eds.), Community Participation and Geographical Information Systems. CRC
Press. https://doi.org/10.1201/9780203469484.ch8
Kingston, R. (2011). Online Public Participation GIS for Spatial Planning. In T. L. Nyerges, H.
Couclelis, & R. McMaster, The SAGE Handbook of GIS and Society (pp. 361–380). 1
Oliver’s Yard, 55 City Road London EC1Y 1SP: SAGE Publications, Inc.
https://doi.org/10.4135/9781446201046.n19
Kirk, A., Timms, S., Rininsland, A., & Teller, S. (2016). Data Visualization: Representing
Information on Modern Web (1st ed.). Birmingham: Packt Publishing Ltd.
Klosterman, R. E., & Brail, R. K. (Eds.). (2001). Planning Support Systems: Integrating
Geographic Information Systems, Models, and Visualization Tools (1st edition).
Redlands, Calif: Esri Press.
Klosterman, R. E., & Pettit, C. J. (2005). An Update on Planning Support Systems.
Environment and Planning B: Planning and Design, 32(4), 477–484.
https://doi.org/10.1068/b3204ed
Kluijver, H., & Stoter, J. (2003). Noise mapping and GIS: optimising quality and efficiency of
noise effect studies. Computers, Environment And Urban Systems, 27(1), 85-102. doi:
10.1016/s0198-9715(01)00038-2
Kong, N., Zhang, T., & Stonebraker, I. (2014). Common metrics for web-based mapping
applications in academic libraries. Online Information Review, 38(7), 918–935.
https://doi.org/10.1108/OIR-06-2014-0140
79
Le Dantec, C. A., Asad, M., Misra, A., & Watkins, K. E. (2015). Planning with Crowdsourced
Data: Rhetoric and Representation in Transportation Planning. In Proceedings of the
18th ACM Conference on Computer Supported Cooperative Work & Social Computing
- CSCW ’15 (pp. 1717–1727). Vancouver, BC, Canada: ACM Press.
https://doi.org/10.1145/2675133.2675212
Leicester City Council. (2018). Leicester City MAPS. Retrieved 19 August 2018, from
https://maps.leicester.gov.uk/map/Aurora.svc/run?script=%5CAurora%5Cw3%5CPLA
NNING%5Cw3PlanApp.AuroraScript%24&nocache=faf652c2-13af-c203-5242-
ac093e1e3686&resize=always
Livengood, A., & Kunte, K. (2012). Enabling participatory planning with GIS: a case study of
settlement mapping in Cuttack, India. Environment and Urbanization, 24(1), 77–97.
https://doi.org/10.1177/0956247811434360
Living Atlas of the World. (2018). Retrieved from https://livingatlas.arcgis.com/en/
Lodash. (2018). Lodash. Retrieved 28 August 2018, from https://lodash.com/
Mapbox. (2018a). Mapbox GL JS API. Retrieved 27 August 2018, from
https://www.mapbox.com/api
Mapbox. (2018b). Mapbox Style Specification. Retrieved 27 August 2018, from
https://www.mapbox.com/style-spec
Mapbox. (2018c). Analysis. Retrieved 28 August 2018, from
https://www.mapbox.com/analysis/
Mapbox. (2018d). Draw tools for mapbox-gl-js. Retrieved 30 August 2018, from
https://github.com/mapbox/mapbox-gl-draw
Mapbox. (2018e). Add a geocoder. Retrieved 9 September 2018, from
https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
Mapbox. (2018f). Measure distances. Retrieved 9 September 2018, from
https://www.mapbox.com/mapbox-gl-js/example/measure/
Mapbox. (2018g). Vector Tiles. Retrieved 10 September 2018, from
https://www.mapbox.com/vector-tiles/
Mapbox. (2018h). Mapbox API Documentation. Retrieved 10 September 2018, from
https://www.mapbox.com/api-documentation/#datasets
mathjs. (2018). math.js | an extensive math library for JavaScript and Node.js. Retrieved 28
August 2018, from http://mathjs.org/
Meenan, P. (2013). How fast is your website? Communications of the ACM, 56(4), 49.
https://doi.org/10.1145/2436256.2436270
Mewse, C. (2018). Project Motivation
Milner, J., Wong, K., Ellul, C. (2014). Beyond Visualization in 3D GIS. Proceedings of the GIS
80
Newham London. (2017). Local Plan Evidence Base: Tall Buildings. Retrieved from
https://www.newham.gov.uk/Documents/Environment%20and%20planning/TallBuild
ingsEvidenceBase.pdf
Node.js Foundation. (2018). About Node.js. Retrieved 28 August 2018, from
https://nodejs.org/en/about/
npm trends. (2018). cesium vs mapbox gl. Retrieved 28 August 2018, from
https://www.npmtrends.com/cesium-vs-mapbox-gl
ONS. (2018). Internet access – households and individuals, Great Britain - Office for National
Statistics. Retrieved 5 September 2018, from
Ordinance Survey. (2014). OS MASTERMAP TOPOGRAPHY LAYER User Guide. Ordinance
Survey. Retrieved from https://www.ordnancesurvey.co.uk/docs/user-guides/os-
mastermap-topography-layer-user-guide.pdf
Parker, G., Lynn, T., & Wargent, M. (2014). User Experience of Neighbourhood Plans in
England Research. Locality. https://doi.org/10.13140/rg.2.1.4574.5129
Patel, N. (2011, April 28). How Loading Time Affects Your Bottom Line. Retrieved 10
September 2018, from https://neilpatel.com/blog/loading-time/
Peng, Z. R., & Tsou, M. H. (2003). Internet GIS: distributed geographic information services
for the internet and wireless networks. John Wiley & Sons.
Pickles, J. (Ed.). (1995). Ground truth: The social implications of geographic information
systems. Guilford Press.
Plain English guide: to the Planning System. (2015). Retrieved from
https://nls.ldls.org.uk/welcome.html?ark:/81055/vdc_100048069015.0x000001
plotly. (2018). plotly.js. Retrieved 28 August 2018, from https://plot.ly/javascript/
QGIS Development Team. (2018). QGIS Geographic Information System. Open Source
Geospatial Foundation Project. http://qgis.osgeo.org”
Rauniar, R., Rawski, G., Crumbly, J., & Simms, J. (2009). C2C online auction website
performance: Buyer’s perspective. Ournal of Electronic Commerce Research, 10(2), 20.
Research UK Conference.
Rhind, D. W., (1989). Why GIS? ARC News. (Summer), 28-29.
Richards, G., Lebresne, S., Burg, B., & Vitek, J. (2010). An Analysis of the Dynamic Behavior of
JavaScript Programs. ACM Sigplan Notices, 45(6), 1–12.
Rigolon, F. (2012). Using QGIS for urban planning in the municipality of Montecchio
Maggiore, Vicenza, Italy. Retrieved 4 September 2018, from
https://www.qgis.org/en/site/about/case_studies/italy_vicenza.html
81
Simão, A., Densham, P. J., & Haklay, M. (2009). Web-based GIS for collaborative planning
and public participation: An application to the strategic planning of wind farm sites.
Journal of Environmental Management, 90(6), 2027–2040.
https://doi.org/10.1016/j.jenvman.2007.08.032
Singh, A., Bansal, R., & Jha, N. (2015). Open Source Software vs Proprietary Software.
International Journal Of Computer Applications, 114(18), 26-31. doi: 10.5120/20080-
2132
Spence, I., & Bittner, K. (2005, March 15). What is iterative development? -- Part 1: The
developer perspective. Retrieved 28 August 2018, from
http://www.ibm.com/developerworks/rational/library/mar05/bittner/index.html
Steiniger, S., & Bocher, E. (2009). An overview on current free and open source desktop GIS
developments. International Journal Of Geographical Information Science, 23(10),
1345-1370. doi: 10.1080/13658810802634956
The M-Lab NDT Data Set. (2018). Retrieved from https://measurementlab.net/tests/ndt
The Skeffington Committee. (2013). People and Planning : Report of the Committee on
Public Participation in Planning (The Skeffington Committee Report). Routledge.
https://doi.org/10.4324/9780203794968
Turfjs. (2018). A modular geospatial engine written in JavaScript. Retrieved 28 August 2018,
from https://github.com/Turfjs/turf
Unlocking of government’s mapping and location data to boost economy by £130m a year.
(2018, June 13). Retrieved 9 August 2018, from
https://www.gov.uk/government/news/unlocking-of-governments-mapping-and-
location-data-to-boost-economy-by-130m-a-year
Urban Initiatives. (2010). BATH: Building Heights Strategy (No. 3).
Ushahidi. (2018). Retrieved 23 August 2018, from https://www.ushahidi.com/
Vector tiles: the next generation of tiled maps. (2016). Retrieved 27 August 2018, from
https://www.e-education.psu.edu/geog585/node/746
Visualization. (2018). Retrieved from https://www.arcgis.com/features/visualization.html
Warnecke, L., Beattie, J., Kolin, C., & Lyday, W. (1998). Geographic information technology in
cities and counties: A nationwide assessment. Chicago: Urban and Regional
Information Systems Association.
Waters, N. (2017). GIS: History. International Encyclopedia Of Geography: People, The Earth,
Environment And Technology, 1-12. doi: 10.1002/9781118786352.wbieg0841
What is PFR? | Planning for Real. (n.d.). Retrieved 23 August 2018, from
http://www.planningforreal.org.uk/what-is-pfr/
82
Wilson, A., Tewdwr-Jones, M., & Comber, R. (2017). Urban planning, public participation and
digital technology: App development as a method of generating citizen involvement in
local planning processes. Environment and Planning B: Urban Analytics and City
Science. https://doi.org/10.1177/2399808317712515
Yeh, A. G. O. (2008). GIS as a planning support system for the planning of harmonious cities.
Nairobi: United Nations Human Settlements Programme.
Zambotti, G., Guan, W., & Gest, J. (2015). VISUALIZING HUMAN MIGRATION TRHOUGH
SPACE AND TIME. ISPRS Annals Of Photogrammetry, Remote Sensing And Spatial
Information Sciences, II-4/W2, 155-161. doi: 10.5194/isprsannals-ii-4-w2-155-2015
83

Exploring The Potential of 3D Web Mapping and Analysis To Support Informed Decision Making in Planning

Uploaded by

Copyright:

Available Formats

You might also like

Exploring The Potential of 3D Web Mapping and Analysis To Support Informed Decision Making in Planning

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Exploring The Potential of 3D Web Mapping and Analysis To Support Informed Decision Making in Planning

Uploaded by

Copyright:

Available Formats

Exploring the potential of 3D web mapping

and analysis to support informed decision

A research project submitted in

University College London

12th September 2018

Academic supervisor: Industry supervisor:

Student Name: ______RICHARD HARGREAVES________

Programme: _____________MSc GIS________________

Supervisor: ____________Dr Claire Ellul_____________

Emerging need within UK planning

Clientele include local councils, private companies and GIS professionals.

1.3.1 Web services

Figure 2: Parish Online platform, showing relevant layers for planning.

Chris Mewse, Managing Director at GeoXphere Ltd. (Mewse, 2018)

2.1.1 Three-dimensional GIS

2.1.2 Desktop and Web GIS

• Ease of dissemination: Resulting in development • Performance: Transfer of information from

• Ease of use: With web interaction being aimed at

• Cost: If using a proprietary service or SaaS

• In-Depth analysis: Often the ability of desktop GIS

read, analysed and stored can be kept within a more.

• Cost: Licencing can often be costly with

Decision takers Brief role outline

Planning Inspectorate A group of inspectors who enforce and decide upon

County and district level currently undertake most

The town and parish level is often expected to comment

Officers Planning officers are employed at county and district

Councillors Often these are locally elected people who lead in

2.3.1 Public Participatory GIS

2.3.2 Recent developments of public engagement in planning

Figure 7: Diagram of gap within the

An opensource desktop alternative is QGIS 3.0.0 (2018), which is an extensive desktop

Figure 12: Mock-up diagram of prototype web application.

4.4.5 Analysis, tool creation and results presentation

Figure 13: Exemplar diagram for the iterative development process.

Figure 14: The four stages of development.

5.1.1 Data loading

var EatonBray = 'data/EatonBray.json';

5.1.2 Map initialisation

var map3D = new mapboxgl.Map({

var disable = false;

Code Snippet 3: Using Mapbox GL JS 'on' function to simultaneous

5.2.1 Drawing the profile segments

5.2.2 Points of Intersection

for (var i = 0; i < intersectingFeatures.features.length; i++) {

Figure 15: Visual example of how the midpoint of two intersects.

for (var i = 0; i < (interArray.length-1); i++) {

Finally this creates the midpointArray array which is

for (var i = 0; i < midpointArrayPoints.length; i++) {

5.2.5 Visualising the intersected buildings

5.3.1 Plotly.js plot outline and core components

var heightGraph = [{ The plotly.js plot is initialised in the

Plotly.plot(chart, heightGraph, layout);

for (var i = 0; i < interArray.length-1; i++) {

5.4.1 Querying buildings of equal heights

The value of feature.properties.relh2 is subsequently used at the end of this function to

var feature = e.features[0];

var title = document.createElement('strong');

Student Name: RICHARD HARGREAVES__

Programme: _MSc GIS____

Supervisor: Dr Claire Ellul_