GEOG 650
Final Project Report
A.Bartholomew
Introduction & Background
I have a personal background and interest in being physically fit. I played college football
at Colgate University and I continue to participate in several recreational flag football, basketball
and cycling teams. Thus, the design of my mobile GIS final project is to provide information on
how to become more active and physically fit. My mobile GIS project has several pages related
to physical activity.
My mobile application is designed for use by various people, especially those who are
interested in becoming more physically fit or want to know more about the relational activities
close to their current locations. My goal is to design an application that users can use to quickly
get information associated with making navigable driving decisions regarding where they can
access multiple fun physical activities in their area.
Data Description
The data to be used in the development of this mobile web application came from several
sources. The primary source of data used derives from YouTube, Google Maps reverse geolocator function, Google query search results and mobile application user entered information
into a MySQL database. I collected the YouTube data by searching several other YouTube user
websites for physical activity data related to the topics and search results of my current web
page. The geolocation data and search results data are found through JavaScript function created
within my mobile web application. The structure of the connected MySQL database mimics the
structure of the database we created in lab 6 of this course. In this project the database abarthol,
and the table that holds the data is called action. The action table structure has 11 columns. The
image below shows the table structure for the action table.
1
GEOG 650
Final Project Report
A.Bartholomew
System Description
The mobile web application will have a minimum of five pages, consistent navigation
and utilize five CSS styling techniques. The application will be created using HTML5, CSS3,
JavaScript, j-Query mobile. The sites application design and navigation structure is based upon
the jQuery mobile data themes. I used three different data themes within my project. JavaScript
is the development language used to create all the functions. I utilized PHP to connect user
entered information into a MySQL database. One PHP file I created is called insert action; this
file inserts user information into the MySQL database. This form allows users to select their
favorite activity, share information with other users about which activities they enjoy, and allows
users to view what other users have entered into the database. The second PHP file I created is
called list_action. This file is a PHP file that lists all the user information within the entire
database (limited to 10 most recent results).
One of the main algorithms I used is the Google Maps query for Supported Place Types
(https://developers.google.com/places/documentation/supported_types). This link provides a
tutorial that developers can use to identify which place types are supported within the Google
query places function. The query places details are editable, this link provides information about
how developers create searches ( https://developers.google.com/places/documentation/details) .
2
GEOG 650
Final Project Report
A.Bartholomew
Another main algorithm I used in developing this project allows users to find and show
their current location. The geocoder function is used to automatically show the user’s location
upon mobile application initialization. Once the latitude, longitude and current address are
found, these values are retained and later used within other functions. The queryPlaces function,
mapResults function, and buildLocations function all call upon the previously retained values of
the user location.
I used the YouTube function to link the user with content from my personal YouTube.
This function works by calling out to the YouTube API to get the content from my personal
YouTube account in the form of JSON data. This JSON data is then parsed into an html string as
an unordered list of videos. I am able to style to the width and height of the YouTube videos;
also, I can select how many videos I want to display on the page.
Implementation Results
To summarize the functionalities of the source files in my application, I will start with the
home (index) page. The home page has four options that link the user to another page with
information related to being physically active.
3
GEOG 650
Final Project Report
A.Bartholomew
The first option is the “Fun Family Activities” tab. When clicked, this takes the user to the
“What’s Nearby” page. The “What’s Nearby” page has a data header with a home icon and a
map view button. The home icon will take the user back to the home page, and Map View
button takes the user to view a Google map. The content of the “What’s Nearby” page has five
option links that are related to the importance of being physically fit.
The user can search for:
1. Gym Facilities
2. Public Park Areas
3. Amusement Park Locations
4. Bowling Alley Locations
5. Art Gallery Location
All of these locations are within a user specified search radius. The 6th option in the
content area is the “Select a Search Distance in Meters”; this allows the user to find locations of
interest within a user selected distance in meters away from their current location. Also, within
the content section of this page is the user’s current location: Latitude, Longitude and Address.
4
GEOG 650
Final Project Report
A.Bartholomew
This information is obtained from a built in geolocation function that the user must accept when
prompted. Finally, the “What’s Nearby” page has a footer with links to all other pages.
From the “What’s Nearby” page, when you select one of the five option links, i.e., Gym
Facilities, the user is then taken to the “Results” page. This page has results for all the Gym,
Health Club and exercise facilities within the search radius that the user established. The
“Results” page provides the user with the name of the facility, address and average rating for that
facility. The user can scroll through the results and select a place of interest.
5
GEOG 650
Final Project Report
A.Bartholomew
Click the blue arrow at the right of the page corresponding to the search results of
interest, and the user is then taken to a new page called “Map View”. On the “Map View” page
there is a custom styled Google Map, and satellite, road, and hybrid Google Maps. The
significance of the custom styled map is to help the user quickly identify map elements of
interest. The colors for the land cover in the styled map are the same as those found in the
Harvard University GIS color styling manual
(www.gsd.harvard.edu/gis/manual/style/ColorConventions.pdf).
6
GEOG 650
Final Project Report
A.Bartholomew
Also the map has a drawing feature which enables the user to drop points, create lines and circles
on the Google Map. Also, if the user zooms out, the map has three more data layers that are only
seen at specific zoom levels. There is a traffic layer, weather layer, and cloud layer in this
Google Map. This image shows the weather and cloud layers.
Additionally, if you change the “Mode of Travel Directions”; the user will receive alternative
mode of travel directions. The alternative modes are Transit, Walking, Driving, and Biking.
Finally, if you select the “Driving Directions” button on the right side of the header of “Map
View” page, the user is then directed to a page called “Directions”. On this page the user can see
written out step by step travel directions to the location they chose from the “Results” page.
7
GEOG 650
Final Project Report
A.Bartholomew
Also, there are icons in the header of the “Directions” page that link to the home index page and
back to the “Map View” page.
My mobile GIS project is connected to a MySQL database, which stores user
information. From the home page, the second tab “Add Your Information” will take you to the
“User Database Information” page. This page has MySQL data base which has a table within
that stores several user attributes; such as, favorite activities, user’s first name, last name, age
group, gender, shared users information “tell about yourself”, latitude, longitude and the address
for the current user location. The original design for my mobile project was not achievable,
forcing me change directions. Also, at the top of the page, on the right side of the “User Database
Information” header, an ‘I’ icon is visible. This icon links the user to the MySQL database
results. This icon links through a PHP file to query the MySQL database and fetch the most
recent 10 data entries into the database table. The ‘I’ icon is useful for other users to see other
8
GEOG 650
Final Project Report
A.Bartholomew
users in their area, and which activities other users enjoy. Finally, the “User Database
Information” page has a footer with links to all other pages.
The third option on the home page is the “Health Information & YouTube Sports Videos”
tab. This tab links the user to the “Health Information” page. This page has text related to
physically fitness. The header for this page has two links; the top left has a link with a home
9
GEOG 650
Final Project Report
A.Bartholomew
icon which takes the user back to the home page. On the right, the video clip icon links the user
to YouTube videos.
The YouTube videos are part of the data I used. I found videos I wanted to use on
YouTube, and then used a program called Clip-Grab to download the video; finally, I would
upload the video with my YouTube user account to include it on my YouTube page, linked to
within the JavaScript function YouTube.
The fourth option on the home page is the “Contact the Developer” tab. This tab links
the user to information about the mobile web application developer. When clicked, the user is
taken to the “Contact A. Bartholomew” page. The header of this page has two icons. The star
icon will link the user to the developer’s LinkedIn page and the icon on the right of a house; will
10
GEOG 650
Final Project Report
A.Bartholomew
link the user back to the index home page for the web application. The content of this page
shows the user with a photo of the developer and the current completed University of Maryland
MPSGIS program course work. Finally, the “Contact A. Bartholomew” page has a footer with
links to all other pages.
Conclusion/Reference
In conclusion the project can be further improved by increasing the level of content on
the YouTube page. Currently there are only five videos for users to view. The project can also
be improved by adding pages that link from the home page. In the future, I can work more with
the Facebook API and Flickr APIs to allow users to share content that they have already
uploaded. Finally, the project was very successful. This project provides users with useful
information regarding how to get active in their current area.
11