UC Merced Digital Campus: Virtual Tour
Derek Burch, Paul Felkai, Jared Lindblöm, Jared Petker
Introduction
UC Merced is a campus that is currently experiencing substantial growth. From year to
year the profile of the campus grows and it is quite interesting to watch new buildings pop up
frequently. The problem is that for those unable to visit the campus, they are unable to witness
the growth and development. Our project sets out to solve this problem by creating an online
visual walkthrough of the UC Merced campus. The tour we created contains information on the
various locations and buildings to help people acclimate themselves with the layout of our
campus. We feel this tool may be a valuable resource for prospective students, visiting
professors, and families who cannot see the college firsthand. Our project was written primarily
in HTML and JavaScript utilizing the Google Map API. JavaScript and HTML allow a user to
easily interface with our project from a web browser, while the Google Map API gives an aerial
view of the campus using a satellite image.
Data Collection
An important aspect of this project was the collection of campus data. While we were
unable to represent the entire campus due to a limited amount of time and resources, we
managed to include 48 locations spread around the campus. At each location, its GPS
coordinates were recorded and four images were taken to represent the location visually. After
the images were taken, a script was used to tie GPS coordinates to each set of four images. This
process resulted in a set of nodes that were later connected as a graph.
The Map View
The main part of the project is contained in the actual Google map located on the left side
of the page and the ‘viewport’, or campus view, located on the right of the page. First, the map
contains many markers overlaid on top of the satellite image which serve as ‘nodes’ and/or
points of interest within our campus. Clicking on nodes which contain an actual point of interest
will bring up a dialogue explaining what is interesting about that node or what is located there.
As each node represents an actual location on the campus, visiting any given node will put an
image on the viewport to the right showing that node visually with images (to be explained in the
‘viewport’ section). Also on the map are two markers labeled ‘A’ and ‘B’. These act as start and
end indicators that can be used to plan a walkthrough of campus. These markers have a ‘drag
and drop’ feature where they can be dragged to a node using a mouse. The ‘A’ and ‘B’ markers
can also be moved by selecting the nodes in the combo boxes below the map. When one of these
markers is placed on a node, the program will snap to the node that the marker is dropped on.
Putting both of these markers on two different nodes will cause a path between the two points to
be overlain onto the map. In the code, all the nodes on the map are represented as a graph data
structure where each of the nodes has a possibility of four connected edges. A breath-first-search
is done on the graph whenever a path between two points is queried.
Once a path has been
calculated, the user can begin a walkthrough by clicking the ‘play’ button. Doing this will send
the user along the desired path on the Google map, as well as visually walk them through the
path on the viewport to the right. The top right of the page also provides a search box that can be
used to search for items in the map. Clicking on a search result takes the user to that node and
displays the proper images in the viewport.
The Viewport
As stated, on the right side of the page is what we call the ‘viewport’. The viewport
houses the image representation of whichever node you are actually located at. Each node has
four directions: front, back, left, and right. Each direction also has an image which coincides
with actually looking in that direction if you were physically standing on that node’s location on
campus. A directional pad at the bottom of the viewport gives you access to a way of traversing
through the images/nodes and around campus. Double clicking on the image will also send you
forward through the campus, and the images can be dragged left and right to turn if desired. It
can be seen that in certain places, building, statues, or points of interests are outlined on the
image. Mousing over these outlined regions will provide the user with information about that
building, statue, or point of interest via a div popup. This information usually contains a title and
description for the region, as well as a URL link where applicable.
Future Work
While we completed what we set out to achieve, there are always improvements that can
be made. The first and most obvious one is that the pictures are not continuous, i.e. when going
left to right the edges of the pictures do not align properly. A solution to this would be to attain a
360o camera capable of taking a panoramic picture of the location you are at. The project also
will have issues in Internet Explorer and other browsers which do not support the HTML canvas
object properly, which is used for the viewport. Internet Explorer does support a different type
of canvas, but it would be quite a bit of work to implement this within what we currently
finished. Different screen resolutions also pose a problem to us at the moment as everything is a
set size so different resolutions will stretch and distort everything on the page if not viewed at
say 1280x800. The user interface is somewhat plain as well. As we were not the best designers,
someone with better design ideas/know-how for creating more visually pleasing interfaces would
be able to fix this. A last issue is that breadth first search is currently used to plan paths between
nodes on the campus map. This causes the search to find paths that have the smallest amount of
nodes between them rather than the shortest distance between a start and end node. An
implementation of Dijkstra’s algorithm is a potential solution to this problem.
Conclusion
Our project was designed to give a visitor, who has never seen our campus before, a feel
for what UC Merced is like. We hope to see future groups add to our project and make it better,
so that one day this resource will be an aid in a prospective student’s decision to attend our
school.