TECHNICAL AND
DESIGN DOCUMENT
19th Century Mormonism Web Mapping
By:
Ryan Woods and
Matt George
Table of Contents
Usage and Restrictions.................................................................................................................... 2
Technical Specifications .................................................................................................................. 3
Software Details .......................................................................................................................... 3
Compatibility and Limitations ..................................................................................................... 3
Website Design ............................................................................................................................... 3
Purpose ....................................................................................................................................... 3
User Interface Elements ............................................................................................................. 3
Main Files .................................................................................................................................... 6
Code Structure ............................................................................................................................ 6
Key Functions .............................................................................................................................. 7
Usage and Restrictions
Copyright © 2015, Ryan Woods and Matthew George
Permission is hereby granted, free of charge, to any person obtaining a copy of this software
and associated documentation files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or
substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Technical Specifications
Software Details
This software was built for the purpose of visualizing early LDS church history in a website
setting. The website was built with HTML, CSS, and JavaScript. The map is from MapQuest.com.
The different codes were written using Notepad++ and GitHub.com. Our website domain name
was purchased at GoDaddy.com and was hosted with GitHub.com. The website domain name is
www.19thCenturyMormon.com and the code repository for website is on GitHub called
ryanwoods7. The code was tested and developed by Matt George and Ryan Woods.
Compatibility and Limitations
The capabilities of GitHub work great for hosting a website, except when including images.
GitHub doesn’t currently have the ability to add images to their repositories, but are mainly
used for code. To use images on our website, the user has to use an image hosting service or
link to another website. This website was tested on Google Chrome 41, Mozilla Firefox 36, and
Internet Explorer 11. We do not guarantee compatibility other operating systems.
Website Design
Purpose
The purpose of this website was to create a site with 19th Century Church history in North
America. We needed a map that would go to each historical event with a drop-down list, have
icons for each event, and a pop up bubble with information about the event. Each pop up
bubble needed the name of the historical event, the location, date, description, and a website
for more information. The website needed an about page to describe the website, a
documentation page to give more detail about the website, and a contact us page to give the
user the ability to contact the designers of the web page.
User Interface Elements
The JavaScript is used in the map is designed to give the user the ability to access historical sites
of interest. The user has the option of using the drop-down list or the map itself to view sites of
interest. When the user uses the drop-down list, the map will update to the historical event
selected and will show the user the pop up bubble. When the user uses the map, each icon,
polyline, or polygon selected will bring up the pop up bubble associated with that event. Each
new event selected will change the pop-up bubble to that event. When the user selects an area
of the map without an event, the pop up bubble is hidden. There is also a Reset View button
which refreshes the map to the view shown in Figure 1 below. The Default View in the dropdown list also refreshes the map.
Figure 1. 19th Century Church History Map.
On the Contact Us page of the website, there is a form to send the designers of the website any
question concerning the website shown in Figure 2. The user fills out the form shown below
and then clicks on the Contact Us button to send the designers an email. Figure 3 shows how
the Outlook email should look like when the user clicks the Contact Us button. The Clear button
on the form clears the user form.
Figure 2. The contact us user form.
Figure 3. The resulting e-mail generated in Microsoft Outlook.
Main Files
The main files for this website can be found at GitHub.com in the repository called ryanwoods7
shown in Figure 4 below. The home page is called index.html and the other website pages are
shown as .html below. The stylesheets can be found in the resources folder, the KML files can
be found in the KMLandPNG folder, and the different text fonts can be found in the fonts
folder. Images that were used for this website cannot be found on GitHub because of the
limitations of GitHub discussed above. Therefore, images won’t be available for download from
our website.
Figure 4. Ryanwoods7 Repository on GitHub.
Code Structure
The previously mentioned user interface map has several functionalities. The flow diagram in
Figure 5 presents the available options. The ensuing section of this documents dives into the
technical aspects of these functions. A UML sequence of the code is included on the final page
of this report in Figure 6. This shows what happens when the website is loaded.
Figure 5. Flow diagram of the map on 19thcenturymormon.com.
Key Functions
Table 1 contains information regarding the JavaScript functions used on the web site. The
function name is in the left column and a description of the function is included in the right
column.
Table 1: JavaScript Functions
Function
mapSetup()
zoomTo(kmlname)
buildLayers()
map.onclick
closer.onclick
popUp()
destroyPopup()
Description
This function runs when the webpage loads and creates the map
which appears in the center of the index page. It also contains the
buildLayers() and two on-click functions described below.
The zoomTo() function runs when the drop-down list is changed. It
passes in the name of the KML selected and runs it through a loop to
find the right vector layer already on the map. It then zooms to the
extents of that KML and runs the popUp() function. If certain KMLs are
selected, the default zoom value will change. If the user selected
default view, rather than a KML file, it will reset the map to its original
view and run destroyPopup().
All of the layers which are added to the map in mapSetup() are
created by this process. It is coded to use a MapQuest satellite map as
the basemap. It then cycles through each KML and makes each one
into a vector layer and gives them an alternate name to be used in the
zoomTo() loop.
When a user clicks anywhere on the map this function runs. It first
runs destroyPopup() and then checks if there is a feature (or KML
icon) at the pixel clicked on. If there is, the it returns the feature, sets
the coordinates of that pixel and runs popUp(). If not, nothing else
happens.
The closer is the ‘X’ in the upper right hand corner of the pop-up
bubbles. By clicking on it, destroyPop() executes.
This is the function which causes the actual information bubbles to
appear. It sets the comment bubble at the coordinates passed in and
displays the metadata of the KML file (this metadata includes event
name, location, date, description, and a more information hyperlink).
destroyPopup() works by setting the comment bubble’s position as
undefined and blurring the closer icon. These two steps effectively
hide the comment bubble from the user.
Figure 6. UML Sequence of loading the web page.